Minimize SVG files

24.08.2015 by Stefan Wintermeyer

Last Saturday I gave a talk about WebPerformance at FroSCON. On the same day Tobias Baldauf (@tbaldauf) of Akamai gave a great talk about JPEG compression which was very interesting.

But what was most interesting for me was not the JPEG part but the slide 121 which displays the source code of a SVG file on the left page and a compressed version of the same file on the right page.

<img src=”/assets/2015/08/24/svgo-example-screenshot.png” alt=Slide 121 Screenshot=”true” width=”709” height=”397” alt=”2015/08/24/svgo-example-screenshot.png”>

The moment I saw that slide it clicked. I wondered why I didn’t think about this earlier: SVG files contain a lot of float numbers with many decimal places. By rounding those decimal places you’ll end with a smaller file and in most cases you will not see a difference in the result. By rounding 1.2000001 to 1.2 you’ll save 6 digits but lose only minor actual information.

And it even gets better: There is a tool for the job. SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files. SVGO does all sort of optimization and minifying magic to SVG files. You can include it in your building pipeline easily:

svgo test.svg test.min.svg

You find the Github repository at https://github.com/svg/svgo and there’s an online version to get a feeling for it at https://jakearchibald.github.io/svgomg/.

Many WebPerformance professionals use SVG files to save space. Now you can even save more space by minifying those files. Which was the first thing I did for www.amooma.de. Have a look at the Github commit to see the difference.

Update: Nick Bruun @NickBruun who has done a lot of work with SVGs at Iconfinder told me that SVGO does botch SVG files in some cases. So you want to double check your results. I haven’t had any problems yet but Nick is a guy who knows what he’s doing.

2nd Update: A couple of days after Nick tweeted about potential problems with SVGO the maintainer of SVGO - Lev Solntsev - contacted both of us offering bugfixes for any problem. You gotta love open source for this. :-)

WebPerf