HTML页面中嵌入SVG

HTML页面中嵌入SVG的几种方式

---

你有N种理由使用SVG在页面中展示图像，如它的矢量特性、广泛的浏览器支持、比JPEG和PNG更小的体积、可用CSS设置外观、使用DOM API操作以及各种可用的SVG编辑工具等。

可以用以下六种方式在页面文档中嵌入SVG：

1. 作为图片使用<img>标签

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

2. 作为CSS背景图片

.el {background-image: url(mySVG.svg);}

3. 作为对象用<object>标签引入

<object type="image/svg+xml" data="mySVG.svg">

<!-- 如果浏览器不支持，这里显示备选内容 -->

</object>

使用<object>的一大好处是可以提供浏览器不支持情况下的备选方案。

4. 使用<iframe>标签

<iframe src="mySVG.svg">

<!-- 如果浏览器不支持，这里显示备选内容 -->

</iframe>

如果想将SVG代码以及脚本和主页面彻底分离，<iframe>是个不错的选择。但是这样一来在主页面用 JavaScript操作SVG内容就变得稍微麻烦了，并且还有浏览器的同源策略限制。

5. 使用<embed>标签

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

<embed>虽然不是HTML规范的一部分，但仍然被广泛支持。它原本是为了支持某些外部插件而存在的，比如 Adobe Flash插件就要依赖这个标签。但是它不能提供浏览器不支持时的备选显示内容。

6. 使用内联<svg>标签

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" …> <!-- svg 内容 --> </svg> 这是目前最常用的方式。使用内联SVG的好处是，可以将CSS样式规则和控制脚本放在当前文档的任何位置，而不是限制在<svg> 标签中。

参考资料

Styling And Animating SVGs With CSS