概念

SVG全称是可缩放矢量图（Scalable Vector Graphics），是一种基于XML语法，用于描述二维矢量图形的图形格式。jpg，png等其他图像格式都是基于像素处理的，而SVG是用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，可以无损进行缩放。

SVG格式的优点：

SVG必须使用元素进行声明，表示一个SVG文档片段。可以直接嵌入HTML，也可以在直接存为一个svg文件。

使用图形元素来绘制图形，常用的图形元素有：矩形、圆、椭圆、多边形、直线、折线、任意曲线等。

可以使用元素来做组合对象的容器，其子元素可以继承其属性。此外，元素也可以用来定义复杂的对象，之后可以通过元素来引用它们。

可以使用元素来预定义图形，并且在其他元素中引用。

可以直接在元素上定义属性来设置图形的线宽，颜色，填充色等；也可以使用css来定义，但是属性和普通css不相同。

svg的坐标体系。如下图，取svg元素左上角为坐标原点，X轴向右递增，Y轴向下递增。进行图形绘制时，以此坐标来定位。但是需要注意的是text元素的x,y属性定位时是该元素的左下角。

axis.png

SVG在网页中使用有很多种方式，即可像其他图片文件一样直接引用，也可以做像其他DOM元素一样嵌入其中。示例如下：

  // SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
  
  
  
  
    
   
  
  
  // SVG代码也可以写在一个独立文件中，然后用、

属性	描述	默认值
width	SVG片段的宽度，可以是像素也可以是百分比	100%
height	SVG片段的高度，可以是像素也可以是百分比	100%
viewBox	用来控制实际显示的内容，即只显示`svg`元素内部分区域，并缩放。该属性是一个包含4个参数的列表start-x,start-y,width和height，以空格或者逗号分隔开。用以设置实现显示区域的初始坐标和宽高。如果x+width>svg width,则会向右移，以保证最终显示区域的width不变。height规则相同。不允许宽度和高度为负值,0则禁用元素的呈现。	0，0，svg width，svg height，全部显示
preserveAspectRatio	表示对viewBox选中的区域是否强制进行统一缩放.规则过于复杂，这里不再转述，详见preserveAspectRatio	none，根据显示区域决定是否缩放

属性	描述	默认值
fill	图形内填充颜色，与css颜色定义相同，可以预定义，长/短十六进制和rgb方式定义	none，无填充色
stroke	图形外轮廓线条的颜色，与css颜色定义相同	none，无颜色
stroke-width	图形外轮廓线条的宽度像素值，如果使用了一个百分比，这个值代表当前视图的百分比	1

类型	参数形式	说明	实例
M	x,y	moveTo，移动到[x,y]	M10,10
L	x,y	lineTo，绘制一条到[x,y]的直线	L100,10
H	x	horizontal，绘制一条到 [x,currentY] 的横线	H100
V	y	vertical，绘制一条到 [currentX,y] 的竖线	V100
A	rx,ry rotation arc sweep x,y	arc，绘制椭圆弧，参数分别为半径、旋转角度，是否超过180，是否逆时针，终点坐标	A30,50 0 0 1 162.55,162.45
Q	x1,y1 x2,x2	quadratic，绘制一条控制点为 [x1,y1]，目标点为 [x2,y2]的二次贝塞尔曲线	L100,10
T	x,y	绘制一条目标点为 [x,y]的二次贝塞尔曲线，控制点是当前到目标的中心对称点。	L100,10
C	x1,y1 x2,y2 x3,y3	绘制一条目标点为 [x3,y3]，开始控制点为[x1,y1],结束控制点为[x2,y2] 的三次贝塞尔曲线	L100,10
S	x1,y1 x2,y2	绘制一条目标点为[x2,y2]，以[x1,y1]和当前点与结束点的中心对称点为控制点的三次贝塞尔曲线	L100,10
Z	-	闭合路径	Z