HN Explorer

Ask HN: Why don't websites use svg?

17 points by cturhan ↗ HN
I really wonder why almost all websites use raster images like png, jpg instead of svg format. Is it a performance issue or anything else? I'm starting a project fully working with vector images and planning as much as flexible it can be.

15 comments

[ 1010 ms ] story [ 1336 ms ] thread
brudgers
The web was built before SVG. Older web browsers particularly IE do not support it directly, others offer partial support. So it doesn't degrade gracefully. On the other hand, everything supports bitmaps.

In addition, the process of designing for the web is centered around bitmaps because full support has been lacking and because advertisers (still the primary income source on the web) want maximum compatibility.

prodigal_erik
Even newer browsers don't seem to announce their SVG support in the Accept header, so you'd have to whitelist specific browser versions or script in feature testing and progressive enhancement.
CoryMathews
because IE8 does not support SVG, and we still have to support IE8.
DrJokepu
We have used SVG in past on the web for rendering waveforms but we have replaced them with prerendered PNG images. The reasons are: the performance is abysmal, the file size is considerably larger than PNG (even with gzip compression), browser support (including Chrome and Firefox) is weak even when present (crappy antialiasing, crappy scaling etc).
duopixel
If your PNGs were coming out larger than your SVGs you were probably plotting more points and precision than needed at the given resolution. You can greatly reduce filesize just by rounding up some decimals.
DrJokepu
You mean SVGs being larger than PNGs? No, that wasn't the case, we were using integers and in the prerendered PNGs there was a 1:1 mapping between the integers and the pixels in the PNG.
ChuckMcM
All of these things. Except the 'larger' part. If you're SVG is larger then you can successfully do 'node reduction' on it without losing fidelity. There must be a python tool somewhere that will tell you which nodes are less than one pixel apart at different rendering densities.
atirip
No, its not IE this time, as with Raphael for example I can use VML. The dog here is Google with Android.
tomelders
Brudgers point about browser support is the main reason. However, earlier versions of IE had VML, which is very similar to SVG.

Take a look at [Raphaël.js](http://raphaeljs.com/), which conveniently wraps up SVG and VML into one library. There are some minor quirks when dealing with IE, but nothing that can't be worked around. I've used SVG is most of the commercial work I've been doing for the past 2 years with great success.

On the performance side though, there is a noticeable performance hit on mobile browsers. Also, Google made the odd decision to leave SVG out of it's mobile webkit implementation in earlier version of Android. And because Android adoption rates aren't great, it has been an issue on some projects. However, it's possible to fill that hole using the canvas tag.

I personally think it's SVG's time to shine. HD graphics present a huge problem which SVG goes some way towards solving, and it's a great replacement for some of the stuff that was previously the sole domain of Flash.

tagawa
Because the Android default browser had no SVG support until version 2.3, allegedly to save 1MB of space. These older versions will remain in widespread use for a while yet (slower upgrade rate than iOS) and Raphael doesn't fill the gap, unfortunately.

Opera Mobile and Mobile Firefox do support SVG, even on old Android, by the way. (Disclaimer: I work for Opera.)

creativesam
size is directly related to performance on the internet and that might be the reason sites not using svg format
lurker14
Similar to why pure declarative programming is less popular than imperative. It's far less efficient to maintain all that unchanging state, except in special cases where optimizations are applied. And it's often easier to describe what you want in a procedural way.
lurker14
For me, it was because of bad mobile webkit support.
peacetara
The good news tho, SVG is a fairly good solution to the Retina display problem, so that might boost adoption.
norswap
For images that are part of the website design, it makes sense to use rasters since the websites are designed using pixels as a unit. Web interfaces might be responsive, but they rarely "scale".