SVG全称：Scalable Vector Graphics，可伸缩矢量图形
SVG既是一种文本格式，也是一种XML语言。每个SVG图像都是使用与HTML类似的标记定义的。
SVG代码可以直接包含在Html中，也可以动态插入到DOM中。
支持除IE8及其之前版本外的所有浏览器。
因为SVG同时是一种XML语言，所以，要记得关闭元素
创建SVG画布
创建了一个SVG元素后，可以将这个元素想象成一张画布，然后我们可以在这张画布画上各种各样的东西。既然是画布，首先自然得有画布的大小。
<svg width="100" height="100"></svg>
如此就创建了一副宽100px、高100px的画布。单位默认为px，可以指定其它单位，如em、pt等。
在画布上画一个简单的圆
有了画布后，我们就可以在画布上画画了。但与普通的画画不同，我们不是用笔去画，而是指挥电脑去画。那如果我要在画布上画一个圆，就要告诉计算机在屏幕上哪个位置(圆心位置)画一个半径为多少的圆。这个对话是通过代码完成的。
要告诉计算机在哪个位置画圆，即给这个圆指定一个屏幕坐标。这就必须先得了解一下计算机的坐标系统。
计算机的坐标系统以坐上角为原点，向右为X轴正轴，向下为y轴正轴。
下面就是在屏幕上画一个圆的代码：
<svg width="400" height="400">
<circle cx="25" cy="25" r="15" />
</svg>
cx、cy指定了圆心坐标，r指定了半径。
svg标签还可以插入的元素：
- rect
- circle
- ellipse
- line
- text
- path
rect
画矩形
<rect x="40" y="5" width="20" height="30"/>
x、y指定矩形左上角位置，width和height是长、宽
ellipse
画椭圆
<ellipse cx="50" cy="40" rx="30" ry="15"/>
cx和cy指定的是椭圆中心的坐标，rx、ry是两个轴的半径
line
画直线
<line x1="0" y1="0" x2="100" y2="100" stroke="black">
直线两端：(x1, y1) (x2, y2)
注：直线必须要先通过stroke指定了颜色才能显示。
text
画文本
<text x="0" y="0">Hello world</text>
x指定的是文本左上角的位置，y指定的是字体的基线位置。
给SVG元素添加CSS样式
SVG默认使用黑色填充，无描边。下面是常见的SVG属性：
- fill，填充颜色，可使用RGB或RGBA
- stroke，可指定颜色值
- stroke-width，宽度，单位为像素
- opacity，0.0-1.0，完全透明到不透明
可以使用CSS类，如下：
SVG .test {
fill:green;
stroke: orange;
}
因为属性stroke等只有SVG才有效，所以，加了和SVG作为指定。
绘制顺序
如果两个SVG重叠，后画的那个会在前面那个上面。CSS中的z-index在这里不管用。因为SVG不分层。