How, and why, to clean SVG markup

Adam McKenna on October 24, 2017

Despite the introduction of the Scalable Vector Graphic (SVG) format almost 20 years ago, the popularity and understanding of the format amongst th... [Read Full]
markdown guide

I worked on one project where someone decided SVG was too complicated and converted them all to PNG files.

Guess what happened when the application was on anything other than 100% scale? That's right... it looked like @$$.

All that fine SVG converted into sad bitmaps. And not just bitmaps... bitmaps for all the different states. Which could easily have been done with SVG w/CSS.

Sad panda.


In some cases, you can do even more optimization by hand: some exports I received from our designers had base64-encoded jpeg-blurs and -shadows in them. So I handcoded a blur and a shadow filter and used them on parts of the design, bringing down a 30kb SVG (that was supposed to replace a 50kb PNG) to 7.5kb.

As a front-end developers, SVG is the bridge between development and design; thus to unleash it's full potential, you need a designer and a developer. Tools will only bring you so far.


Nice article, i was looking for the title issue i had with icons in an Electron app. I "fixed" by manually deleting the title tag. But there must be a better way. I mean who is going to do such work if you have perhaps more than 100 ions in a project?


Thanks 😊

In that case, you can use an SVG minifier!


Great read, had to write a wiki page similar to this for my team. Link for Chris Coyer video?


Thanks! I've added that link in there now, and a few others I was missing :)


Maybe build an optmisier that applies just the here described rules?

code of conduct - report abuse