SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形， 主要优势在于可缩放的同时不会影响图片的质量。
SVG 在html 中常用的方法
1.使用<img>元素来嵌入SVG图像
<img src=”http://www.w3school.com.cn/svg/rect1.svg” width=”300″ />
2.将SVG图像作为背景图像嵌入
background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat;
3.使用svg元素，通过代码将SVG图像嵌入到HTML代码中
<svg width=”100%” height=”100%”>
<rect x=”20″ y=”20″ width=”250″ height=”250″style=”fill:#fecdddd;”/>
</svg>
兼容性
IE 9~11 Firefox 40 Chrome 43 Safari 8 Opera 32
svg sprites
svg sprites类似于css sprites，将各个svg合并在一起。
最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。
实践中我们可以把整块的svg放在head头部， 因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。
<head>
<meta charset=”utf-8″ />
<title>svg</title>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”32″ height=”158″ viewBox=”0 0 32 158″>
<!– SVG等省略 –>
</svg>
</head>
SVG形状
矩形 <rect>
<rect x=”20″ y=”20″ rx=”20″ ry=”20″ width=”250″ height=”100″ style=”fill:red;stroke:black; stroke-width:5;opacity:0.5″/>
解释：x为x坐标，y为y坐标；width 和 height 分别为形状的高度和宽度；rx 和 ry 属性可使矩形产生圆角。
属性： fill 属性定义形状的填充颜色
stroke 属性定义图形边框的颜色
stroke-width 属性定义形状边框的宽度
圆形 <circle>
<circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red”/>
解释：cx 和 cy分别为圆点的 x 和 y 坐标；r为半径。
椭圆<ellipse>
<ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″ style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2″/>
解释：cx 圆点的 x 坐标，cy 圆点的 y 坐标；rx 水平半径，ry 垂直半径。
线<line>
<line x1=”0″ y1=”0″ x2=”300″ y2=”300″ style=”stroke:rgb(99,99,99);stroke-width:2″/>
解释：(x1,y1)为线条的开始坐标；(x2,y2)为线条的结束坐标。
折线<polyline>
<polyline points=”0,0 0,20 20,20 20,40 40,40 40,60″ style=”fill:white;stroke:red;stroke-width:2″/>
解释：points 属性定义多边形每个角的 x 和 y 坐标。为了可读性，建议x与y坐标用逗号分开，每个角之间的坐标用空格分开。
多边形<polygon>
<polygon points=”220,100 300,210 170,250″ style=”fill:#cccccc; stroke:#000000;stroke-width:1″/>
解释：points 属性定义多边形每个角的 x 和 y 坐标。
路径<path>
直线指令：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<svg>
<path d=”M250 150 L150 350 L350 350 Z” />
</svg>
解释：该路径开始于位置 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)
更多专业前端知识，请上 【猿2048】www.mk2048.com
)
)
)
![[LaunchPad] 超声波测试，数码管显示](http://pic.xiahunao.cn/[LaunchPad] 超声波测试，数码管显示)