SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，即不会失真
SVG可以制作成整体或局部动画
SVG图像可以与DOM，CSS和JavaScript交互
SVG可以被记事本等阅读器、搜索引擎访问
SVG图像中的文本是可选的，同时也是可复制的
相比其它位图，SVG图像文件更小，可压缩性更强
SVG提供了一些图像编辑效果，比如屏蔽和剪裁、应用过滤器等等
SVG只是文本，因此可以使用GZip对其进行有效压缩。
stroke-dasharray为一个参数时：其实是表示虚线长度和每段虚线之间的间距如：stroke-dasharray='10'表示：虚线长10，间距10，然后重复虚线长10，间距10
两个参数或者多个参数时：一个表示长度，一个表示间距如：stroke-dasharray='10,5'表示：虚线长10，间距5，然后重复虚线长10，间距5如：stroke-dasharray='20,10,5'表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
属性如下
1、椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的
2、椭圆其实就是在圆的基础上增加了维度的半径
直线:描述2个点定义一条直线
折现:是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中
属性
polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形
path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂
M=moveto
Mxy移动到指定坐标，xy分别为x轴和y轴的坐标点，类似画笔的起点。
L=lineto
Lxy在初始位置（M画的起点）和xy确定的坐标画一条线。两点一线，直线，绘图中很常见的方式。
H=horizontallineto
Hx沿着x轴移动一段位置
V=verticallineto
Vy沿着y轴移动一段位置
C=curveto
Cx1y1x2y2xy三次贝塞尔曲线
S=smoothcurveto
Sx2y2xy简化的贝塞尔曲线
1.如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。
2.如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。
Q=quadraticBéziercurve
Qx1y1xy二次贝塞尔曲线Q只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
T=smoothquadraticBéziercurveto
Q命令的简写命令。与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。
1.T命令前面必须是一个Q命令，或者是另一个T命令
2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线
A=ellipticalArc
Arx,ryx-axis-rotationlarge-arc-flagsweep-flagx,yrx弧的半长轴长度ry弧的半短轴长度x-axis-rotation是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针旋转角度。large-arc-flag为1表示大角度弧线，0表示小角度弧线sweep-flag为1表示从起点到终点弧线绕中心顺时针方向，0表示逆时针方向。xy是终点坐标。
Z=closepath
从当前位置到起点画一条直线闭合。
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
Mxyor
mdxdy4.7.3曲线命令绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在Inkscape、Illustrator或者Photoshop中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份Wikipedia的文档。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。
//创建一个具有指定的命名空间URI和限定名称的元素//要创建一个元素而不指定命名空间URI，请使用createElement方法。letelement=document.createElementNS(namespaceURI,name[,options]);参数
字符串值，可为此元素节点规定其名称。
一个可选的包含单个属性的ElementCreationOptions对象，其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本，一些浏览器允许您在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。
返回值
视窗：是浏览器渲染出来的一个区域
视野：是SVG文件编写者定义的多大的视野观察世界
SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。
基本有下面这些定义颜色的方式：
1、颜色名字：直接使用颜色名字red,blue,black…
2.rgba/rgb值：这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。
3.十六进制值：用十六进制定义的颜色，例如#ffffff。
4.渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，径向渐变。
5、图案填充：使用自定义的图案作为填充色。
这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过CSS来指定他们的值
1、SVG允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。
2、这样做可以增加SVG内容的易读性和可访问性。
1、use元素在SVG文档内取得目标节点，并在别的地方复制它们。
2、use元素还可以跨SVG调用
这里，两个use元素使用的是同一个g元素（组合），从而实现了图形的重复调用功能。
紧接着上面的SVG复制调用的例子
1、g是group（分组）的缩写。
animateMotion可以让父元素沿着指定的路径运动，如：
animateMotion有个rotate属性，默认为0，元素在运动时不会旋转。当设置为auto时，元素对应的水平轴会始终与path路径保持水平
require.context有三个参数：
2、在src目录下创建icons文件及子文件svg和index.js并配置从svg文件夹中读取svg文件
svg-sprite-loader是Webpack加载器，用于创建SVG精灵，可以实现自己的icon组件
它的工作原理是:利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol.