SVG icons vs. PNG icons in modern web sites

Question

I\'m wondering why so few modern web sites still use only PNGs for icons (but this assumption is just based my observation). So far I know, main reasons for using PNGs over SVGs

Answer 1

Unless you are showing very simple shapes/designs or specifically need to modify parts of the graphic with the app, there is not a whole lot of incentive to use SVG. You can produce a PNG at twice the original size (for retina displays) and still have the filesize be an order of magnitude smaller - not to mention better coverage for legacy browsers (no need for javascript or polyfills).

I say this as someone who builds UIs with vector graphics. It's an awesome design tool, but for delivery/bandwidth/reach it's hard to top PNG. Just last night I tested out a well known logo. CocaCola.svg was almost 20K. Since it was a solid/flat color I exported as PNG-8 with 12-color palette compression and got it down to 1.6K (!!!) For just a few logos it's not a big deal, but when you have to show 40 of them.. well, you get the picture.

The best part is that you can turn a PNG into a base64 data uri and embed them right in your stylesheet. This is not recommended with SVG - a format which is already famous for performance and compatibility issues, especially on mobile browsers.

In closing I have to say there are strengths and use cases for both, but PNG has blazed a lot more trails and you face less resistance when you go with the current. For those odd cases where SVG does make a better fit, I highly recommend this article and this learning resource

Happy Designing!