SVG 使用

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 属性可使矩形产生圆角。

属性： fill 属性定义形状的填充颜色

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)