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

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.




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

Search: