我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..
https://caniuse.com/svg-img
<img src="/static/image.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");
});
使用srcset
目前大多数浏览器都支持srcset属性，它允许为不同的用户指定不同的图像。例如，您可以使用它的1x和2x像素密度，浏览器将选择正确的文件。
在这种情况下，如果您在srcset中指定了SVG，而浏览器不支持它，它将退回到src。
<img src="logo.png" srcset="logo.svg" alt="My logo">
与其他解决方案相比，这种方法有几个优点:
它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它，以便它只下载所需的文件。
根据个人经验，我建议在image tag中通过src加载svg文件，如果一个页面上有很多svg图标或动态追加，会变慢，性能变差
<img src="./file.svg"/> is better performance than
<div><svg>.....</svg></div>
但是如果你想在hover中指定CSS样式，你必须使用embed
我可以推荐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年更新:
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.
另外一个不错的阅读是这篇关于svg后退的博文。
我建议使用的组合
<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
