Why have SVG images not yet replaced PNG on the web?(blog.sekera.cz)
blog.sekera.cz
Why have SVG images not yet replaced PNG on the web?
http://blog.sekera.cz/2013/09/why-svg-images-did-not-replace-png.html
34 comments
Isn't that also because rendering SVG on screen is way, way slower than using PNG or JPG images? There was a comparison done half a year ago between the same page full of icons rendered using PNG vs SVG and the SVG version was sluggish as hell. And that was on desktop, you can only imagine how worse would the performance be on mobile devices...
Hmm... on a completely unrelated note, I may have just figured out how to convince the world that 5GHz processors and oodles of RAM are necessary in phones, thus keeping them on that upgrade treadmill...
And why we need double retina screen resolutions to tell the difference between vector and bitmap graphics on a 4 inch screen.
I imagine that is mostly due to the lack of attention to the format. PDFs with vector graphics work very well both in my desktop computer and mobile phone. The iPhone can even preview Adobe Illustrator files very well. Granted, it could cache the renderization since the image is not dynamic as a webpage.
By the way, are vector files hardware accelerated on mobile devices, usually ?
Was this test with openvg?
http://en.wikipedia.org/wiki/OpenVG
http://en.wikipedia.org/wiki/OpenVG
> we won't see another full release until SVG 2 which is expected in 2014, over a decade later!
HTML4: 1998
HTML5: 2014
HTML4: 1998
HTML5: 2014
The big difference is HTML was in widespread use already in 1998. Delaying the next version update when your standard isn't very popular is not a recipe for success.
More like:
HTML4: 1998
XHTML: 2000
HTML5: 2014
Also, I blame IE 6.
HTML4: 1998
XHTML: 2000
HTML5: 2014
Also, I blame IE 6.
Doesnt really compare
A vector format is insufficient to make an image look good at all resolutions. Without hinting, lines are not aligned to pixels, making them blurry.
We have solved this problem with fonts, but it is extremely complex, both for the artist and for the rendering code.
We have solved this problem with fonts, but it is extremely complex, both for the artist and for the rendering code.
Optimizing for hinting has been rendered pointless by the fact that people zoom around on mobile devices.
You can no longer expect bitmap pixels to map to device pixels in any reasonable way. (Heck, just turn your desktop browser zoom to 90% or 110%.)
There was a time for hinting, but it's long gone.
You can no longer expect bitmap pixels to map to device pixels in any reasonable way. (Heck, just turn your desktop browser zoom to 90% or 110%.)
There was a time for hinting, but it's long gone.
I don't understand what exactly zooming has to do with hinting. Fonts use hinting to great effect, and they're specifically designed to be displayed at different sizes and resolutions.
Hinting makes all vector drawings (including fonts) look better; but zooming means that bitmaps don't have an advantage, since a PNG will be no better than an unhinted SVG.
That's not true at all. Firstly, any PNG would have a limited resolution, requiring massive file sizes to be indistinguishable from an SVG. Secondly, browsers don't scale bitmaps with perfectly alias-free filtering, which means you get artifacts when scaling down and blurryness when scaling up.
Not to say, if you (easily on such devices) zoom to max zoom on a hi-res display, the resulting image is 8times zoomed in comparison to normal desktop PC image. And for same quality (sharpness), you wouldn't only need 8times larger PNG for this, but 8x8=64times larger PNG.
PNGs will not scale with pixel count, especially for rendered vector art. The memory footprint will scale though.
As an experiment, I took two vector art files I had, one very simple (a flat icon design) and the other very complex (a texture for a 3d model with lots of drop shadows and non-linear gradients).
The SVGs in question were 6kB and 568kB in size, respectively.
At 25% size (around 256x256px) the PNGs were 13kB and 30kB respectively.
At 100% size (around 1024x1024px) they were 60kB and 266kB respectively.
I scaled the complex image to 200% (2048x2048) just out of curiosity, and it became 841kB, roughly 28x the size of the smallest, which uses 1/64 as many pixels. It is interesting that the complex image seems to approach size growing with area at the high end of resolution. Of course, this is a sample of 2.
The SVGs in question were 6kB and 568kB in size, respectively.
At 25% size (around 256x256px) the PNGs were 13kB and 30kB respectively.
At 100% size (around 1024x1024px) they were 60kB and 266kB respectively.
I scaled the complex image to 200% (2048x2048) just out of curiosity, and it became 841kB, roughly 28x the size of the smallest, which uses 1/64 as many pixels. It is interesting that the complex image seems to approach size growing with area at the high end of resolution. Of course, this is a sample of 2.
I meant, if you need perfect sharpness for the zoomed image, you need to supply bigger PNGs, otherwise they're blurred
Tloewald is saying that if you save vector art at an 8x scale PNG, it will not be 64 times larger. Most pixels in vector art are in contiguous blocks of either solid colors or linear gradients. After prefiltering, both cases reduce to a single value followed by a run of zeroes, which DEFLATE will compress extremely well.
So the only size increase really comes from the edges. In practice, this means that an 8x size increase will often only increase the file size by around 10x.
So the only size increase really comes from the edges. In practice, this means that an 8x size increase will often only increase the file size by around 10x.
Modded down for making accurate statements? Awesome.
Except we have the reverse problem with raster images now that we have devices with vastly different DPI. An iPad 3 has like 4X the DPI of a 30" screen. If you want them to be displayed at a reasonable size on both devices? You've got a problem.
If we start seeing 4K screens, worrying about those blurry anti-aliasing lines is going to seem absurd.
If we start seeing 4K screens, worrying about those blurry anti-aliasing lines is going to seem absurd.
So the question is whether to (1) make the experience worse for people with high-DPI devices, (2) make the experience worse for everyone, or (3) make one bitmap for one market and another, larger bitmap for the other market. I'd imagine that most web projects have a vast majority of users on "normal" DPIs, so the best options would be (2) or (3).
I have several screens in this DPI range. Actually, at 4k 30", your phone is probably in this range.
Use your phone to contrast AA to non-AA. The difference is still pretty enormous in my opinion.
Use your phone to contrast AA to non-AA. The difference is still pretty enormous in my opinion.
A generation ago, paper had the kind of resolution that screens do now, and all the problems mentioned in this thread came up when books were printed. This made them problems for Donald Knuth. He tackled them with his usual genius, and the result, MetaFont, has been free software ever since. I've always thought a time would come to embed it in web browsers; it sounds like now might be that time.
This is true, but it's still much better than pixelated blur or aliasing. Also, most of the time you have the same problem when authoring a bitmap with vector tools too, unless you very carefully target a specific output resolution. If you really need pixel precision you can always use bitmaps, but vector is perfectly fine in many/most cases.
I wonder though - would it be possible to apply hinting to svg with javascript?
I wonder though - would it be possible to apply hinting to svg with javascript?
Retina displays are removing the need to worry about this. When pixels are invisible, hinting problems are invisible too.
They don't, hinting is also about removing details which you can't do in SVG.
When people provide icons in many physical sizes, the icons generally aren't mere scaling up and down, because even if you can hint so the lines themselves don't blur the details will get so small the whole icon becomes a mess. Apple even has a note on this in their HIG:
> If an icon’s content or shape is overly complex, the details can become confusing and may appear blurry at smaller sizes.
note that this is not about logical size and retina displays, it's about physical size and the viewer's eye's power of resolution.
When people provide icons in many physical sizes, the icons generally aren't mere scaling up and down, because even if you can hint so the lines themselves don't blur the details will get so small the whole icon becomes a mess. Apple even has a note on this in their HIG:
> If an icon’s content or shape is overly complex, the details can become confusing and may appear blurry at smaller sizes.
note that this is not about logical size and retina displays, it's about physical size and the viewer's eye's power of resolution.
Well, you also can't do that in PNG format.
Plus, couldn't you have multiple layers of SVG, and have the javascript respond by hiding/showing detail layers? SVG is more javascript-friendly than PNG so there's opportunity to have one SVG that gets tweaked by your js instead of multiple raster files.
SVG is more javascript-friendly than PNG
That sounds more like a problem than a solution to me.
That sounds more like a problem than a solution to me.
Correct. But PNG works and is widely deployed today. Considering SVG fails at one of the primary use cases where it could have an edge over PNG, it's no surprise few care for it.
You can create an SVG where certain elements are hidden when rendered below a particular size using embedded JavaScript. It would be a pain in the ass because it would have to be done by hand, but you could do it. It's a problem with the tools we use to create SVGs, not the capabilities of the format.
Hmm, could it be done via CSS?
Now that you mention it, you can do it with CSS media queries, like so (but with shape and path elements rather than image elements):
https://github.com/estelle/clowncar
https://github.com/estelle/clowncar
You may not be able to make it look good at all resolutions, but it's often adequate to make it look good at some minimum and anything above. You can do that without hinting.
Not entirely true. A lot of times resolutions are just double the normal one, so the SVG image scales perfectly and looks good.
I have written my prev reply before I've seen yours.
Yes, if its mostly double-sized resolution then blurring shouldnt be a prob,
And when it is some strange "1.something" or "2.something" resolution, then probably also PNGs will look blurred, unles you dont supply exact special PNGs for such resolutions
Yes, if its mostly double-sized resolution then blurring shouldnt be a prob,
And when it is some strange "1.something" or "2.something" resolution, then probably also PNGs will look blurred, unles you dont supply exact special PNGs for such resolutions
Assuming it was hinted to the intended resolution. But that's still an extra step.
I've never had a problem with hinting, why does everybody consider it so difficult?
For 1px lines the only thing you have to remember is to put the points on half-pixels (annoying, but you can just wrap a <g transform='translate(0.5 0.5)> around your drawing if needed. The other thing would be shape-rendering='crispEdges' which also helps, but not everywhere.
Which you can't have in SVG since the format (IIRC) does not support any hinting. So it's down to luck, and the width of your lines.
Well, SVG's default coordinate space is defined in terms of CSS pixels, which explicitly allow for rounding to match (a multiple of) the device pixel size. So, if you align things to SVG pixels, they'll likely come out rounded to device pixels.
Also, basic hinting is not terribly difficult for the artist with modern font design tools. Similar tools could be provided for SVG hinting. Also, auto-hinting works pretty well. I have often wondered why there has been no effort to do the same thing with SVG renderers. At the very least, they could be rendered at 2X and then downsampled with a lanczos filter. The effect is not the same, but it's far from orthogonal.
But is hinting even possible in a format that supports multiple colors? It does not seem obvious to me that it is.
But is hinting even possible in a format that supports multiple colors? It does not seem obvious to me that it is.
I see, it is an interesting point, thanks.
For me, that would be one of the main reasons against SVG
For me, that would be one of the main reasons against SVG
Except that all other image formats suffer the exact same problem. Some filters may be better tuned for different image types but there's no good, generic solution. Avoiding SVG doesn't solve this at all.
I use SVG a lot and I'd say the reasons are:
* Browser support is still new and in places still a little rough
* IE support has only recently arrived
* SVG creation tools are either rough or expensive
* SVG can create sub-Flash-like performance if used carelessly
* SVG has no detail optimisation (or detail hinting)
I think we're about to see SVG usage pick-up steam now that IE has support and retina displays are becoming commonplace. Hopefully we'll get the tools and performance we deserve.
I'm very hopeful for SVG in the next 18 months.
* Browser support is still new and in places still a little rough
* IE support has only recently arrived
* SVG creation tools are either rough or expensive
* SVG can create sub-Flash-like performance if used carelessly
* SVG has no detail optimisation (or detail hinting)
I think we're about to see SVG usage pick-up steam now that IE has support and retina displays are becoming commonplace. Hopefully we'll get the tools and performance we deserve.
I'm very hopeful for SVG in the next 18 months.
SVG can create sub-Flash-like performance if used carelessly
Perfect. You just know that it will be used carelessly, too. Some of my low-powered devices are already stumbling under the concept of a "modern" website (which seems to revolve mainly around using as much js as can possibly fit onscreen), I'm not looking forward to widespread adoption of this next piece of "progress".
Perfect. You just know that it will be used carelessly, too. Some of my low-powered devices are already stumbling under the concept of a "modern" website (which seems to revolve mainly around using as much js as can possibly fit onscreen), I'm not looking forward to widespread adoption of this next piece of "progress".
Last I tried to use an SVG workflow during a stint working for Wikipedia's Map Workshop three years ago, Inkscape broke in subtle ways every other map it had to open, and Illustrator had near-zero chance of successfully rendering an SVG map created somewhere else even moderately close to the desired appearance, and only 75% chance of correctly rendering an SVG map exported from itself five seconds earlier. They both have some ugly filesize bloat in the way they handle styles.
On top of this was Wikipedia's use of an SVG->PNG renderer that is openly acknowledged to render worse than its competitors (which were not great), for better performance.
Until there's a reference implementation of SVG... a real spec with an exhaustive ACID-style test on every single feature... I won't revisit trying to work in it.
On top of this was Wikipedia's use of an SVG->PNG renderer that is openly acknowledged to render worse than its competitors (which were not great), for better performance.
Until there's a reference implementation of SVG... a real spec with an exhaustive ACID-style test on every single feature... I won't revisit trying to work in it.
Also PNG file size is typically smaller than SVG size unless you are literally drawing Bezier curves.
[Not trolling, genuinely interested in the answer]
> * SVG can creat sub-Flash-like performance if used carelessly
Could you elaborate on that? What should I be aware of if exporting vector art from, say, Illustrator or Inkscape?
> * SVG can creat sub-Flash-like performance if used carelessly
Could you elaborate on that? What should I be aware of if exporting vector art from, say, Illustrator or Inkscape?
From Inkscape? Little, as SVG is its native format and thus Inkscape's feature set aligns nicely with the capabilities of the format (if used carefully, e.g. using clones instead of copies for identical shapes, etc.). Illustrator, however, will export more or less with a minimum SVG feature set used and for complex drawings that may end up fairly large and fairly inefficient.
Drop shadows and filters in general are a concern. Not so much on desktop browsers nowadays, but in mobile very much.
Drop shadows and filters in general are a concern. Not so much on desktop browsers nowadays, but in mobile very much.
iOS performance is generally awful with SVG. Scrolling used to be bad but I think Webkit fixed that bug.
Too much detail has been the cause of the worst performance (and crashing) I've seen — one image of a playing card froze my iPad.
http://code.google.com/p/vectorized-playing-cards/
try this guy: http://www.totalnonsense.com/misc_images/Jack_of_Spades_vect...
Blurs can be slow on large images.
Drawing Big SVGs can be problematic too.
Too much detail has been the cause of the worst performance (and crashing) I've seen — one image of a playing card froze my iPad.
http://code.google.com/p/vectorized-playing-cards/
try this guy: http://www.totalnonsense.com/misc_images/Jack_of_Spades_vect...
Blurs can be slow on large images.
Drawing Big SVGs can be problematic too.
Just open any SVG map from Wikipedia at full resolution... Guaranteed browser hang.
I guess Wikipedia's approach is a fairly good one here: Use SVG behind the scenes and generate PNGs for the articles themselves in the necessary sizes. Fast display of PNGs (also for complex imagery they tend to be smaller, but that's often just because Inkscape's default SVGs are horribly bloated¹) and the vector image for easy changes and printing.
That being said, back then I struggled fairly often with annoying bugs in Wikimedia's backend renderer rsvg. It got better over time but back then browser support was also very spotty. By now SVG is still my favorite vector format to use, mainly because it's trivial to write scripts around (it's just XML after all) and converting to PNG if you need it (or whatever else is needed) is trivial.²
So generally I'd say SVG is very much not dead, it's just rarely used directly on the web, except for interactive things where hit-testing arbitrary shapes is important.
____
¹ I used to vectorize a few (around 200–300, I think) flags on Wikimedia Commons and for simple shapes I concentrated on it was usually a difference of 350 bytes vs. 2–3 KiB. I wrote my code by hand for the most part, utilizing a few templates for common flag formats (n horizontal or vertical stripes, checkerboard, etc.) and small scripts for the more annoying things to write by hand, like wavy lines.
² Current use case from today: action bar icons on Android. When creating them in Eclipse from an image it only generates enabled, not disabled icons and I have to remember what padding I used and select the correct theme. After two or three changes in the source images (which were SVG anyway) it was enough and I just wrote a tiny script to generate them. Another use case were the images in my final thesis which I kept in SVG because back then I wasn't sure yet whether to use Word (needs EMF) or LaTeX (needs PDF) for writing. The fact that I needed Graphviz a lot which outputs nice, clean SVG also helped.
That being said, back then I struggled fairly often with annoying bugs in Wikimedia's backend renderer rsvg. It got better over time but back then browser support was also very spotty. By now SVG is still my favorite vector format to use, mainly because it's trivial to write scripts around (it's just XML after all) and converting to PNG if you need it (or whatever else is needed) is trivial.²
So generally I'd say SVG is very much not dead, it's just rarely used directly on the web, except for interactive things where hit-testing arbitrary shapes is important.
____
¹ I used to vectorize a few (around 200–300, I think) flags on Wikimedia Commons and for simple shapes I concentrated on it was usually a difference of 350 bytes vs. 2–3 KiB. I wrote my code by hand for the most part, utilizing a few templates for common flag formats (n horizontal or vertical stripes, checkerboard, etc.) and small scripts for the more annoying things to write by hand, like wavy lines.
² Current use case from today: action bar icons on Android. When creating them in Eclipse from an image it only generates enabled, not disabled icons and I have to remember what padding I used and select the correct theme. After two or three changes in the source images (which were SVG anyway) it was enough and I just wrote a tiny script to generate them. Another use case were the images in my final thesis which I kept in SVG because back then I wasn't sure yet whether to use Word (needs EMF) or LaTeX (needs PDF) for writing. The fact that I needed Graphviz a lot which outputs nice, clean SVG also helped.
Re: the author's experience with Android: Android 2.x doesn't support SVG. It makes up 33% of the devices that visit the Google Play store
http://caniuse.com/#cats=SVG
http://developer.android.com/about/dashboards/index.html
http://caniuse.com/#cats=SVG
http://developer.android.com/about/dashboards/index.html
True. Android is the new IE when it comes to supporting features like this. Strange since Google pushes HTML 5 so much.
Because parsing XML can become a bottomless pit of nightmares and sorrow. Unholy floating point calculations that make Baby Jesus cry.
Meanwhile, pixel rasters are a finite array of bytes, confined to specific dimensions and resolutions. Plain old integers in 24 bit color with an 8 bit transparency channel.
And, specifically with respect to PNG, those pixel values are compressed row-by-row, using the DEFLATE algorithm.
Meanwhile, pixel rasters are a finite array of bytes, confined to specific dimensions and resolutions. Plain old integers in 24 bit color with an 8 bit transparency channel.
And, specifically with respect to PNG, those pixel values are compressed row-by-row, using the DEFLATE algorithm.
I'm surprised file size hasn't been mentioned as a mother major reason.
With tools like ImageOptim, and ImageAlpha, you can make PNGs INSANELY small with 0 or an imperceptible loss in quality.
For example, PNGs do insanely well when you have few numbers of colors that are repeating often. I've had had images that were 640px by 960px (pixel style art) that compressed down to sub 3kb with no quality loss. Good luck getting that with an SVG.
(Yes, there are certain types of images that PNGs are a terrible solution for, however, really, what I mean here is, right tool for the job.)
With tools like ImageOptim, and ImageAlpha, you can make PNGs INSANELY small with 0 or an imperceptible loss in quality.
For example, PNGs do insanely well when you have few numbers of colors that are repeating often. I've had had images that were 640px by 960px (pixel style art) that compressed down to sub 3kb with no quality loss. Good luck getting that with an SVG.
(Yes, there are certain types of images that PNGs are a terrible solution for, however, really, what I mean here is, right tool for the job.)
Answer: because there are plenty of things you simply can't express in SVG with its current level of support across browsers.
e.g. no blend mode except "normal" really works reliably across browsers yet. And just a reminder: it's 2013, everyone.
Next question...
e.g. no blend mode except "normal" really works reliably across browsers yet. And just a reminder: it's 2013, everyone.
Next question...
Well, many websites uses simple graphics, simple logos...
It's 2013 - yes, and nowadays simple, flat, design is modern, rather than graphics with a lot of effects, that was modern in the past, IMHO.
But I agree with your argument regarding to something is not properly - yes, that can be the reason why people don't see the whole thing as reliable
But I agree with your argument regarding to something is not properly - yes, that can be the reason why people don't see the whole thing as reliable
Pretty much exactly this-- advanced stuff only express-able in Bitmap format (such as photos, complex patterns, blending modes, etc) cannot be represented in SVG. That is, unless you use a Bitmap embedded in the SVG, but then what's the point? It's just simpler to use a bitmap format right now.
no blend mode except "normal" really works reliably across browsers yet
Compared to what? What alternative does reliably have blend?
Compared to what? What alternative does reliably have blend?
There isn't one (except I'm sure someone's going to pop up here and say flash).
So the only alternative is something that's been pre-composited down to pixels for you, probably in a png.
So the only alternative is something that's been pre-composited down to pixels for you, probably in a png.
The responses here (so far) are mostly pointing out why SVG is not suitable for all situations. There are many images where
- SVG will be smaller than a bitmap
- The sub-pixel rendering isn't really an issue (do you check that all the lines are aligned on pixels when you export something from illustrator?)
- No advanced/poorly supported features are necessary
Platform support is still a stumbling block, but that will get better. I seriously considered going svg-only for the vector-friendly illustrations in the new edition of http://eloquentjavascript.net . But in order to not screw over people on old devices, I will probably use svg with png fallbacks instead.
- SVG will be smaller than a bitmap
- The sub-pixel rendering isn't really an issue (do you check that all the lines are aligned on pixels when you export something from illustrator?)
- No advanced/poorly supported features are necessary
Platform support is still a stumbling block, but that will get better. I seriously considered going svg-only for the vector-friendly illustrations in the new edition of http://eloquentjavascript.net . But in order to not screw over people on old devices, I will probably use svg with png fallbacks instead.
I think SVGs have failed so far on the web because of a sort of "paradox of choice": As soon as you use SVG images, you'll be tempted to make them do things you can't do with PNGs, but you still end up in a world of hurt if you attempt to do this.
Chiefly among these new features are (1) inlining directly into html (2) making them interactive via javascript.
Both #1 and #2 are possible in theory, but in my experience these features are very painful practice... both of these are still very buggy. That's the problem with SVGs: Most of the new "options" they open up are still not ready for prime time.
Chiefly among these new features are (1) inlining directly into html (2) making them interactive via javascript.
Both #1 and #2 are possible in theory, but in my experience these features are very painful practice... both of these are still very buggy. That's the problem with SVGs: Most of the new "options" they open up are still not ready for prime time.
Most of the new "options" they open up are still not ready for prime time.
I had an article in MSDN Magazine promoting SVG graphics 10 friggin' years ago, and it made use of inline SVG and JavaScript animations, to fantastic effect. Since then I've used SVG in countless places, with very little downside. The major problem are some laggard browsers, but if you have a supporting browser neither inlining and script are a problem whatsoever.
SVG is one of those technologies where many (such as myself) overestimated the short-term impact, and under-estimated the long term impact. As a technology it was usable and enormously powerful in some situations ten years ago, but it is really just starting to gain serious inertia.
I had an article in MSDN Magazine promoting SVG graphics 10 friggin' years ago, and it made use of inline SVG and JavaScript animations, to fantastic effect. Since then I've used SVG in countless places, with very little downside. The major problem are some laggard browsers, but if you have a supporting browser neither inlining and script are a problem whatsoever.
SVG is one of those technologies where many (such as myself) overestimated the short-term impact, and under-estimated the long term impact. As a technology it was usable and enormously powerful in some situations ten years ago, but it is really just starting to gain serious inertia.
I would say the main reason is because there's not a 'Save As SVG' in photoshop. Most non tech people haven't heard of SVG and by the time they have, they already have a process for making images and the switch doesn't have enough apparent value on the surface.
Also, illustrator sucks.
Illustrator is an absolutely fantastic tool for print production and design. It is not a suitable tool for SVG, hasn't been for many versions (if it ever was).
Adobe's forgotten, unpromoted, and now discontinued fireworks is their actual svg art tool. Apparently illustrator isn't meant to illustrate.
Exporting a bitmap is easy, and will always look correct when rendered.
Exporting SVG is difficult, requires specific tools, and is gonna render differently depending on the browser.
SVG solved a problem exactly no one had.
Exporting SVG is difficult, requires specific tools, and is gonna render differently depending on the browser.
SVG solved a problem exactly no one had.
SVG solved a problem essentially everyone will have: pixel density.
Except it failed to solve the related problem which everybody already has: eye resolution.
If you know the physical pixel density, SVG image can maintain its physical size on different devices. Now try to do that with PNG...
I think PNG and SVG inherently solve somewhat different problems in the realm of image representation, so there are going to be cases where each of them has the clear upper hand. However, with pixel density going up and file sizes and network bandwidth not being the limiting factors in many cases, I'd guess SVG will command increasingly bigger share of uses.
I think PNG and SVG inherently solve somewhat different problems in the realm of image representation, so there are going to be cases where each of them has the clear upper hand. However, with pixel density going up and file sizes and network bandwidth not being the limiting factors in many cases, I'd guess SVG will command increasingly bigger share of uses.
You'd be dead wrong.
SVG has been out for awhile, long before Retina design became a part of the web development workflow, and yet, when faced with the challenge, most web shops didn't swap to an SVG workflow.
They just designed everything at twice the resolution.
Even Apple, who was leading the way for a hot second there on HDPI and vector assets, has swapped to mostly using 2x image assets.
The whole "will we swap to vectors?" debate already happened.
SVG has been out for awhile, long before Retina design became a part of the web development workflow, and yet, when faced with the challenge, most web shops didn't swap to an SVG workflow.
They just designed everything at twice the resolution.
Even Apple, who was leading the way for a hot second there on HDPI and vector assets, has swapped to mostly using 2x image assets.
The whole "will we swap to vectors?" debate already happened.
1) Different browsers can render SVG pretty differently, especially where two regions are within a pixel of one another. If you have a blue rect next to a red rect with a yellow background, some browsers will render the middle line purple, some green, some orange, and some brown.
2) Pixel choices by vector renderers are generally dramatically worse than a human artist's choices. We don't want accuracy, we want perceptual emphasis. Look at NES Mario in your head, then look at the blur you'd get if you took a modern hi-res Mario and vector rendered it at that size. For icons, this can be murder.
3) IE <= 8 is still a pretty significant chunk of your viewers.
4) There's a lot of knowledge built up around how to work with pixel images, especially when sprite sheeting for performance. Much of that knowledge needs to be re-learned for vector. Even when it's a good idea, many developers feel they don't have the time for a knowledge overhaul.
5) A big chunk of the web is legacy sites. This is why you still see javascript in html comments, or the occasional isindex. They aren't getting updated, pretty much ever.
6) For visually complex sites, SVG can still drag on budget and older mobile devices.
7) Older android had SVG turned off in Chrome.
8) It's a lot harder to get vector artists than pixel artists; it's a lot harder for artists to give developers SVG than pixel images.
9) Because it isn't trendy yet.
2) Pixel choices by vector renderers are generally dramatically worse than a human artist's choices. We don't want accuracy, we want perceptual emphasis. Look at NES Mario in your head, then look at the blur you'd get if you took a modern hi-res Mario and vector rendered it at that size. For icons, this can be murder.
3) IE <= 8 is still a pretty significant chunk of your viewers.
4) There's a lot of knowledge built up around how to work with pixel images, especially when sprite sheeting for performance. Much of that knowledge needs to be re-learned for vector. Even when it's a good idea, many developers feel they don't have the time for a knowledge overhaul.
5) A big chunk of the web is legacy sites. This is why you still see javascript in html comments, or the occasional isindex. They aren't getting updated, pretty much ever.
6) For visually complex sites, SVG can still drag on budget and older mobile devices.
7) Older android had SVG turned off in Chrome.
8) It's a lot harder to get vector artists than pixel artists; it's a lot harder for artists to give developers SVG than pixel images.
9) Because it isn't trendy yet.
Because they're completely different formats to be used for completely different purposes?
Because most of the images out there are in pixel and not vector format. Converting the latter to the former automatically doesn't always produce the desired results.
At https://starthq.com we do use SVG for the logo and all icons. Falling back to PNG for older browsers requires a CSS hack though and that fails on some older mobile devices.
At https://starthq.com we do use SVG for the logo and all icons. Falling back to PNG for older browsers requires a CSS hack though and that fails on some older mobile devices.
I used SVG to make some interactive demos of some methods for solving ordinary differential equations. At the time, I remember being frustrated by the poor documentation available for the scripting aspects.
Naturally, there are a number of web resources, but none of them felt authoritative (in the sense of complete coverage). Furthermore, they used different techniques, so it was hard to integrate code samples from different sources. Finally, some had outright errors (my vague memory is that some of this was due to the documentation being written before a working implementation was available).
All of this had the effect of making me feel like SVG was a bit of a backwater. I liked the technology, and was willing to use it since I had total control of the machine I was going to run the demo on. However, I didn't feel comfortable with the idea that I could make the demos public and have them run anywhere.
Naturally, there are a number of web resources, but none of them felt authoritative (in the sense of complete coverage). Furthermore, they used different techniques, so it was hard to integrate code samples from different sources. Finally, some had outright errors (my vague memory is that some of this was due to the documentation being written before a working implementation was available).
All of this had the effect of making me feel like SVG was a bit of a backwater. I liked the technology, and was willing to use it since I had total control of the machine I was going to run the demo on. However, I didn't feel comfortable with the idea that I could make the demos public and have them run anywhere.
> For some time, all major browsers already support SVG.
Not time enough. Plenty of people still use IE8, which doesn't.
Not time enough. Plenty of people still use IE8, which doesn't.
You can use SVGWeb as fallback solution for IE6-8 user: http://code.google.com/p/svgweb/
If your SVG file is properly crafted (viewBox & maybe preserveAspectRatio attributes) then you can do this:
<object type="image/svg+xml" width="640" height="480" data="http://example.com/image.svg">
<img src="http://example.com/image.png"/>
</object>IE8 doesn't support SVG and still has nearly 15% marketshare in the US. This is essentially the entire reason.
"Why have SVG images not yet replaced PNG on the web?"
I'm an artist who's been using Adobe Illustrator as her primary medium for thirteen years. Here's some reasons why my site is still serving up tons of bitmap images:
- Any interesting vector image will be a much larger file as an svg than a web-res png/gif/jpg.
- Sophisticated effects in AI can get lost in the transition to SVG. I don't know if this is AI's fault, SVG's lack of support, or the fault of the various things rendering the SVG, and the first point leaves me disinterested in experimenting.
That said, I have been playing with using web fonts for sets of simple images.
Also, most of my artist friends are completely baffled by AI; they prefer bitmap programs like Photoshop, Sai, or Artrage.
I'm an artist who's been using Adobe Illustrator as her primary medium for thirteen years. Here's some reasons why my site is still serving up tons of bitmap images:
- Any interesting vector image will be a much larger file as an svg than a web-res png/gif/jpg.
- Sophisticated effects in AI can get lost in the transition to SVG. I don't know if this is AI's fault, SVG's lack of support, or the fault of the various things rendering the SVG, and the first point leaves me disinterested in experimenting.
That said, I have been playing with using web fonts for sets of simple images.
Also, most of my artist friends are completely baffled by AI; they prefer bitmap programs like Photoshop, Sai, or Artrage.
The SVG spec has been around for so long, but the fact that it competed directly with SWF held it back. Adobe was a major proponent of SVG until they bought Flash and focused their efforts accordingly.
Although SVG is "readable" in a text editor, all but the simplest shapes are extremely complex and require the use of graphics editors such as Inkscape. Vector formats are definitely the future for source images as they can generate any size bitmap you need for any device. However, as a delivery format, SVG will likely be relegated to niche and specialized sites (e.g. data visualizations and animations) for quite a while.
Although SVG is "readable" in a text editor, all but the simplest shapes are extremely complex and require the use of graphics editors such as Inkscape. Vector formats are definitely the future for source images as they can generate any size bitmap you need for any device. However, as a delivery format, SVG will likely be relegated to niche and specialized sites (e.g. data visualizations and animations) for quite a while.
Because browser support is inconsistent, SVGs are often larger than equivalent than even lightly optimized PNGs, and it's a lot easier to find or create raster images than to obtain high-quality vector art. Also, you actually often want different images at different scales, so that automatically scaling one image is not that big an advantage.
I want to use SVG, particularly in Javascript apps. It seems like a more elegant solution/workflow for things like icons. It would certainly beat abusing fonts to put small images on a page. but it has sort of missed its opportunity.
I want to use SVG, particularly in Javascript apps. It seems like a more elegant solution/workflow for things like icons. It would certainly beat abusing fonts to put small images on a page. but it has sort of missed its opportunity.
Let's not forget the issue that scaling vectors does not necessarily mean scaling intent and communication. Vector imagery for some things sounds great; in practice, it doesn't always come out as well as you'd hope--and certainly not as well as a hand-optimized set of work.
See: http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
See: http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
We use SVG on our homepage via raphaeljs to draw the graphics showing marketing, phone calls, metrics, and insights... It was always my goal to one day animate it to help better explain our product, but for now I think it looks pretty good and the PNG version was larger in bytes when converted... the example is here: https://calltrackingmetrics.com/features
I think that the web is slowly starting to adopt SVGs where it makes sense.
d3.js is bringing svg charting to the web in a major way. Most, if not all, modern web dashboards are using it.
Google Maps has been using SVG icons for custom markers for awhile, embedded into their json configuration. This may not be strictly 'the web', but it is a major component of online GIS applications.
d3.js is bringing svg charting to the web in a major way. Most, if not all, modern web dashboards are using it.
Google Maps has been using SVG icons for custom markers for awhile, embedded into their json configuration. This may not be strictly 'the web', but it is a major component of online GIS applications.
Because IE 8 doesn't support SVGs and still accounts for >20% of desktop traffic (by some reports). Likewise, Android 2.x doesn't support SVGs and accounts for some non-ignorable amount of mobile traffic.
Where I currently work we can't support SVGs with some projects due to a bug in the middleware we're mandated to use.
Where I currently work we can't support SVGs with some projects due to a bug in the middleware we're mandated to use.
It's pretty simple. People in charge of corporate logos want COMPLETE CONTROL over how they look. If a rendering engine can mess it up, they're not going to use it. Thus PNGs. What you put into a PNG is what you get out. Not so with SVG.
Because they are completely different image formats for completely different purposes! I'm so tired of these articles. PNG vs JPG, Animated GIF vs video, Flash vs HTML5. These things have barely anything in common!
Because people haven't caught on yet. Browsers will start to support it and it will catch on once people realize its vast benefits over PNG. For now, it's not worth it for people to switch.
If you're going to use SVGs, might as well make a font out of it. Otherwise, PNG is the way to go to guarantee uniform display.
Icon fonts are a horrible hack that's only in use because SVG support in browsers has frankly been terrible so far. Plus, you can only use them for single-color shapes.
Easy answer - when you're making an image in photoshop and you go to save it you don't get to save it as .svg
Because you need both raster and vector images. You can't just ignore all pixel based images.
SVGs are more expensive to decode: The law of spline demand.
you could ask the same question for .gif, flash video, mp3, mpeg2, analog tv/radio, pci bus, d-sub...
>>as PNGs are just plain bitmaps<< .png is definitely not a plain bitmap.
http://en.wikipedia.org/wiki/Portable_Network_Graphics#Compr...
http://en.wikipedia.org/wiki/Portable_Network_Graphics#Compr...
The abandonment has resulted in much-needed improvements to SVG being delayed. The last full release of SVG was 1.1 which was in 2003, we won't see another full release until SVG 2 which is expected in 2014, over a decade later!
Never mind the fact the browser implementations of SVG are still riddled with bugs and none are complete.