Monday, September 30, 2013

Why have SVG images not yet replaced PNG on the web?

For some time, all major browsers already support SVG. I am surprised, why almost every website still uses PNGs for their site's graphics (I mean logo, icons, etc...).

Reasons for switching to SVG

Perfect display - Because SVG is a vector format, the SVGs images are always rendered sharp, regardless on display resolution. For example, they looks good in iPad hi-res displays. PNG images are blurry on such hi-res displays, if you want better results, you need to supply them in higher resolution, which is not a perfect solution (you need to maintain multiple PNG sizes for multiple devices).

Programability - it is possible to manipulate with parts of SVG in JavaScript, handle events such as onmouseover etc.., see the SVG.JS library.

But why people are staying with PNG?

Compatibility - as PNGs are just plain bitmaps, there is much higher chance they will display properly on various devices. Also, couple of months ago (April 2013), I encountered an Android phone, that could not display the SVG on a webpage, though Chrome for Android should support it (according to the link above).

Performance - SVG is more complicated, probably to takes more system resources to render more complicated image.

No hype - when there HTML5 anc CCS3 was new, there was much discussion how it should be implemented, etc, so people started to use it, just to show off how they are progressive. On the other hand, SVG spec is here already for several years. When the SVG spec was complete, then it was not possible to use it - major browsers did not support it. And nowadays, when you could use it, no one talks about it.

So I would like to start discussion:
Why SVG did not replace PNG yet? 
Do you know any sites that use the SVG?
Are you planning to use SVG on your websites?

Check out discussion for this article on Hacker News, that's the most interesting part.

Also check out Jungle Navigator, my guide to new domain extesions, so called generic top-level domains.