SVG 的
代码结构：
<svg><path d=" Mx轴,y轴 Lx轴,y轴 Lx轴,y轴 Z "
style="stroke:线颜色; stroke-width:线宽; fill:是否填充路径;"
/>
</svg>
：：M开始 到 Z关闭路径
定义路径数据命令：
M = moveto (M X,Y) ：将画笔移动到指定的坐标位置
L = lineto (L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto (H X)：画水平线到指定的X坐标位置
V = vertical lineto (V Y)：画垂直线到指定的Y坐标位置
C = curveto (C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto (S X2,Y2,ENDX,ENDY) ：圆滑曲线
Q = quadratic Belzier curve (Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto (T ENDX,ENDY)：映射
A = elliptical Arc (A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath ()：关闭路径
说明：
-坐标轴以(0,0)为中心，X轴水平向右，Y轴水平向下。
-允许小写字母；大写绝对定位，参照全局坐标系（50到100）；小写相对定位，参照父容器坐标系(50+100=150)。
-同一指令出现多次可以只用一个。
绘制工作
是在
在
第一个命令是
M 移动命令 ，目的为确定绘画的起始点。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M50 50 L40 30 L50 10" "M40,20 A30,30 0 1,1 70,70"
style="stroke:#660000; stroke-width:2; fill:none;" />
</svg>
在path属性中，添加style 样式来实现线条显示。stroke值为线条颜色，stroke-width值为数值线宽度，fill值为none不填充。
1、弧线A
画半径A指令有2个参数： *rx水平方向上的半径， *ry垂直方向上的半径。
：：：：当值相同，将得到一个指定为正圆的弧线；当值不同，将得到一个指定为椭圆形的弧线。
例：A30,30 0 0,1 70,70
第一个参数：rx x轴水平向上半径（起始点 30,30
第二个参数：ry y轴垂直向上半径（结束点 70,70
第三个参数：x-axis-rotation 设置弧线X轴方向上的旋转，通常不需要改变这个参数，默认值为0。
第四个参数：大小弧形,是否镜像 0,0 1,0 1,1 0,1
large-arc-flag 标志位，决定是否绘制长 / 短的 弧线，值的范围0/1；0以小弧形绘制，1以大弧形绘制。
sweep-flag标志位，决定是否沿开始点到结束点的直线来镜像弧线。主要是控制弧线的绘制方向，顺时针或逆时针绘制，类似“镜像”效果。值的范围0/1；0不镜像弧线，1镜像弧线。
<svg xmlns="http://www.w3.org/2000/svg">
1 <path d="M40,20 A30,30 0 0,0 70,70" //0,0 小弧形,不镜像 黄色
style="stroke: #cccc00; stroke-width: 2; fill: none;" />
2 <path d="M40,20 A30,30 0 1,0 70,70" //1,0 大弧形,不镜像 放大第一个 红色
style="stroke: #ff0000 stroke-width:2; fill: none;" />
3 <path d="M40,20 A30,30 0 1,1 70,70" /1,1 大弧形,镜像 镜像第一个 绿色
style="stroke: #00ff00; stroke-width: 2; fill: none;" />
4 <path d="M40,20 A30,30 0 0,1 70,70" //0,1 小弧形,镜像 镜像放大的 蓝色
style="stroke: #0000ff; stroke-width: 2; fill: none;" />
</svg>
输出：
2、 二次贝兹曲线Q
Q 命令和直线的原理相同，仅2个参数
第一个参数：控制点(x,y)，决定曲线的弧度。控制点能够像磁铁一样拉伸曲线；控制点越接近弧线，弧线越平滑，弧度越大。
第二个参数：结束位置(x,y)
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M50,50 Q50,200 100,100"
style="stroke: #cccc00; stroke-width: 2; fill:none;" />
</svg>
输出：
M50,50 Q50,200 100,100 意思是：：
从（50,50）开始到（100,100）位置结束，控制点的位置在（50,100）的位置
3、 闭合路径Z
指将最后的一个绘制点连线到开始点。
大小写没有区别
4、 路径填充 fill
使用CSS语法
<path style=" stroke: #cccc00; stroke-width: 2; fill:none;" />
Path的Data数据生成方式：
- 矢量图形转path数据。
最简单的是用Expression Design软件工具。将矢量图形 粘贴到软件中，来导出XAML Silverlight 格式的矢量图形 - 文字转path数据。
用Expression Blend 软件工具，文字转成图形，相当于印刷行业里的文字转曲 - 自己手动写 图形/文字 path数据。这也是最难的方式。用Design生成的数据量很大，手写就会变得很简洁。
例图：
<svg xmsnl="www.3c.org">
<path d="M10.68 16.865a.802.802 0 01-.4.093.883.883 0 01-.77-.452l-.053-.133-2.418-5.301a.442.442 0 01.399-.624c.093 0 .186.026.265.092l2.844 2.02a1.348 1.348 0 001.182.133l13.42-5.98c-2.405-2.83-6.365-4.69-10.856-4.69-7.334 0-13.286 4.956-13.286 11.068 0 3.335 1.794 6.338 4.597 8.37.226.16.372.426.372.718 0 .093-.027.186-.053.28-.226.836-.585 2.165-.598 2.231-.027.107-.066.213-.066.32 0 .239.199.438.438.438.093 0 .173-.04.252-.08l2.924-1.647c.212-.133.451-.2.704-.2.133 0 .265.027.385.053 1.355.386 2.817.612 4.331.612 7.335 0 13.287-4.956 13.287-11.068 0-1.847-.545-3.6-1.515-5.129l-15.292 8.822-.093.054z"
fill="#00AC1C"/>
</svg>
输出：