我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
最好的选择是在不同的设备上使用SVG图像:)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
其他回答
从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..
https://caniuse.com/svg-img
<img src="/static/image.svg">
如果你使用<img>标记，那么基于webkit的浏览器将不会显示嵌入的位图图像。
对于任何一种高级SVG使用，包括SVG内联提供了迄今为止最大的灵活性。
Internet Explorer和Edge将正确地调整SVG的大小，但您必须指定高度和宽度。
你可以在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;
}
所有这些都适用于2013年以来发布的任何浏览器。
例如，请参见ozake.com。除了联系表单，整个站点都是由SVG组成的。
警告:Web字体在Safari中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡，在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。
在大多数情况下，我建议使用<object>标记来显示SVG图像。这感觉有点不自然，但如果你想提供动态效果，这是最可靠的方法。
对于没有交互的图像，可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项，但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</svg>
这个jQuery函数捕获svg图像中的所有错误，并将文件扩展名替换为另一个扩展名
请打开控制台查看加载图像svg的错误
(函数(美元){ 美元(img)。(“错误”,函数(){ Var image = $(this).attr('src'); 如果(/(\.svg)$/i。测试(图像)){ (美元)。Attr ('src'， image.replace('.svg'， '.png')); ｝ }) }) (jQuery); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < img src = " https://jsfiddle.net/img/logo.svg " >
我的两分:截至2019年，93%的正在使用的浏览器(以及100%的最后两个版本的每个浏览器)可以处理<img>元素中的SVG:
来源:Can I Use
所以我们可以说没有理由再使用<object>了。
然而，它仍然有它的优点:
当检查时(例如使用Chrome Dev Tools)，你会看到整个SVG标记，以防你想要篡改它并看到实时变化。 它提供了一个非常健壮的后备实现，以防您的浏览器不支持SVG(等等，但每个浏览器都支持!)，如果找不到SVG，它也可以工作。这是XHTML2规范的一个关键特性，它类似于betamax或HD-DVD
但也有缺点:
没有AMP对应的<object>(虽然它是完全安全的使用< AMP -img>和内联使用它。 你不应该混合serviceworker获取处理程序与任何类型的嵌入，所以有一个<object>标签可能会使你的PWA从真正的离线能力。
