向强大的SVG迈进

作者：凹凸曼 - 暖暖

SVG 即 Scalable Vector Graphics 可缩放矢量图形，使用XML格式定义图形。

一、SVG印象

SVG 的应用十分广泛，得益于 SVG 强大的各种特性。

1.1、 矢量

可利用 SVG 矢量的特点，描出深圳地铁的轮廓：

1.2、iconfont

SVG 可依据一定的规则，转成 iconfont 使用：

1.3、 foreignObject

利用 SVG 的 foreignObject 标签实现截图功能，原理：foreignObject 内部嵌入 HTML 元素：

截图实现流程：

1. 首先声明一个基础的 svg 模版，这个模版需要一些基础的描述信息，最重要的，它要有 这对标签；
2. 将要渲染的 DOM 模版模版嵌入 foreignObject 即可；
3. 利用 Blob 构建 svg 对象；
4. 利用 URL.createObjectURL(svg) 取出 URL。

1.4、SVG SMIL

由于微信编辑器不允许嵌入