使用srcset

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

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

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

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

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

以下是我所能找到的将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>通常是不明智的。

这个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 " >

如果你使用<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中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡，在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。

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