html - Do I use <img>, <object>, or <embed> for SVG files? -
should use <img>, <object>, or <embed> loading svg files page in way similar loading jpg, gif or png?
what code each ensure works possible? (i'm seeing references including mimetype or pointing fallback svg renderers in research , not seeing state of art reference).
assume checking svg support modernizr , falling (probably doing replacement plain <img> tag)for non svg-capable browsers.
i can recommend svg primer (published w3c), covers topic: http://www.w3.org/graphics/svg/ig/resources/svgprimer.html#svg_in_html
if use <object> raster fallback free*:
<object data="your.svg" type="image/svg+xml"> <img src="yourfallback.jpg" /> </object> *) well, not quite free, because browsers download both resources, see larry's suggestion below how around that.
2014 update:
if want non-interactive svg, use
<img>script fallbacks png version (for older ie , android < 3). 1 clean , simple way that:<img src="your.svg" onerror="this.src='your.png'">.this behave gif image, , if browser supports declarative animations (smil) play.
if want interactive svg, use either
<iframe>or<object>.if need provide older browsers ability use svg plugin, use
<embed>.for svg in css
background-image, similar properties, modernizr 1 choice switching fallback images, depending on multiple backgrounds automatically:div { background-image: url(fallback.png); background-image: url(your.svg), none; }note: multiple backgrounds strategy doesn't work on android 2.3 because supports multiple backgrounds not svg.
an additional read this blogpost on svg fallbacks.
Comments
Post a Comment