Much like how the video tag can provide multiple source attributes so an mp4 video can fall back to an ogg video, I would like to get an svg image to fall back to an png image.
+3
A:
No, it cannot.
However, you can fake it using CSS background images.
To avoid displaying the broken image glyph, you might want to not use an <img> tag at all and instead use two nested elements with different background images. (Note that that would hurt accessibility)
SLaks
2010-04-12 15:43:30
This would also mean foregoing transparency, as the svg and png wouldn't be pixel perfect matches, especially if the page was zoomed in.
Jason Christa
2010-04-12 15:48:18
I hadn't thought of that.
SLaks
2010-04-12 15:49:37
+1
A:
There's a post here that might help: http://stackoverflow.com/questions/1588854/fallback-image-and-timeout-external-content-javascript
It offers a few javascript options.
Using a background image works well, but you will have to know what the dimensions of your images are. If you don't know then it may be tricky.
Atømix
2010-04-12 15:43:47
A:
Just include the svg as <object> and put <img> inside of it.
<object data='image.svg'>
<img src='image.png'>
</object>
That should work. The png image will only be shown when it's impossible to display svg.
Spadar Shut
2010-04-17 16:37:59
Unfortunately object and img don't behave the same way. img picks up sizing from the svg better than object and also behaves better when zoomed. Object can execute scripts and img can't. Also img is semantically what I mean and object feels like a hack.
Jason Christa
2010-04-18 18:06:05