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.

14 comments :

  1. I'm using SVG in an open-source project to display diagrams of biological processes; https://github.com/wikipathways/pathvisio.js/

    I hope it gets more traction once IE8 and Android 2.X die off.

    ReplyDelete
  2. Also take a look at the discussion forming on HN

    https://news.ycombinator.com/item?id=6470908

    ReplyDelete
    Replies
    1. Thanks, I know, I sumbitted it there, "seky" is my nickname there (from Sekera).

      Delete
  3. > Perfect display
    Nope, far from that. It's better than nothing, but not "perfect" in any meaningful way. Especially not pixel-perfect, which is a must for icons and fonts at small sizes.
    Also, gradients. Make one in Photoshop, make another in SVG, compare, burst in bloody tears when you see how horrid SVG gradients look. Scalable, yes, but perfect, not at all. (Especially fugly are contrasting colors, try black to white.)
    That's basically the reason why people en masse don't use it. PNG just looks better.

    ReplyDelete
    Replies
    1. OK, agree, "perfect" was not a perfect word.

      Yes, I meant the scallability

      Delete
    2. Can you give an example of a gradient in SVG that looks "horrid"? As a longtime SVG user, I've run into plenty of issues with SVG, but I can't recall any with gradients.

      Delete
  4. One downside of SVG is that lacks incremental display, at least in any useful sense. When I'm loading a website with PNGs (or JPEGs, or whatever), I'll see the top of the image appear, and then the middle, and then the bottom. Each image is its own "progress bar", which is pretty nice.

    (Not all bitmaps are this nice. The Windows BMP format loads bottom-to-top, for some reason. Some JPEGs, mostly old ones, are "progressive" or interlaced, and load lines out of order, so it's hard to tell when it's finished.)

    SVGs do have a kind of progressive display, in that many implementations draw objects as they're read, more or less, but you can't use this to determine how far along it is. The order of objects in the file doesn't correspond at all to their position on screen, or their quantity. You just have to wait until it doesn't draw anything new for a while, and then you assume it's finished.

    I'll still use SVGs myself, but I'm careful not to dump a bunch of objects in one file, unless I'm also prepared to load it asynchronously and show my own progress indicator.

    ReplyDelete
    Replies
    1. What kind of poverty ass internet connection are you using where you are seeing images load line by line

      Delete
    2. +1 for "poverty-ass Internet connection"

      (and I fixed that for you)

      Delete
  5. For whatever reason, Firefox does not render scaled SVGs.

    ReplyDelete
  6. What the fuuuck?? SVG vs PNG is like Batman vs Superman. Their role is different (like apples and bannanas). Starting a discussion of this is the same as talking about Ben Affleck.

    ReplyDelete
  7. the comparison looks strange to me - I would use PNG for, well images, and SVG for some dynamic diagrams that I need to change in runtime etc.

    I also use SVG for some diagrams etc (Inkscape!)

    ReplyDelete
    Replies
    1. You can use PNG for a logo, and website icons for example (and they will look better than PNGs on high resolution devices), that's what the whole article is about

      Delete
    2. My instinct would be to consider using svg for things I use gifs for at the moment. I don't think it'll ever match the fine colour gradations of a jpg or png; nor should it really.

      Delete