在HTML中使用SVG的最佳方式

alan_alans
2,736 阅读4分钟

使用标签 （不推荐）

使用元素将外部内容嵌入文档中的指定位置。例如网页、图片、媒体播放器或者插件程序，当然也包括SVG文件。

<embed type="image/svg+xml" src="img.svg" />

不过这种方式已经不建议使用，尽管它在一些情况下依然生效。主要原因是大多数浏览器不再支持插件应用程序，现代浏览器也关闭了对Flash的支持。如果要显示图片或SVG，最好使用标签。要显示HTML，最好用标签。要显示视频或音频，做好用和标签。

使用标签 （不推荐） 
<iframe src="img.svg" frameborder="0"></iframe>

使用这种方式也是可以生效的，但是很明显，是用来嵌入HTML的，使用这种方式嵌入SVG几乎没有什么可维护性。

使用标签 （可以使用）
  1. object标签可以嵌入任何任意类型的文件，只要浏览器可以解析这个类型的文件即可。
  2. object标签上的data属性表示资源的地址，type用来指定资源的MIME类型，对于SVG文件，type应设置为"image/svg+xml"。
  3. title和alt的用法和标签一样，渲染方式也和img大致一样，会被缩放以适应嵌入元素的宽高，不会继承父页面的样式。
<object data="img.svg" type="image/svg+xml" title="img" alt="img"> </object>

使用嵌入SVG有一些独特的优势。嵌入的SVG可以包含外部文件，比如使用use引入其他SVG对象，或者a标签嵌入链接。另外，脚本可以在父页面和对象之间进行通信。还有一点就是这个对象是可以缓存的。

使用标签 （推荐使用）

这是将SVG嵌入HTML中最简单的方式，和嵌入一张图片没有什么两样。单纯的作为展示并且少量使用时，推荐img标签嵌入。例如在前端开发常用的iconfont网站上，当图标引用特别少，以后也不需要特别维护的场景，就可以直接将图标下载为SVG文件，使用img标签引入页面。 没有指定img的宽高时，默认使用SVG自身的宽高，指定了img的宽高时，SVG文件就会按比例缩放，以适应img的尺寸。

<img src="img.svg" alt="img" />

使用这种方式也是有一定的局限性的。图像的渲染和页面是分离的，两者之间无法进行通信，父页面的样式对SVG无法生效，父页面的js脚本也无法操作SVG，所以说只适合单纯作为图片展示用。 还有一点是，img标签嵌入SVG的这种方式，浏览器是不会加载SVG自己引用的文件的，这是出于安全性的考虑。假如没有这样的机制，SVG自己引用了一些外部的文件，则可能会有未知的风险存在。

使用css引入SVG （推荐使用）

这种方式通过background-image引入的，和标签引入SVG类似。

.svg {     background-image: url(img.svg) }

都是用来展示图片效果。区别是，背景图片可以设置平铺之类的效果。

直接嵌入SVG （推荐使用）

SVG本质上也是DOM，所以可以很自然的在HTML中使用，就像普通的元素一样。

<body> 
  <svg id="svg" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" cx="50" cy="50" r="50"/>
  </svg> 
</body>
  1. 内嵌SVG最大的优势就是方便交互，不论是JS还是CSS，都可以方便的操作SVG。
  2. 可以通过JS像操作DOM一样操作SVG元素，添加事件等等，通过CSS也可以很容易的控制SVG的样式。
  3. 另外，因为SVG直接包含在HTML文档中，所以无需像img嵌入的方式一样发送HTTP请求，但是同样也有可能导致文件体积变大，并且也无法缓存。
  4. 这种方式大多数是用在重交互的场景，比如图表
  5. 第三方常见的图表库echarts、g2等都是使用内嵌的方式。
  6. 如果在项目中需要批量使用图标，也推荐内嵌的方式。
  7. 将所有要用到的图标放到页面中，并用标签包起来，此时元素本身是不可见的，在要用到图标的地方使用元素引用相应的图表，即可呈现。

avatar
文章
阅读
粉丝