7 ms·

That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo.svg https://raw.githubusercontent.com/badges/shields/ma

That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo.svg https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!

mosburger 10y ago
Yeah, it seems like a tool like that wouldn't be hard to build... hmm... :)
- vincent91 10y ago
  Inkscape can convert fonts inside an SVG to paths.
nathan-wall 10y ago
I've been converting each font awesome image I need to SVG by hand. It's actually really easy. 1. Open fontawesome-webfont.svg in a text editor. 2. Find the glyph you want to use. 3. Copy it into a new file. 4. Add boilerplate[1] to new file. 5. Change the <glyph> tag to a <path> tag. 6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"` 7. Open the file in Chrome and see your SVG. [1] boilerplate: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> {glyph goes here} </svg> [Example] Starting with the following glyph: <glyph glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> We end with: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> <path transform="scale(0.1,-0.1) translate(0,-1536)" glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> </svg> The `unicode` and `glyph-name` attributes can be removed.
- maxerickson 10y ago
  That's more straightforward than it is easy. Easy would be: fa2svg f015
  - emerongi 10y ago
    That's more simple than it is easy. Easy would be: Think "I want that glyph" and then it's just there!
  - Steeeve 10y ago
    https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG This converts the icons to either svg or png in whatever color you want, in any size you want.
olegkikin 10y ago
Here, reduced it from 8832 bytes down to 4710 http://olegkikin.com/badge2_cleaned.svg http://olegkikin.com/badge2_cleaned.svg And it GZips better as well (4793 -> 2120). I opened it in Inkscape, converted the text to path. Then ran it through SVGCleaner. You can also do manual simplification in Inkscape (Ctrl + L) till the quality starts to degrade. This lets you reduce things even further: http://olegkikin.com/badge3_cleaned.svg http://olegkikin.com/badge3_cleaned.svg 3516 bytes, 1726 GZipped.
- espadrine 10y ago
  Nice! Can I use it? (If you want, you can also submit a patch in https://github.com/badges/shields. https://github.com/badges/shields.)
  - olegkikin 10y ago
    Yeah, it's your artwork, I just optimized it.
- jcl 10y ago
  When reducing SVGs for data urls, I've found you can reduce size even further by scaling the image up, then rounding coordinates to integers. I've written a few scripts to assist with this, but I imagine you could get a similar effect in Inkscape by snapping everything to an integer grid. Also, merging path elements together helps. For example, here's the logo in 1952 bytes: http://pastebin.com/YYBpWsDE http://pastebin.com/YYBpWsDE And I'm sure there's further room for manual reduction, maybe by switching between strokes/fills and further cleaning up the paths. (It would be cool if someone were to work on an automated system for doing this kind of simplification. But I have a feeling that it's difficult find a general technique that will work across SVG hierarchies, like scaled/rotated groups, etc.)

mosburger 10y ago

Yeah, it seems like a tool like that wouldn't be hard to build... hmm... :)

vincent91 10y ago
Inkscape can convert fonts inside an SVG to paths.

nathan-wall 10y ago

I've been converting each font awesome image I need to SVG by hand. It's actually really easy. 1. Open fontawesome-webfont.svg in a text editor. 2. Find the glyph you want to use. 3. Copy it into a new file. 4. Add boilerplate[1] to new file. 5. Change the <glyph> tag to a <path> tag. 6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"` 7. Open the file in Chrome and see your SVG. [1] boilerplate: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> {glyph goes here} </svg> [Example] Starting with the following glyph: <glyph glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> We end with: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> <path transform="scale(0.1,-0.1) translate(0,-1536)" glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> </svg> The `unicode` and `glyph-name` attributes can be removed.

maxerickson 10y ago
That's more straightforward than it is easy. Easy would be: fa2svg f015
- emerongi 10y ago
  That's more simple than it is easy. Easy would be: Think "I want that glyph" and then it's just there!
- Steeeve 10y ago
  https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG This converts the icons to either svg or png in whatever color you want, in any size you want.

olegkikin 10y ago

Here, reduced it from 8832 bytes down to 4710 http://olegkikin.com/badge2_cleaned.svg http://olegkikin.com/badge2_cleaned.svg And it GZips better as well (4793 -> 2120). I opened it in Inkscape, converted the text to path. Then ran it through SVGCleaner. You can also do manual simplification in Inkscape (Ctrl + L) till the quality starts to degrade. This lets you reduce things even further: http://olegkikin.com/badge3_cleaned.svg http://olegkikin.com/badge3_cleaned.svg 3516 bytes, 1726 GZipped.

espadrine 10y ago
Nice! Can I use it? (If you want, you can also submit a patch in https://github.com/badges/shields. https://github.com/badges/shields.)
- olegkikin 10y ago
  Yeah, it's your artwork, I just optimized it.
jcl 10y ago
When reducing SVGs for data urls, I've found you can reduce size even further by scaling the image up, then rounding coordinates to integers. I've written a few scripts to assist with this, but I imagine you could get a similar effect in Inkscape by snapping everything to an integer grid. Also, merging path elements together helps. For example, here's the logo in 1952 bytes: http://pastebin.com/YYBpWsDE http://pastebin.com/YYBpWsDE And I'm sure there's further room for manual reduction, maybe by switching between strokes/fills and further cleaning up the paths. (It would be cool if someone were to work on an automated system for doing this kind of simplification. But I have a feeling that it's difficult find a general technique that will work across SVG hierarchies, like scaled/rotated groups, etc.)