SVG是一種向量圖格式，是Scalable Vector Graphics三個單詞的首字母縮寫。在xml檔案中的標籤是<vector>，畫出的圖形可以像一般的圖片資源使用，例子如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />
</vector>

其所畫出的圖形為　　　

於此同時，android studio提供了豐富的圖片資源，可以右鍵module,new->vector asset選擇，如下：

是不是很羨慕這些酷酷的圖形，當然自己也可以去動手去做。顯而易見，上面例子的重點是在PathData裡面的那一大竄數字：

android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />

xml檔案中： 

共有三個標籤，下面就是<path>部分：

先慢慢學習一些基本的語法：

• M：move to 移動繪製點，作用相當於把畫筆落在哪一點。
• L：line to 直線，就是一條直線，注意，只是直線，直線是沒有寬度的，所以你什麼也看不到。

  android:strokeColor="#333330" android:strokeWidth="10" 設定顏色和線寬

• Z：close 閉合，嗯，就是把圖封閉起來。
• C：cubic bezier 三次貝塞爾曲線
• Q：quatratic bezier 二次貝塞爾曲線
• A：ellipse 圓弧

每個命令都有大小寫形式，大寫代表後面的引數是絕對座標，小寫表示相對座標，相對於上一個點的位置。引數之間用空格或逗號隔開。

命令詳解：

• M (x y) 把畫筆移動到x,y，要準備在這個地方畫圖了。
• L (x y) 直線連到x,y，還有簡化命令H(x) 水平連線、V(y)垂直連線。
• Z，沒有引數，連線起點和終點
• C(x1 y1 x2 y2 x y)，控制點（x1,y1）（ x2,y2），終點x,y 。
• Q(x1 y1 x y)，控制點（x1,y1），終點x,y
• C和Q會在下文做簡單對比。
• A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 

• android:pathData=" M50,50 a10,10 1,1 0 1,0" />
  rx ry 橢圓半徑 
  x-axis-rotation x軸旋轉角度 
  large-arc-flag 為0時表示取小弧度，1時取大弧度 （舍取的時候，是要長的還是短的）
  sweep-flag 0取逆時針方向，1取順時針方向 

L的用法：

android:pathData=" M10,0 L10,40 40,40" /> 
把畫筆放在（10,0）位置，連線10，40點 在連線40，40點。。。於是，一個直角三角形出來了~這裡沒有寫z，沒什麼關係。

 Q和C的對比： 詳細瞭解貝塞爾曲線：

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

Q
 android:pathData="M0,0 q30,90 80,20"/>　　　

　
控制點1，30,90 ：
控制點2，80,20  : 

C

android:pathData=" M0,0 c0,0 30,90 80,20" />
C 第一控制點(0,0) 第二控制點(30,90) 結束點(80,20) 或 c 第一控制點 第二控制點 結束點

現在修改第一個控制點：

android:pathData=" M0,0 c50,0 30,90 80,20" />

a:

這麼多 數字，怎麼看啊，可以直接拉到下面看作用。

android:pathData=" M50,50 a10,5 0,1 0 1,0" />
以50，50為起點，逆時針畫

橢圓圖形，x軸半徑10，y軸半徑5 

轉動x軸~~~

android:pathData=" M50,50 a10,5 90,1 0 1,0" />

我想要橢圓上半段，此處修改為x軸半徑的兩倍
android:pathData=" M50,50 a10,5 90,1 0 20,0" />
橢圓左半段
android:pathData=" M50,50 a10,5 90 1 0 0 10" />

橢圓右半段
android:pathData=" M50,50 a10,5 90 1 1 0 10" />

<path
    android:fillColor="#fff70000"  下
       android:pathData=" M50,50 a10,5 0 1 0 1 0" />
    <path
        android:fillColor="#FFF22420" 上
        android:pathData=" M50,50 a10,5 0 1 1 1 0" />
    <path
        android:fillColor="#fff57000"右
        android:pathData=" M50,50 a10,5 0 1 1 1 1" />
    <path
        android:fillColor="#FF323243"左
        android:pathData=" M50,50 a10,5 0 1 0 0 1" />

出現上面的情況可以想到是因為，起始點50,50在橢圓中的位置不同。那麼，再修改一下。

    android:pathData=" M50,50 a10,5 0 1 1 0 7" />  修改了右邊橢圓的程式碼

  現在取的是大弧度，所以看到這樣的效果，如果 7改為10（也就是y軸半徑的兩倍）這剛好會在 一半的位置。

現在取小弧度看看，

android:pathData=" M50,50 a10,5 0 0 1 0 7" /> ，可以看到小弧度 順時針畫圖。

再修改為逆時針，

android:pathData=" M50,50 a10,5 0 0 0 0 7" /> 

橢圓的屬性 差不多講解完成了，如下

android:pathData=" M50,50 a10,5 0 0 0 0 7" />

10，5 為橢圓x，y軸半徑

第一個0 為 x軸旋轉角度

第二個0 為取大小弧度，0為小，1為大

第三個0 為順逆時針，0為逆1為順

第四個0  為修改修改起始點在橢圓中的位置，y軸.

第四個 7 為修改修改起始點在橢圓中的位置，x軸。

這是前輩留下的圖：

<path>裡面還有哪些屬性那？

• android:name 定義該 path 的名字，這樣在其他地方可以通過名字來引用這個路徑
• android:pathData 和 SVG 中 d 元素一樣的路徑資訊。
• android:fillColor 定義填充路徑的顏色，如果沒有定義則不填充路徑
• android:strokeColor 定義如何繪製路徑邊框，如果沒有定義則不顯示邊框
• android:strokeWidth 定義路徑邊框的粗細尺寸
• android:strokeAlpha 定義路徑邊框的透明度
• android:fillAlpha 定義填充路徑顏色的透明度
• android:trimPathStart 從路徑起始位置截斷路徑的比率，取值範圍從 0 到1
• android:trimPathEnd 從路徑結束位置截斷路徑的比率，取值範圍從 0 到1
• android:trimPathOffset 設定路徑擷取的範圍 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
• android:strokeLineCap 設定路徑線帽的形狀，取值為 butt, round, square.
• android:strokeLineJoin 設定路徑交界處的連線方式，取值為 miter,round,bevel.
• android:strokeMiterLimit 設定斜角的上限，Sets the Miter limit for a stroked path.

下面詳細講一下 android:strokeLineCap ，android:strokeLineJoin 兩個屬性

android:pathData="M200,200 l100,300        
          　　　　　 M300,200 l-100,300

再沒有新增這兩條屬性前：

新增語句：android:strokeLineCap="round" 後可以看到有三個點改變了格式（左下角是圖形結束點，並沒有改變）

最後新增：android:strokeLineJoin="round" 左下角也做了改變，如下

這xml開始部分的程式碼是做什麼的那？ 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

先看看有哪些屬性，

• android:name 定義該drawable的名字
• android:width 定義該 drawable 的內部(intrinsic)寬度,支援所有 Android 系統支援的尺寸，通常使用 dp
• android:height 定義該 drawable 的內部(intrinsic)高度,支援所有 Android 系統支援的尺寸，通常使用 dp
• android:viewportWidth 定義向量圖檢視的寬度，檢視就是向量圖 path 路徑資料所繪製的虛擬畫布
• android:viewportHeight 定義向量圖檢視的高度，檢視就是向量圖 path 路徑資料所繪製的虛擬畫布
• android:tint 定義該 drawable 的 tint 顏色。預設是沒有 tint 顏色的
• android:tintMode 定義 tint 顏色的 Porter-Duff blending 模式，預設值為 src_in
• android:autoMirrored 設定當系統為 RTL (right-to-left) 佈局的時候，是否自動映象該圖片。比如 阿拉伯語。
• android:alpha 該圖片的透明度屬性

<group>裡面可以定義多了<path>，這樣可以方便管理多個<path>

• android:name 定義 group 的名字
• android:rotation 定義該 group 的路徑旋轉多少度，這樣圖片就被旋轉了，注意寫數字的時候別暈了。
• android:pivotX 定義縮放和旋轉該 group 時候的 X 參考點。該值相對於 vector 的 viewport 值來指定的。
• android:pivotY 定義縮放和旋轉該 group 時候的 Y 參考點。該值相對於 vector 的 viewport 值來指定的。
• android:scaleX 定義 X 軸的縮放倍數
• android:scaleY 定義 Y 軸的縮放倍數
• android:translateX 定義移動 X 軸的位移。相對於 vector 的 viewport 值來指定的。
• android:translateY 定義移動 Y 軸的位移。相對於 vector 的 viewport 值來指定的。

<clip-path>定義當前繪製的剪下路徑，就是影象的一部分剪下下來。注意，clip-path 只對當前的 group 和子 group 有效。

<clip-path         android:pathData="M200,200 h200 v150 h-200 v-150"     />
原圖為上面的 叉 ，剪下後為：

終，下次為動畫的製作。有部分是前人的功勞~銘記。