从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..

https://caniuse.com/svg-img

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

使用srcset

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

在这种情况下，如果您在srcset中指定了SVG，而浏览器不支持它，它将退回到src。

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

与其他解决方案相比，这种方法有几个优点:

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

这个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>标记更容易，因为您的代码将运行得更快，并且您直接使用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>

尽管w3schools不推荐<embed>标签，它是唯一让我的svg混合模式和蒙版在Chrome中工作的东西:

<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />

而Firefox则很好

<svg style="width:100%">
    <use xlink:href="logo.svg#logo"></use>
</svg>

Chrome did not render the gradient: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1"> <title>digicraft punchcard logo</title> <defs> <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%"> <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" /> </linearGradient> <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" /> </pattern> <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="21" height="20" fill="skyblue" /> <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" /> <rect x="0" y="105" width="20" height="20" fill="skyblue" /> <rect x="0" y="126" width="21" height="20" fill="skyblue" /> </pattern> <mask id="punchcard-mask" width="10" height="100%"> <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" /> </mask> </defs> <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" /> </svg>

两个浏览器中的<object>和<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 > <人力资源>