我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
对我来说，一个简单的替代方法是将svg代码插入到div中。这个简单的例子使用javascript来操作div innerHTML。
SVG = '< SVG height=150>'; Svg += '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />'; svg+= '<text x=150 y=95 font-size=60 text-anchor=中间填充=红色>IIIIIII</text></svg>'; document.all.d1.innerHTML = svg; < span style=" font - family:宋体;" > < / div > <人力资源>
其他回答
从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..
https://caniuse.com/svg-img
<img src="/static/image.svg">
在大多数情况下，我建议使用<object>标记来显示SVG图像。这感觉有点不自然，但如果你想提供动态效果，这是最可靠的方法。
对于没有交互的图像，可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项，但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</svg>
使用<svg>标记更容易，因为您的代码将运行得更快，并且您直接使用svg。要获得只有svg标记，复制svg文件不带xml标记。结果会是这样的:
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>
根据个人经验，我建议在image tag中通过src加载svg文件，如果一个页面上有很多svg图标或动态追加，会变慢，性能变差
<img src="./file.svg"/> is better performance than
<div><svg>.....</svg></div>
但是如果你想在hover中指定CSS样式，你必须使用embed
<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");
});
