原文链接：
本文不能让你成为 SVG 大神，但是能让你知道、了解他「揭开神秘面纱」
基础认知
SVG「Scalable Vector Graphics」表示「可缩放矢量图形『放大不模糊』」面向未来「W3C 标准」。
基本的 SVG 文档由<svg> 根元素和 构成 作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。 获取更多信息 SVG 文件全局有效的规则是 「后来居上」，越后面的元素越可见。 能做什么
动画、图形、渐变、旋转、滤镜、JavaScript 接口、各种超酷的动画…
和 HTML 使用的几种方式
<img src="xxx.svg" height="10" width="10" />
.svg { background-image: url(xxx.svg);}
<iframe src="xxx.svg">Not support iframe</iframe>
<embed type="image/svg+xml" src="xxx.svg" />
<object type="image/svg+xml" data="xxx.svg">Not support SVG</object>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…</svg>
坐标系统
看图说话「原点在左上角」：
viewBox
动画理解：
CSS、JS 与 SVG
内敛样式
外链样式
JS 操作 SVG
如果 SVG 代码作为 DOM 在 HTML 内部，可以向平常一样操作 DOM 操作 SVG
如果是使用<object> 你可以使用 来控制它 SVG 注意
-
<img>、background-image形式的 SVG 不支持「外链 CSS、JS」 - 内敛 CSS 和 JS 最好放在
<![CDATA[与]]>之中
SVG 基础元素
-
<svg>：SVG 的根元素，可以相互嵌套 -
<g>：将 SVG 中的元素进行分组操作，分组后可以看成一个单独的形状，统一转换 -
<defs>：用于定义在 SVG 中可重用的元素，def 元素不会直接展示出来，可以通过 use 元素来引用 -
<use>：通过它来复用 def 元素，也包括<g>、<symbol>元素，使用<use xlink:href="#id"/>调用 -
<text>：文本节点，可以实现 word 中的那种「艺术字」 -
<image>：在 SVG 中嵌套图片，可以对图片做对应的处理 - …
SVG 形状元素
来张图压压惊：
<path />
别说话，先举个 ? ，一起感受一下 path：
基于 path 的不同属性，可以画出各种各样的路径，所以 path 可算是 SVG 的「节点之王」
除了 path 之外的节点都「比较普通」，可以看成是对 path 的封装，比如「Rect、Circle…」
命令
命令都用一个关键字母来表示，命令 都有两种 表示方式- 大写字母，表示采用「绝对定位」
- 小写字母，表示采用「相对定位『相对于上一个点』」
path 的命令列表
document.getElementById(‘path’).getTotalLength()得到路径长度
- M：moveto 移动到
- L：lineto 画线到；H：horizontal lineto 水平线到；V：vertical lineto 垂直线到
- 命令将会在当前位置和新位置之间画一条线段：L x y (or l dx dy)
还有两个简写命令：H，绘制平行线。V，绘制垂直线。这两个命令都只带一个参数，标明在 x 或 y 轴移动到的位置：H x (or h dx) 、V y (or v dy)
- Z：closepath 关闭路径
- 命令会从当前点画一条直线到路径的起点，所以它还是经常被放到路径的最后。另外，Z 命令不用区分大小写：Z (or z)
- C：curveto 三次贝塞尔曲线
C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
- S：smooth curveto 光滑三次贝塞尔曲线
- 命令可以用来创建与之前那些曲线一样的贝塞尔曲线，通常和 C 命令一起使用
如果 S 命令跟在一个 C 命令或者另一个 S 命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点，不应该写出来，所以 S 省略了一个对称点
- Q：quadratic Belzier curve 二次贝塞尔曲线
Q x1 y1, x y 或 q dx1 dy1, dx dy
- T：smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
T x y 或 t dx dy
- 命令类似于 S 命令，用于二次贝塞尔曲线。T 命令前面最好是一个 Q 命令，或者是另一个 T 命令
如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线
- A：elliptical Arc 椭圆弧
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx ry：「椭圆」的 x，y半径
x-axis-rotation：X 轴旋转角度，顺时针为正数 large-arc-flag：1 表示用大弧度，0 表示小弧度 sweep-flag：弧度回话方向，1 顺时针，0 逆时针- y：弧度终点
元素与样式
- stroke
- fill
- transform
- linearGradient
- mask
- filter
- clipPath
一些 Demo：
使用 CSS 请注意
把 background-color、border 改成 fill 和 stroke 上色和填充的部分一般是可以用 CSS 来设置的，比如 fill，stroke，stroke-dasharray，但不包括渐变和图案等。 另外，width、height，以及路径的命令等等，都不能用 css 设置 不是所有的属性都能用 CSS 来设置： 将属性区分成 properties 和 attributes，前者是可以用 CSS 设置的，后者不能SVG 动画
SVG 的动画元素是和 SMIL 开发组合作开发的。 SMIL 开发组和 SVG 开发组合作开发了 SMIL 动画规范，在规范中制定了一个基本的 XML 动画特征集合。 SVG 吸收了 SMIL 动画规范当中的动画优点，并提供了一些SVG继承实现。
大概三种实现方式：
- JS 动画「DOM 操作『忽视它』」
- CSS3 动画「animation、transition『不是 svg 的重点』」
- SVG 本身的动画「基于 SMIL」「主要借助 SVG
animate相关标签」
set
set 表示此元素没有动画效果 ???。
好吧：这样的，虽然 set 虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。 就是指：可以在特定时间之后修改某个属性值「也可以是 CSS 属性值」。animate
SVG animation 最强大的地方在于：「只要在页面放几个 animate 元素，没有任何 CSS, 没有任何JS」
animateColor
一看就知道是颜色动画。不过，animate 可以实现其功能与效果，因此，此属性已经被废弃。
可谓因为兄弟相争而年少陨落的天王。逝者已矣，过去的就让它过去吧 ~~~animateTransform
animateMotion
animateMotion 元素可以让 SVG 各种图形沿着特定的 path 路径运动 ~~~
例子分析
组合：
end 事件：
click 事件：
进阶阅读推荐
工具推荐
- svgo
项目地址：
比较厉害的压缩优化 SVG 的工具，可以将 SVG 中的无用信息删掉，同时支持代码进行压缩- SVGOMG
展示地址：
SVGOMG 是 svgo 的可视化界面工具，操作起来很方便，还提供了一些其他有用的功能- Snap.svg
项目地址：
Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库， 可以写出更加复杂的 SVG 效果，同时文档超级齐全，推荐给想深入了解的同学。