我是使用 <img>、<object> 还是 <embed>对于 SVG 文件? [英] Do I use <img>, <object>, or <embed> for SVG files?
问题描述
我应该使用 、 或 将 SVG 文件加载到页面中吗?一种类似于加载 jpg、gif 或 png 的方式?
确保其尽可能正常工作的每个代码是什么?(我在研究中看到了包括 mimetype 或指向后备 SVG 渲染器的参考，但没有看到良好的最新技术参考).
假设我正在使用 是其中之一切换到后备图像的选择，另一个是根据多个背景自动切换:
div {背景图片:网址(fallback.png)；背景图片:网址(your.svg)，无；}注意:多背景策略不适用于 Android 2.3，因为它支持多背景但不支持 svg.
另一个不错的读物是这篇关于 svg 回退的博文.
Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png?
What is the code for each to ensure it works as well as possible? (I'm seeing references to including the mimetype or pointing to fallback SVG renderers in my research and not seeing a good state of the art reference).
Assume I am checking for SVG support with Modernizr and falling back (probably doing a replacement with a plain <img> tag)for non SVG-capable browsers.
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="your.svg" type="image/svg+xml">
<img src="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="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.
这篇关于我是使用 <img>、<object> 还是 <embed>对于 SVG 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
