My Adventures in SVG Optimization

I recently created an SVG version of my logo using Sketch and while you should always optimize your images, the resulting file really needed it. It was quite large (as far as SVGs go): 89KB. It really needed to be optimized.

Trying to optimize it wasn’t as straight-forward as I thought. I tried different online apps, with mixed results. Below is what I encountered.

Caveats:

  • My logo has many more shapes and gradients than most logos. My feeling is that some of the optimizers work better with  simpler images
  • The logo was made in Sketch, and with multiple shapes that are copy/paste from other shapes, then flipped and rotated (this seems to affect some of the optimizers)
  • What I’m posting here is the default settings for all apps, unless otherwise specified
  • This is a very simple, image specific test, but I thought some may find it useful
  • In some optimizers, it was easy to tell how the optimization took place, while in others it was a mystery

The Original (PNG)

The original logo was made in Photoshop/Illustrator and had more textures, and strokes. As part of my redesign, I simplified it.

Original PNG Logo

Original PNG: 65KB

No optimization

Exporting directly from Sketch gave me an 89KB SVG file.

SVG export from Sketch screenshot

SVG export from Sketch: 89KB

SVG optimiser by Peter Collingridge

Some of the articles I read recommended this site, but it did not work for me at all. It gave me some errors:

Error message screen caption

I tried troubleshooting the code, but life is too short, so I didn’t try very hard and kept going.

SVG editor by Peter Collingridge

By the same author, but here you can play with the settings. For my test, I chose the default “Conservative”. The result was a 61KB, but the image was also changed.

Conservative settings result screen shot

Conservative Default Settings: 61KB

To be fair, after playing with the settings (leaving the decimal points unchanged, but removing whitespace, empty elements, and unnecessary groups), I got the file to 65KB, without any loss of quality.

SVGOMG! (SVGO’s Missing GUI)

SVGO is an optimizer for Node-js (i.e. it can be used with task runners like Gulp or Grunt), and SVGOMG! offers a GUI for it.

I suspect that if I had used SVGO directly, I could have fined tuned my setting to obtain a good result, but right out of the box it gave me a good, not great, compression of 66KB, but as you can see, the shapes that I had flipped and rotated are pointing the wrong way.

Screenshot from SVGOMG

SVGOMG!: 66KB

Compressor

This online tool not only optimizes SVGs, but also PNGs, JPGs, and GIFs. This tool has no settings and offers no clues as to how the compression is achieved. I opened both files and compared them, and as far as I can tell, the only difference is that my decimal points got rounded up to 3 decimal points, but there must be something else I’m missing, since the SVG Editor rounded even further to 2 decimal points, yet it’s still bigger.

For me, this was the winner. It didn’t change the image quality, and the resulting size was 53KB. I could compress is even more, to 52KB, if I uglify it and remove all line breaks and extra white spaces.

Compressor result screenshot

Compressor: 53KB

Conclusion

I can only speculate as to why some tools work well for some, but not in this case. I’m not sure if they are too aggressive for my lazily created SVG, whether it’s the code generated by Sketch or some other reason.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">