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.
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?
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?
There's a challenge for you 😊
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.