SVG 可伸缩矢量图形 简介 Path路径

w3school:http://www.w3school.com.cn/svg/svg_intro.asp 

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

SVG Path的路径是一系列的命令组成的，每条命令告诉绘图系统，如何绘制路径。命令的写法：

• 1）每条命令之间可以用换行/空格/逗号进行分隔；
  
• 2）每条命令内的命令和其参数之间可以用换行/空格/逗号分隔，也可以直接连在一起；
  
• 3）命令的各个参数间可以用换行/空格/逗号分隔；
  

通常如果路径过长，为便于阅读，建议命令之间用换行，命令与参数之间用空格，参数之间用逗号进行分隔。

什么是SVG

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  
• SVG 用来定义用于网络的基于矢量的图形
  
• SVG 使用 XML 格式定义图形
  
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  
• SVG 是万维网联盟的标准
  
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
  
• SVG 是 W3C 推荐标准
  
• SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
  

SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
  
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 图就相当于保存了关键的数据点，比如要显示一个圆，需要知道圆心和半径，那么SVG就只保存圆心坐标和半径数据，而平常我们用的位图都是以像素点的形式根据图片大小保存对应个数的像素点，因而SVG尺寸更小
  
• SVG 是可伸缩的
  
• SVG 图像可在任何的分辨率下被高质量地打印
  
• SVG 可在图像质量不下降的情况下被放大
  
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  
• SVG 可以与 Java 技术一起运行
  
• SVG 是开放的标准
  
• SVG 文件是纯粹的 XML
  

SVG 的主要竞争者是 Flash。
与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG文件实例

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

• 第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
• 第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
  
• 第五行，SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
  
• 第八行，SVG 的 <circle> 用来创建一个圆。
• cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。
• r 属性定义圆的半径。
• stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
• fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
• 最后一行，关闭标签的作用是关闭 SVG 元素和文档本身。
  

SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>
  
• 圆形 <circle>
  
• 椭圆 <ellipse>
  
• 线 <line>
  
• 折线 <polyline>
  
• 多边形 <polygon>
  
• 路径 <path>
  

SVG 路径 path标签

<path> 标签用来定义路径。

Android支持的路径命令包括：

1. M = moveto   相当于 android Path 里的moveTo(),用于移动起始点
   
2. L = lineto   相当于 android Path 里的lineTo()，用于画线
   
3. Z = closepath     相当于closeTo(),关闭path
   
4. H = horizontal lineto     用于画水平线
   
5. V = vertical lineto       用于画竖直线
   
6. C = curveto               相当于cubicTo(),三次贝塞尔曲线
   
7. S = smooth curveto        同样三次贝塞尔曲线，更平滑
   
8. Q = quadratic Belzier curve             quadTo()，二次贝塞尔曲线
   
9. T = smooth quadratic Belzier curveto    同样二次贝塞尔曲线，更平滑
   
10. A = elliptical Arc   相当于arcTo()，用于画弧

以上所有命令均允许小写字母。大写表示绝对定位(绝对坐标)，小写表示相对定位(相对坐标)。

假如当前绘图位置是X0,Y0，则：

1. M x, y 对应的是 m x-X0, y-Y0；小写形式对应的是Path类的void rMoveTo(float dx, float dy)。
   
2. L x, y 对应的是 l x-X0, y-Y0；小写形式对应的是Path类的void rLineTo(float dx, float dy)。
   
3. Z 对应的是z，两者作用相同；大小写形式对应的都是Path类的void close()。
   
4. C x1,y1 x2,y2 x,y 对应的是 c x1-X0, y1-Y0, x2-X0, y2-Y0 x-X0, y-Y0；小写形式对应的是 Path类的void rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3)。
   
5. Q x1,y1 x,y 对应的是 q x1-X0, y1-Y0 x-X0,y-Y0；小写形式对应的是Path类的rQuadTo( float dx1, float dy1, float dx2, float dy2)。
   
6. A rx ry x-axis-rotation large-arc-flag sweep-flag x y 对应的是 A rx ry x-axis-rotation large-arc-flag sweep-flag x-X0 y-Y0，小写形式在Path类中与大写方式对应接口的相同，都需要做参数转化。

由于绘制路径的复杂性，因此强烈建议使用 SVG 编辑器来创建复杂的图形。

Path命令详解

M： move to 移动到绘制点

用法：M X,Y (X,Y)是Canvas上的点的位置，M命令会改变Path的初始点 ，如M 10,10或者 M10 10，Path从(10,10)开始绘制。

对应android.graphics.Path的void moveTo(float x, float y)方法。

L：line to 绘制直线

用法：1）L X,Y 从当前位置绘制直线到(X,Y)，如L 10,10或者L10 10

          2）对于水平方向和垂直方向绘制直线的时候，L命令有两个简化表达法，H X表示水平连接，V Y表示垂直连接，比如M 10,10H12表示的是从(10,10)绘制一条直线到(12,10)，M10,10V12表示从(10,10)绘制一条直线到(10,12)。

对应Path类void lineTo(float x, float y)方法。

Z：close 闭合，没有参数，表示用直线连接Path的初始点和Path的终点。

用法：一般Z命令用在一条Path的最末尾，但其实在Z命令后还可以再继续新的路径，不过Z命令不改变Path的初始点，所以M2,2L5,5L5,10ZL6,4L7,3Z命令第二个Z认为的Path初始点还是(2,2)，如果是M2,2L5,5L5,10ZM3,2L6,4L7,3Z命令，则第二个Z认为的Path起始点是(3,2)。

对应Path类的void close()方法。

C：cubic bezier 绘制三次贝塞尔曲线

用法：C X1,Y1 X2,Y2 X,Y 从当前点到(X,Y)点绘制一条控制点是(X1,Y1)、(X2,Y2)的三次贝塞尔曲线，如C 6,4, 7,4, 10,5，控制点是(6,4)、(7,4)，最终点是(10,5)。

对应Path类的void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)方法，方法参数与上面定义顺序完全相同。

S：smooth cubicto绘制一条平滑的三次贝塞尔曲线

用法：S X1,Y1 X,Y 如果前面是一个C/S命令，则自动计算一个保证起始点平滑的对称控制点(X1'，Y1')，从当前点到(X,Y)绘制一条控制点是(X1'，Y1')、(X1, Y1)的三次贝塞尔曲线。其它与上面C命令相同。

如果S前面是一个非C/S命令，则无法计算一个对称的控制点，则从当前点到(X,Y)绘制一条控制点是(X1,Y1)的二次贝塞尔曲线（降阶特性）。

Q：quatratic bezier 二次贝塞尔曲线

用法：Q x1,y1 x,y，从当前点到(x,y)绘制一条控制点是(x1,y1)的二次贝塞尔曲线，如Q 6,4 10,5，控制点是(6,4)，最终点是(10,5)。

对应Path类的void quadTo(float x1, float y1, float x2, float y2)方法，参数定义与顺序同上。

T：smooth quatratic to绘制一条平滑的二次贝塞尔曲线

用法：T X,Y 如果前面是一个Q/T命令，则自动计算一个保证起始点平滑的对称控制点(X1，Y1)，从当前点到(X,Y)绘制一条控制点是(X1，Y1)的二次贝塞尔曲线。其它与上面Q命令相同。

如果T前面是一个非Q/T命令，则无法计算一个对称的控制点，则从当前点到(X,Y)绘制一条直线（降阶特性）。

A：ellipse 绘制一个椭圆圆弧

用法：绘制椭圆圆弧的参数比较复杂，如下：A rx ry x-axis-rotation large-arc-flag sweep-flag X Y，表示绘制一个椭圆圆弧经过(X,Y)点。

rx：椭圆横轴半径

ry：椭圆竖轴半径

x-axis-rotation：椭圆横轴相对于CanvasX轴的偏移角度

large-arc-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度

sweep-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面large-arc-flag标识后还有两个，sweep-flag 取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。

举例：M5,5,A 3,2 0 1 1 5 5.00001 此命令基本上绘制了一个完整的椭圆。注意如果写成M5,5,A 3,2 0 1 1 5 5就什么都展示不了了，因为两点完全相等，命令的目标连接两点已经达到，就不绕大弯子了，所以此处或者目标X或者目标Y要做一点细微的区别。

此命令对应的是void arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)，不过参数需要做转化。