
Why have SVG images not yet replaced PNG on the web? - seky
http://blog.sekera.cz/2013/09/why-svg-images-did-not-replace-png.html
======
jahewson
Nobody has mentioned the abandonment of SVG 1.2 as a factor. It was dropped by
the W3C and never implemented in any browsers. This not only stalled
improvements to SVG 1.1 but created a situation where the editing software
(e.g. Inkscape) allows the user to create files using SVG 1.2 features which
are invalid in SVG 1.1.

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.

~~~
ahoge
> _we won 't see another full release until SVG 2 which is expected in 2014,
> over a decade later!_

HTML4: 1998

HTML5: 2014

~~~
nerfhammer
HTML5 has been rolling out since 2004

~~~
ahoge
It's from recommendation to recommendation.

------
oofabz
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.

~~~
crazygringo
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.

~~~
mistercow
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.

~~~
PeterisP
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.

~~~
johnbm
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.

------
sambeau
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.

~~~
gglanzani
[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?

~~~
ygra
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.

------
ygra
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.

------
MaxGabriel
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://caniuse.com/#cats=SVG)

[http://developer.android.com/about/dashboards/index.html](http://developer.android.com/about/dashboards/index.html)

~~~
droidist2
True. Android is the new IE when it comes to supporting features like this.
Strange since Google pushes HTML 5 so much.

------
qwerty_asdf
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.

------
amadeus
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.)

------
ris
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...

~~~
seky
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

------
marijn
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](http://eloquentjavascript.net) . But in order
to not screw over people on old devices, I will probably use svg with png
fallbacks instead.

~~~
guptaneil
Honest question: Will people with devices old enough to not be able to render
svg really be reading a programming book?

~~~
marijn
Well, my own phone is unable to render svg, so I can imagine there is such an
audience.

------
drcode
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.

~~~
corresation
_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.

------
ScotterC
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.

~~~
Pxtl
Also, illustrator sucks.

~~~
nness
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).

~~~
Pxtl
Adobe's forgotten, unpromoted, and now discontinued fireworks is their actual
svg art tool. Apparently illustrator isn't meant to illustrate.

------
etchalon
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.

~~~
Mindless2112
SVG solved a problem essentially everyone will have: pixel density.

~~~
masklinn
Except it failed to solve the related problem which everybody already has: eye
resolution.

~~~
avmich
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.

~~~
etchalon
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.

------
JohnHaugeland
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.

------
anjc
Because they're completely different formats to be used for completely
different purposes?

------
olegp
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](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.

------
dmlorenzetti
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.

------
crazygringo
> _For some time, all major browsers already support SVG._

Not time enough. Plenty of people still use IE8, which doesn't.

~~~
frik
You can use SVGWeb as fallback solution for IE6-8 user:
[http://code.google.com/p/svgweb/](http://code.google.com/p/svgweb/)

~~~
panzi
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>

------
JoelSutherland
IE8 doesn't support SVG and still has nearly 15% marketshare in the US. This
is essentially the entire reason.

------
egypturnash
"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.

------
neovive
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.

------
puller
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.

------
bcrescimanno
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-...](http://www.pushing-pixels.org/2011/11/04/about-those-vector-
icons.html)

------
taf2
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](https://calltrackingmetrics.com/features)

------
tmarthal
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.

------
eddieh
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.

------
grogenaut
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.

------
Grue3
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!

------
zach_s
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.

------
brianfryer
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.

~~~
illicium
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.

------
nyar
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

------
ronreiter
Because you need both raster and vector images. You can't just ignore all
pixel based images.

------
aidenn0
SVGs are more expensive to decode: The law of spline demand.

------
drill_sarge
you could ask the same question for .gif, flash video, mp3, mpeg2, analog
tv/radio, pci bus, d-sub...

------
deletes
>>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#Compression)

