对于SVG文件，我使用<img>，<object>还是<embed>？

我应该使用<img> ， <object>还是<embed>将SVG文件加载到页面中，方法与加载jpg ， gif或png类似？

什么是每个代码，以确保它的工作尽可能好？ （我看到在我的研究中引用了包含mimetype或指向备用SVG渲染器的引用，并没有看到一个好的状态的艺术参考）。

假设我正在使用Modernizr检查SVG支持，并且对于不支持SVG的浏览器回退（可能是用一个简单的<img>标签进行替换）。

我可以推荐SVG入门（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> 。
对于CSS background-image和类似属性的svg， modernizr是切换到回退图像的一种选择，另一种取决于多个背景自动执行：
```
 div { background-image: url(fallback.png); background-image: url(your.svg), none; } 
```
注意：多背景策略在Android 2.3上不起作用，因为它支持多个背景，但不支持svg。

另外一个好的阅读是关于SVG回退的这篇博文。

<object>和<embed>具有一个有趣的属性：它们可以从外部文档中获取对SVG文档的引用（将同源策略考虑在内）。然后可以使用该参考来为SVG制作动画，更改其样式表等。

特定

 <object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

然后你可以做类似的事情

 document.getElementById("svg1").addEventListener("load", function() { var doc = this.getSVGDocument(); var rect = doc.querySelector("rect"); // suppose our image contains a <rect> rect.setAttribute("fill", "green"); });

从IE9和以上，你可以使用SVG在一个普通的IMG标签..

http://caniuse.com/svg-img

 <img src="/static/image.svg" />

最好的选择是在不同的设备上使用SVG图像:)

 <img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

如果使用<img>标签，那么基于webkit的浏览器将不会显示嵌入的位图图像 。

~~如果您使用内联SVG，则Explorer将不会根据您的CSS 调整SVG的大小 。~~
资源管理器将正确调整SVG的大小 ，但是您必须指定高度和宽度。

~~我发现<object>标签是所有浏览器中唯一可用的标签。 我不得不改变宽度和高度（在SVG里面）到100％为了得到它正确调整。~~

你可以在SVG中添加onclick，onmouseover等 ，以SVG中的任何形状：onmouseover =“top.myfunction（evt）;”

您也可以在SVG中使用Web字体 ，方法是将其包含在常规样式表中。

注意： 如果您从Illustrator中导出SVG，则Web字体名称将会出错。 你可以在你的CSS中纠正这个问题，避免在SVG中搞乱。例如，Illustrator将错误的名称给Arial，你可以像这样修复它：

 @font-face { font-family: 'ArialMT'; src: local('Arial'), local('Arial MT'), local('Arial Regular'); font-weight: normal; font-style: normal; }

所有这一切在过去两年发布的任何浏览器上都能正常运行。

ozake.com的结果（法文）。 整个网站是由SVG的联系形式除外。

警告： Web字体不能精确调整大小，并且如果您有大量从纯文本转换为粗体或斜体的转换，则在转换点处可能会有少量额外或缺失的空间。在这个问题上查看我的答案以获取更多信息。

使用`srcset`

目前大多数浏览器都支持srcset属性，它允许为不同的用户指定不同的图像。例如，您可以将其用于1x和2x像素密度，并且浏览器将选择正确的文件。

在这种情况下，如果你在srcset指定了一个SVG，并且浏览器不支持它，它将回srcset src 。

 <img src="logo.png" srcset="logo.svg" alt="My logo">

这种方法比其他解决方案有几个好处：

它不依赖于任何奇怪的黑客或脚本
这很简单
您仍然可以包含替代文字
支持srcset浏览器应该知道如何处理它，以便它只下载它需要的文件。

找到一个纯CSS的解决方案，没有双重图像下载。这是不是我想要的美丽，但它的作品。

 <!DOCTYPE html> <html> <head> <title>HTML5 SVG demo</title> <style type="text/css"> .nicolas_cage { background: url('nicolas_cage.jpg'); width: 20px; height: 15px; } .fallback { } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <style> <![CDATA[ .fallback { background: none; background-image: none; display: none; } ]]> </style> </svg> <!-- inline svg --> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"> <switch> <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" /> <foreignObject> <div class="nicolas_cage fallback"></div> </foreignObject> </switch> </svg> <hr/> <!-- external svg --> <object type="image/svg+xml" data="circle_orange.svg"> <div class="nicolas_cage fallback"></div> </object> </body> </html>

这个想法是插入特殊的SVG与后备风格。

更多的细节和测试过程，你可以在我的博客中找到。

这jQuery函数捕获svg图像中的所有错误，并用替代扩展名替换文件扩展名

请打开控制台查看错误加载图像SVG

 (function($){ $('img').on('error', function(){ var image = $(this).attr('src'); if ( /(\.svg)$/i.test( image )) { $(this).attr('src', image.replace('.svg', '.png')); } }) })(jQuery);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://jsfiddle.net/img/logo.svg">

对于SVG文件，我使用<img>，<object>还是<embed>？

使用srcset

在C中显示一个颜色数组

使用`srcset`