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...).
Programability - it is possible to manipulate with parts of SVG in JavaScript, handle events such as onmouseover etc.., see the SVG.JS library.
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.
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.
I'm using SVG in an open-source project to display diagrams of biological processes; https://github.com/wikipathways/pathvisio.js/
ReplyDeleteI hope it gets more traction once IE8 and Android 2.X die off.
Also take a look at the discussion forming on HN
ReplyDeletehttps://news.ycombinator.com/item?id=6470908
Thanks, I know, I sumbitted it there, "seky" is my nickname there (from Sekera).
Delete> Perfect display
ReplyDeleteNope, 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.
OK, agree, "perfect" was not a perfect word.
DeleteYes, I meant the scallability
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.
Deletevery Help Full Post. Look Some Different here at UPSC Exam
DeleteOne 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.
ReplyDelete(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.
What kind of poverty ass internet connection are you using where you are seeing images load line by line
Delete+1 for "poverty-ass Internet connection"
Delete(and I fixed that for you)
For whatever reason, Firefox does not render scaled SVGs.
ReplyDeleteWhat 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.
ReplyDeletethe 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.
ReplyDeleteI also use SVG for some diagrams etc (Inkscape!)
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
DeleteMy 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.
DeleteSVG will take time to become popular. Once major browser start supporting this format SVG should take off as well.
ReplyDeleteThe laptop will let you know whether you’ve won, and the way a lot. Online roulette simulates the action of a 1xbet korea ball coming to cease in an actual spinning wheel. However, the end result} is governed totally by a random number generator. In terms of gameplay and payouts, there are few variations between land-based roulette and on-line roulette. Caesars on line casino is a legendary brand that has repeatedly appeared in Hollywood movies. As such, it is no marvel gamers can discover massive collection of slots and table video games.
ReplyDelete