Skip to main content

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 Gluee, a site with coupons & freebies for (web) developers, marketers & startupers.

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
    3. very Help Full Post. Look Some Different here at UPSC Exam

      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
    3. what is in oxycodone, what is oxycodone, how long does oxycodone stay in your system, what does oxycodone do, what is the difference between oxycontin and oxycodone, what does oxycodone look like, what is oxycodone used for, how long does oxycodone take to work, what is the difference between oxycodone and hydrocodone, which is stronger hydrocodone or oxycodone, how long does it take for oxycodone to work, what is the difference between hydrocodone and oxycodone, how long does oxycodone last, how long does oxycodone stay in urine, how long does oxycodone stay in your urine, how does oxycodone work, which is stronger oxycodone or hydrocodone, what is oxycodone hydrochloride, what is oxycodone acetaminophen 5 325 mg en español, how long does oxycodone stay in system, oxycodone what is, what oxycodone, what is the difference between oxycodone and oxycontin, what are oxycodone, what does oxycodone feel like, how long does it take to get addicted to oxycodone, how does oxycodone make you feel, how long does it take oxycodone to work, what is oxycodone acetaminophen 10 325 en español, how long does it take to get oxycodone out of your system, how much oxycodone is too much, how much oxycodone to overdose, what is oxycodone acetaminophen, how long does it take oxycodone to leave your system, what is oxycodone hcl, how long does it take for oxycodone to get out of your system, how long for oxycodone to work, how much is oxycodone, what is oxycodone for, how to get oxycodone, how long is oxycodone in your system, what does oxycodone do to you, what do oxycodone pills look like, how to make oxycodone, how is oxycodone made, what is the drug oxycodone used for, how long do oxycodone stay in your system, how long does oxycodone stay in your blood, what is stronger oxycodone or hydrocodone, how much oxycodone…. https://xanorpharmacy.com/

      CONTACT US

      Website…………….. https://xanorpharmacy.com/

      WHATSAPP ………… +1 (920) 430-0754

      PHONE: +1 (920) 430-0754

      SMS/TEXT:+1 424-275-6138

      email: danro741@gmail.com

      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
  8. SVG will take time to become popular. Once major browser start supporting this format SVG should take off as well.

    ReplyDelete
  9. We are a team of experts with decades of experience across a wide spectrum of Marketing and Communications, Advertising, Social Media, FMCG, Durables, Mobility, IT, Consultancy, Banking and not-for-profit Sectors.

    ReplyDelete
  10. This site is excellent and so is how the subject matter was explained. I also like some of the comments too. Waiting for the next post.Talk to Astrologer

    ReplyDelete
  11. Get best future predictions related to Marriage, love life, Career or Health over call, chat, query or report.best horoscope app

    ReplyDelete
  12. If you want to know about printer errors. Our technical experts are always available for your help. Give us a call on USA/Canada: (+1) 888-480-0288 & UK: + (44) 800-041-8324. Brother Printer UK

    ReplyDelete
  13. We provide a wide network of traffic sources with advanced analytic and bidding as well as tracking tools to simplify the use of our website.



    pay per click marketing services

    ReplyDelete

  14. Pain is a constant companion for humanity. There is nothing as useful and, at the same time, as dreaded as pain. It is an essential tool for our survival throughout our existence by teaching us to avoid poison, sharp objects, fire, and many other harmful things. It also performs the vital function of alerting the body about an injury. Though very useful, the feeling of pain is also very unpleasant, and based on the severity and how long it lasts, it can harm the quality of life of a person.


    Medication For Pain Management

    ReplyDelete
  15. Basically, you merely enter values inside white-background cells, to see what happens for the payment, total interest, outstanding balance, etc. canadian mortgage calculator Or enter your deposit percentage to calculate your deposit amount. mortgage calculator

    ReplyDelete
  16. Wonderful blog, thanks for sharing this type of information. Your website gives the best idea about my interesting information. Any issue related to Online acting classes you can visit the ICE-Balaji website.

    ReplyDelete
  17. There are a lot of Call Girls contact number in Shimla agencies scattered all over the grounds of this city. Call Girls in Shimla, it would be much easier to look for them online.Low budget Escorts in Agra Some websites are specially created to cater to the needs of those who are looking for escorts.Dating Call Girls in Faridabad If you are looking for an elite escort in Gurgaon who can enjoy parties with you,Dating Call Girls in Faridabad check all the fine and Air hostess Escorts in Gurgaon outgoing young ladies.

    ReplyDelete
  18. I think this is one of the most important pieces of information for me. Thanks a lot for posting..Turkey visa for US citizens online is easy and fast. you can fill your visa application form turkey & within 24 hour you can get your visa.

    ReplyDelete


  19. At Just Med USA, we are one of the leading suppliers of adderall

    in the industry. You can order Adderall online from us by simply adding it

    to the cart and proceeding to checkout.

    https://www.justmedusa.com/
    Email:pharmaus505@gmail.com
    Tel : +1 (206) 238-1596
    Wickr : chemishop

    ReplyDelete
  20. what is in oxycodone, what is oxycodone, how long does oxycodone stay in your system, what does oxycodone do, what is the difference between oxycontin and oxycodone, what does oxycodone look like, what is oxycodone used for, how long does oxycodone take to work, what is the difference between oxycodone and hydrocodone, which is stronger hydrocodone or oxycodone, how long does it take for oxycodone to work, what is the difference between hydrocodone and oxycodone, how long does oxycodone last, how long does oxycodone stay in urine, how long does oxycodone stay in your urine, how does oxycodone work, which is stronger oxycodone or hydrocodone, what is oxycodone hydrochloride, what is oxycodone acetaminophen 5 325 mg en español, how long does oxycodone stay in system, oxycodone what is, what oxycodone, what is the difference between oxycodone and oxycontin, what are oxycodone, what does oxycodone feel like, how long does it take to get addicted to oxycodone, how does oxycodone make you feel, how long does it take oxycodone to work, what is oxycodone acetaminophen 10 325 en español, how long does it take to get oxycodone out of your system, how much oxycodone is too much, how much oxycodone to overdose, what is oxycodone acetaminophen, how long does it take oxycodone to leave your system, what is oxycodone hcl, how long does it take for oxycodone to get out of your system, how long for oxycodone to work, how much is oxycodone, what is oxycodone for, how to get oxycodone, how long is oxycodone in your system, what does oxycodone do to you, what do oxycodone pills look like, how to make oxycodone, how is oxycodone made, what is the drug oxycodone used for, how long do oxycodone stay in your system, how long does oxycodone stay in your blood, what is stronger oxycodone or hydrocodone, how much oxycodone…. https://xanorpharmacy.com/

    CONTACT US

    Website…………….. https://xanorpharmacy.com/

    WHATSAPP ………… +1 (920) 430-0754

    PHONE: +1 (920) 430-0754

    SMS/TEXT:+1 424-275-6138

    email: danro741@gmail.com

    ReplyDelete
  21. casino games【WG】⚡️ no deposit bonus
    【 casino games】, 【 casino games】, starvegad 【 casinos】, , ,, ,,,,,, , ,,. 1.9.5.20 카지노 · ‎Free · ‎Android · 10bet ‎Sportsbook

    ReplyDelete
  22. Betway Archives - DRMCD
    › 2021/09/24 › betway › 양주 출장샵 2021/09/24 › betway BETWAY was one of the 보령 출장마사지 first betting 공주 출장샵 sites when it was launched. The casino, which was established in 1999, has an 강원도 출장안마 enormous gaming presence, and they 광명 출장샵 have an extensive

    ReplyDelete
  23. Casino in Atlanta is open to the general public
    Harrah's Cherokee Casino will open its doors for the public. The casino's 6,300 시흥 출장샵 square 안동 출장안마 foot gaming space features over 700 전라남도 출장마사지 slot Feb 23, 2022 청주 출장샵 - Feb 24, 2022Blackjack Pro: 평택 출장마사지 Harrah's Cherokee Casino, Cherokee Valley River

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete

Post a Comment