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