Android 5.0系統中引入了 VectorDrawable 來支援向量圖(SVG)，同時還引入了 AnimatedVectorDrawable 來支援向量圖動畫

什麼是 SVG ？

SVG是指可伸縮向量圖形 (Scalable Vector Graphics)，它不同於傳統的點陣圖，不是通過儲存影象中每一點的畫素值來儲存與使用圖形，而是通過 XML 檔案來定義一個圖形，通過一些特定的語法和規則來繪製出我們所需的影象——同樣是使用一張圖片，SVG 的方式是事先定義好怎麼去畫這個圖，然後等要用的時候再把它去畫出來，而使用傳統的點陣圖的話就是已經有了畫出來的圖，然後要用的時候直接把畫好的圖拿出來用。

• SVG 是在要用圖的時候再把圖畫出來，所以理所當然的在圖片顯示的時候會花費更多的時間消耗更多的資源。
• 同樣由於上一個原因， SVG 並不太適合層次過於複雜細節過於繁多的圖片。
• 點陣圖是事先已經畫好的圖片，所以適應性必然沒有 SVG 好，同一張圖片在不同解析度下顯示會有差異。
• SVG 的檔案裡儲存了繪製圖片的相關資訊，所以我們能夠對圖片的線條有一個非常清晰的感知，這在做動畫的時候特別有用。
• SVG 沒有儲存任何影象的畫素資訊，所以 SVG 的檔案體積遠小於傳統的點陣圖檔案。
• SVG 的檔案畫出來的影象是向量圖，所以不會存在失真的問題，理論上支援任何級別的縮放。

SVG 和 VectorDrawable 的基本知識 

VectorDrawable 並沒有支援所有的 SVG 規範，目前只支援 PathData 和有限的 Group 功能。另外還有一個 clip-path 屬性來支援後面繪圖的區域。 所以對於使用 VectorDrawable 而言，我們只需要瞭解 SVG 的 PathData 規範即可（對應自定義控制元件中的繪圖中的Path路徑功能）。通過檢視 PathData 文件，可以看到 path 資料包含了一些繪圖命令，比如 ： 

• moveto 命令 M or m ，移動到新的位置 (大寫的命令為絕對座標命令；小寫的命令為相對座標命令， 下同) ，
• closepath 命令 Z or z，封閉路徑，從當前的位置畫一條直線到該路徑或者子路徑起始位置 
• lineto 命令 L or l，從當前的位置畫一條線到指定的位置 
• horizontal lineto 命令 H or h，水平畫一條直線到指定位置 
• vertical lineto 命令 V or v，垂直畫一條直線到指定位置 
• quadratic Bézier curve 命令 Q or q ，貝塞爾曲線
• smooth quadratic Bézier curveto 命令 T  光滑二次貝塞爾曲線
• elliptical arc  命令 A 橢圓弧

向量圖xml檔案

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <path
        android:pathData="M 100 100 L 300 100 L 200 300 z"
        android:strokeColor="#000000"
        android:strokeWidth="5"
        android:fillColor="#FF0000"
        />
</vector>

該示例的畫布大小為 400 X 400畫素（左上角座標為0,0； 右下角座標為400,400）， path 路徑為： 移動到 100、100 位置，然後畫一條線到絕對座標 300、100位置，然後畫一條線到絕對座標 200、300位置，然後畫一條線到該路徑的起始位置。這樣一個倒三角形就繪製出來了。 

需要注意的是， 在根元素 vector 上有兩個寬高設定，其中 viewport 是指向量圖裡面的畫布大小，而android:width 和 android:height 是指該向量圖所對應的 VectorDrawable 的大小。 
path 元素裡面的 pathData 就是向量圖的路徑資料，除此之外還可以設定其他屬性。

path 元素屬性設定說明

svg 路徑基本設定

svg 路徑邊框相關設定

當strokeLineJoin設定為 “miter” 的時候， 繪製兩條線段以銳角相交的時候，所得的斜面可能相當長。當斜面太長，就會變得不協調。strokeMiterLimit 屬性為斜面的長度設定一個上限。這個屬性表示斜面長度和線條長度的比值。預設是 10，意味著一個斜面的長度不應該超過線條寬度的 10 倍。如果斜面達到這個長度，它就變成斜角了。當 strokeLineJoin 為 “round” 或 “bevel” 的時候，這個屬性無效。 

svg 路徑顏色相關設定

根元素 vector 

根元素 vector 是用來定義這個向量圖的

基本設定

附加設定

group 節點 

有時候我們需要對幾個路徑一起處理，這樣就可以使用 group 元素來把多個 path 放到一起。 group 支援的屬性如下： 

例如 前面提到的三角形，通過 group 可以把其旋轉 90度。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <group
        android:name="name"
        android:pivotX="200"
        android:pivotY="200"
        android:rotation="90">
        <path
            android:fillColor="#FF0000"
            android:pathData="M 100 100 L 300 100 L 200 300 z"
            android:strokeColor="#000000"
            android:strokeWidth="5" />
    </group>
</vector>

使用建立好的 靜態svg 圖形

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <ImageView
        app:srcCompat="@drawable/triangle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="VectorDrawableCompat" />
</LinearLayout>