SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形， 主要优势在于可缩放的同时不会影响图片的质量。
SVG 在html 中常用的方法
1.使用元素来嵌入SVG图像
2.将SVG图像作为背景图像嵌入
background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat;
3.使用svg元素，通过代码将SVG图像嵌入到HTML代码中
兼容性
IE 9~11 Firefox 40 + Chrome 43+ Safari 8+ Opera 32+
svg sprites
svg sprites类似于css sprites，将各个svg合并在一起。
最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。
实践中我们可以把整块的svg放在head头部， 因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。
SVG形状
矩形
解释：x为x坐标，y为y坐标；width 和 height 分别为形状的高度和宽度；rx 和 ry 属性可使矩形产生圆角。
stroke 属性定义图形边框的颜色
stroke-width 属性定义形状边框的宽度
圆形
解释：cx 和 cy分别为圆点的 x 和 y 坐标；r为半径。
椭圆
解释：cx 圆点的 x 坐标，cy 圆点的 y 坐标；rx 水平半径，ry 垂直半径。
线
解释：(x1,y1)为线条的开始坐标；(x2,y2)为线条的结束坐标。
折线
解释：points 属性定义多边形每个角的 x 和 y 坐标。为了可读性，建议x与y坐标用逗号分开，每个角之间的坐标用空格分开。
多边形
解释：points 属性定义多边形每个角的 x 和 y 坐标。
路径
直线指令：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
解释：该路径开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。
svg的贝塞尔曲线
贝塞尔曲线指令：
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
C三次贝塞尔曲线
C x1 y1,x2 y2,x y (or c dx1 dy1,dx2 dy2,dx dy)
S光滑三次贝塞尔曲线
S x2 y2,x y (or s dx2 dy2,dx dy)
Q二次贝塞尔曲线
Q x1 y1,x y (or q dx1 dy1,dx dy)
T光滑二次贝塞尔曲线
T x y (or t dx dy)
