HTML中嵌入SVG图片的N种方式

使用svg标签

即直接把svg整个标签内容（除了开头的xml和doctype声明外的svg文件内容）都丢到 HTML 中即可。
可惜不适合本例 -- 我们这次的svg是外部的，不好放入HTML中。

使用img标签

<img src="./test.svg" style="display:block;width:330px;height:240px" />

这个是最容易想到的 -- 因为svg图片也是图片嘛。
需要注意的是，svg里面带的<image>标签将无法正常显示。<img>标签适合显示纯矢量+文本的SVG图片。

使用iframe标签

<iframe src="./test.svg" style="display:block;width:330px;height:240px;border:none;" ></iframe>

万能的iframe当然什么都能显示，但是无法控制内容大小 -- viewBox也搞不定，估计只能用百分比来定位了，太麻烦了，不建议使用。

使用embed标签

<embed src="./test.svg" style="display:block;width:330px;height:240px" />

注意使用viewBox，<embed>标签的兼容性也很不错的，是个不错的选择。

使用object标签

<object type="image/svg+xml" data="./test.svg" style="display:block;width:330px;height:240px" >
    <param name="src" value="./test.svg" >
</object>

<object>与<embed>类似，也要注意配置viewBox.

使用div的背景图片

<div style="display:block;width:330px;height:240px;background: url(./test.svg) no-repeat;background-size: 100%;" ></div>

svg图片是可以作为背景图片的。不过和<img>标签一样，无法显示SVG内嵌的<image>.

使用picture标签

<picture >
    <source srcset="./test.svg"  type="image/svg+xml">
    <img src="./test.png" style="display:block;width:330px;height:240px">
</picture>

<picture>标签是HTML5新增的一个专门显示图片的标签。

注意设置<source>标签的属性srcset而非src. 此外必需要添加一个<img>标签，不过可以在<img>标签中指定另外一张图片，以便在浏览器无法显示<source>指定的图片的时候显示<img>标签中的图片。

<picture>和<img>一样，无法显示SVG内嵌的<image>.

-------------------------

文章转载于：HTML中嵌入SVG图片的N种方式 - 北月武馆 - SegmentFault 思否