- PNG: 558 x 715 px: 44KB
- PNG: as thumbnail: 20 KB
- PNG: 536 x 696 px, optimized: 8KB
- SVG: 11 KB (35 KB as regular file)
Optimizing Inkscape SVG size for the Web
During lunch one day at the latest SVG working group meeting, I had a discussion with Doug Schepers about Inkscape’s use for creating Wikipedia graphics. Doug says it stinks and pointed me to a talk at SVG Open 2009 by Brion Vibber who discussed how even gzipped SVG files were much bigger than PNGs. The worse category for “bloat” is flags where an SVG file is on average 18 times bigger than the equivalent PNG. Now this may not sound important to you and me but to somebody serving up zillions of graphics it cost real money.
Today I came across a graphic of a clock escapement. In the “talk page” for the article on Robert Hooke, graphic file size is briefly discussed. The page gives the size of various versions of the graphic but it’s a bit hard to figure out what exactly they mean. Here is a short summary:
You can do something more:
1. Round the floats in path (in many cases a integer is a good choice)
2. Round the matrix – i prefer this stylesheet (http://datenverdrahten.de/xslt2/svg_matrix_round.xsl)
3. Abstract the SVG, use the use
4. Take a small declaration: if you don’t use a xlink delete it
5. Delete the metadata section