Hacker News new | past | comments | ask | show | jobs | submit login

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!




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="&#xf015;" 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="&#xf015;"
        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.


That's more straightforward than it is easy. Easy would be:

    fa2svg f015


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.


That's more simple than it is easy. Easy would be:

    Think "I want that glyph" and then it's just there!


Here, reduced it from 8832 bytes down to 4710

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.


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

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.)


Nice! Can I use it?

(If you want, you can also submit a patch in https://github.com/badges/shields.)


Yeah, it's your artwork, I just optimized it.


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


Inkscape can convert fonts inside an SVG to paths.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: