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)，不過參數需要做轉化。