That is what I did for the shields.io logo: 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!
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!
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>
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>
fa2svg f015This converts the icons to either svg or png in whatever color you want, in any size you want.
Think "I want that glyph" and then it's just there!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
3516 bytes, 1726 GZipped.
Also, merging path elements together helps.
For example, here's the logo in 1952 bytes: 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.)
(If you want, you can also submit a patch in https://github.com/badges/shields.)