Reduce the size of your SVG

...so recently i was playing with SVG, and i wanted to embed an older version of this map of Europe into my html . Currently it is about 500 KB, but as far as i remember, it was even heavier. Pretty bad, if you want to inline it, and your visitors have to download it. So how did i reduce the size to one tenth of it?

Yes, gzipped version of SVG exists, but not when you inline it, so its a no-go in my case.

delete unnecessary regions
I didn't need Greenland and Russia for example, so i just erased them from the source file.

delete unnecessary metadata
My file was scattered through with inkscape:xyz and some other editor's metadata, which might be useful when editing the file, but useless when i publish it on the web. They had to go.

group and style wisely
Don't repeat the same styles/transformations on many elements, use grouping instead (<g> element)

remove unnecessary transformations
A lot of my regions contained a very little translate transformation, which had no visible result at all, so i chucked them out.

compact path data
According to the SVG specs, you can reduce the size of your path data by removing redundant white spaces from around commands and coordinates. Works great!

simplify path data
Ok, this one you will not be able to do in your text editor. The idea is to reduce the number of coordinates required to describe a path. Even if it means you will have a less precise path, the result might be satisfying. To do this, you have to have Inkscape. Select an area, and you will see in the status bar the number of nodes it consists of. Now select path/simplify from the menu. If you are lucky, your number of nodes will be less, if you are not, it will actually be higher:) For me it worked best, when i set the simplification threshold (Edit/Preferences - Misc) from 0.0020 to 0.01. Yes, you will have visible deviation from the original path, but in my case it was acceptable. Also note, that under a certain number of nodes (for me it was around 80) it is not worth to run the simplification.

reduce coordinate precision
Ok, so i still had (and you will most likely have) a precision of four decimals in my path coordinates. What if i reduce it to 3/2/1/God forbid zero ?! Yep, no visible impact on the web, but huge saving on the filesize! This is the ultimate file size killer, if you can afford it.

NOTE: Other good tips you can read here and here.


Anonymous said...

congrats! would you mind showing us the result? thanks!

maschek said...

You can see the results in the source code of:

not for IE, try your luck with any other browsers:)

Toniosky said...

Thanks for the tips! You helped me a lot