我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
使用<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>
其他回答
这个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 " >
最好的选择是在不同的设备上使用SVG图像:)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
以下是我所能找到的将svg插入HTML模板的所有方法的总结，以及它们的区别和主要优缺点:
(((1)))
/* in CSS */
background-image: url(happy.svg);
这种方式既不允许JS交互，也不允许CSS本身 可以对SVG部分进行更细粒度的控制。
(((2)))
<img src="happy.svg" />
就像(((1)))一样，既不允许JS交互，也不允许CSS本身对svg部分有更细粒度的控制。
方法(((1)))和(((2)))只适用于需要静态svg。
注意:当使用<img>标记时，如果您在srcset属性中指定了SVG，而浏览器不支持它，它将自动回退到src属性。
<img src="logo.png" srcset="logo.svg" alt="my logo">
(((3)))
<div>
<!-- Paste the SVG code directly here. -->
<svg>...</svg>
<!-- AKA an inline svg -->
<!-- would be the same if is created and appended using JavaScript. -->
</div>
此方法没有(((1)))和(((2))中提到的任何警告，但是，此方法使模板代码混乱，并且svg是复制粘贴的，因此它们不会在自己的单独文件中。
((4))
<object data="happy.svg" width="300" height="300"></object>
OR:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
使用这种方法，SVG将不能使用外部CSS访问，但可以使用JavaScript访问。
((5))
使用iconfu/svg-inject将svg保存在它们自己的单独文件中(以使模板代码更加清晰)，现在使用<img>标记添加svg, svg-inject将自动将它们转换为内联svg，因此CSS和JavaScript都可以访问它们。
注1:如果动态添加imgs(使用javascript)，此方法也有效。
注2:使用此方法添加的svg也会像图像一样被浏览器缓存。
((6))
使用单个SVG精灵文件，然后使用<use>标记插入它们。这种方式也非常灵活，具有与(((5))相同的效果。这个视频中展示了这个方法(以及其他一些方法)。
((7))
(React特有的方式)将它们转换为React组件(或编写一个加载它们的组件)。
((8))
<embed src="happy.svg" />
根据MDN的说法，大多数现代浏览器已经弃用并删除了对浏览器插件的支持。这意味着如果您希望站点在普通用户的浏览器上可操作，那么依赖<embed>通常是不明智的。
对我来说，一个简单的替代方法是将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 > <人力资源>
使用<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>
