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

SVG is cool (how FakeRainBrigand nicely described) and renders beautifully but can be pretty complex. A browser has more work to do when dealing with vector data instead of pixel based images. An image is one element, a SVG may have lots of children that can even be added to the DOM when used inline.

I did not do any valuable performance tests but from a logical point of view SVG should be used carefully when it comes to performance especially when dealing with middle aged mobile browsers (CPU-stress). Would be very useful to have a chart where you can see the CPU power consumed by 100 SVG images vs 100 PNG images on different Android and IOS devices ...

Another bugging thing with SVG is that the Tag needs a width and height attribute for some Android/Samsung whatever browsers and our good old IE. And most modern SVG Editors like A***e Illustrator just add the "viewBox" attribute.

The coolest thing about SVG is that it renders nice and crisp in any pixel density.