概述：
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，具有体积较小，且不管放大多少倍都不会失真的优点。
SVG可以直接以DOM节点的形式，插入到页面中显示，跟其他DOM节点一样可以设置样式和通过JS操作；也可以嵌入到 <iframe> <embed>标签中显示；同时还有一个比较关键的功能是svg可以不经格式化直接转换为base64。
<img src="data:image/svg+xml;base64,[data]">
坐标：
画布
对于所有元素，SVG使用的坐标系统和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。
<rect x="0" y="0" width="100" height="100" />
定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。
画布大小
默认情况下，svg的单位为px。在SVG文档中的1px对应输出设备上的1个像素。但是svg实际渲染大小是可以改变的，否则SVG的名字也不会有scalable（可缩放）这个词。如同CSS可以定义字体的绝对大小和相对大小，SVG也可以定义绝对大小，同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。
除此之外，SVG中图形的实际大小还与viewbox有关。
<svg width="100" height="100">
上面的元素定义了一个100*100px的SVG画布，这里1用户单位等同于1屏幕单位。
<svg width="200" height="200" viewBox="0 0 100 100">
这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽100高的区域。这个100100的区域，会放到200200的画布上显示。于是就形成了放大两倍的效果。
语法：
SVG也是DOM标签，接下来我们看看SVG包含那些标签。
容器标签
<svg> 跟标签，所有svg标签都放在这个标签里面，也只能放在这个标签中，才能当做svg的内容来渲染。
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
width ，height 为svg的宽高，如果缺省则默认值为300px宽，150高。svg中可以不用写单位，默认单位为px。
可视标签
<circle> 标签用于绘制直线圆形：
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
<circle cx="90" cy="50" r="25" class="red" />
<circle cx="150" cy="50" r="25" class="fancy" />
</svg>
其中cx，xy代表圆心坐标r为半径。
<line> 标签用于绘制直线：
<svg width="300" height="180">
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>
其中x1，y1为起点坐标，x2,y2为终点坐标。
<polyline> 标签用于绘制折线：
<svg width="300" height="180">
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>
其中points为折线的接点，接点直接用空格分开，接点的坐标值用逗号分开。
<rect> 标签用于绘制矩形：
<svg width="300" height="180">
<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>
其中x，y为矩形左上角坐标，width，height为宽高。
<ellipse> 标签用于绘制椭圆：
<svg width="300" height="180">
<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>
其中cx，cy为椭圆圆心，rx，ry为横向半径和纵向半径 。
<polygon> 标签用于绘制多边形：
<svg width="300" height="180">
<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>
其中points为多边形每一个端点的坐标。
<text> 标签用于绘制字体：
<svg width="300" height="180">
<text x="50" y="25">Hello World</text>
</svg>
x，y文本区块基线（baseline）。
<tspan> 标签用于绘制字体,只能添加在text节点下面，用于调整个别文本的样式：
<svg width="300" height="180">
<text x="50" y="25">
<tspan x="10" y="0">SVG</tspan>
<tspan x="10" y="20">SVG</tspan>
</text>
</svg>
x，y文本区块基线（baseline）。
<path> 标签用于绘制路径：
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
d表示绘制的顺序，其中d里面的字母值代表用什么样的方式绘制，后面的数字为坐标。
M ：移动到
L ：画直线到
Z ：闭合路径
除此之外，d里面还有其他属性：
H ： 水平移动到
V ： 垂直移动到
C ： 绘制曲线
S ： 平滑曲线
Q ： 二次贝塞尔曲线
T ： 平滑二次贝塞尔曲线
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<image> 标签用于显示图片：
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>
其中link:href属性表示图片的资源路径。
小结
svg可视的标签，大概就是这些。
