我是否使用< img>，< object>或< embed> SVG文件？ [英] Do I use <img>, <object>, or <embed> for SVG files?

问题描述

我应该使用< img> ，< object> 或< ;嵌入> 用于以类似于加载 jpg ， gif 或 png ？

每种方法的代码是什么以确保它可以正常工作？ （我看到引用了mimetype，或者在我的研究中指向了备用SVG渲染器，并且没有看到一个很好的技术参考）

假设我正在使用 Modernizr 检查SVG支持并回退（可能会用简单的  < img>< / code> tag>对于不支持SVG的浏览器。 入门手册（由W3C出版）涵盖了以下主题： http： //www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

如果您使用< ; object> 然后您可以免费获得栅格后备*：

 < object data =your .svgtype =image / svg + xml> 
< img src =yourfallback.jpg/> 
< / object> 
  

*）好吧，不完全免费，因为有些浏览器会下载这两种资源，请参阅下面的Larry的建议如何解决这个问题。

2014年更新：

• 如果你想要一个非交互式的svg，使用< img> 脚本回退
  到png版本（对于较老的IE和android< ; 3）。一个干净而简单的
  方式来做到这一点：

  
  
  

  < img src =your.svgonerror =this.src = 'your.png'> 。
  
  

  这将表现得非常类似于GIF图像，如果您的浏览器支持声明性动画（SMIL），那么它们就会播放。




• 如果您需要交互式svg，请使用< iframe> 或< object> 。如果您需要提供旧版浏览器使用svg插件的功能，请使用< embed> background-image 和类似的属性，

http://modernizr.comrel =noreferrer> modernizr 是切换到备用图片的一种选择，另一种取决于多个背景自动执行：

  div {
 background-image：url（fallback.png）; 
 background-image：url（your.svg），none; 
} 
  

注意：多背景策略在Android 2.3上不起作用，因为它支持多种背景，但不支持svg。 b $ b 请阅读此博客关于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-image and 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.

这篇关于我是否使用&lt; img&gt;，&lt; object&gt;或&lt; embed&gt; SVG文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！