I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
If you use <object> then you get raster fallback for free*:
<object data="https://stackoverflow.com/questions/4476526/your.svg" type="image/svg+xml">
<img src="https://stackoverflow.com/questions/4476526/yourfallback.jpg" />
</object>
*) Well, not quite for free, because some browsers download both resources, see Larry’s suggestion below for how to get around that.
2014 update:
-
If you want a non-interactive svg, use
<img>with script fallbacks
to png version (for older IE and android < 3). One clean and simple
way to do that:<img src="https://stackoverflow.com/questions/4476526/your.svg" onerror="this.src="your.png"">.This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
-
If you want an interactive svg, use either
<iframe>or<object>. -
If you need to provide older browsers the ability to use an svg plugin, then use
<embed>. -
For svg in css
background-imageand similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:div { background-image: url(fallback.png); background-image: url(your.svg), none; }Note: the multiple backgrounds strategy doesn’t work on Android 2.3 because it supports multiple backgrounds but not svg.
An additional good read is this blogpost on svg fallbacks.