我对 SVG 文件使用 <img>、<object> 或 <embed> 吗？

Should I use <img> , <object> , or <embed> for loading SVG files into a page in a way similar to loading a jpg , gif 或 png ？

确保其尽可能正常工作的每个代码是什么？ （我在我的研究中看到了包括 mimetype 或指向后备 SVG 渲染器的参考，但没有看到一个很好的最先进的参考）。

假设我正在使用 Modernizr 检查 SVG 支持并回退（可能用普通的 <img> 标签替换）不支持 SVG 的浏览器。

原文由 artlung 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 532

我可以推荐 SVG Primer（由 W3C 出版），其中涵盖了这个主题： http ://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

如果您使用 <object> 那么您将免费获得光栅回退*：

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

*) 嗯，不是完全免费，因为有些浏览器会同时下载这两种资源，请参阅下面 Larry 的建议以了解如何解决这个问题。

2014 年更新：

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

<img src="your.svg" onerror="this.src='your.png'"> 。

这将非常像 GIF 图像，如果您的浏览器支持声明性动画 (SMIL)，那么它们将会播放。

如果您想要交互式 svg，请使用 <iframe> 或 <object> 。
如果您需要为旧版浏览器提供使用 svg 插件的能力，请使用 <embed> 。
对于 svg in css background-image 和类似的属性， modernizr 是切换到后备图像的一种选择，另一种是依赖多个背景自动执行：

   div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }

注意：多背景策略不适用于 Android 2.3，因为它支持多背景但不支持 svg。

另一个不错的读物是这篇关于 svg 回退的博文。

原文由 Erik Dahlström 发布，翻译遵循 CC BY-SA 3.0 许可协议