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: 65KB
No optimization
Exporting directly from Sketch gave me an 89KB SVG file.
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:
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 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.
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: 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.