從Android 8.0（API 26）之后慷蠕，Android開始引入矢量圖榜苫，矢量圖的常用格式是svg劫狠。在Android 8.0之前只使用位圖（格式是png）作為Android的圖片素材栅干，但是因為Android設備分辨率的多樣性新锈，導致位圖素材需要適配碍讨，矢量圖的引用可以使Android 8.0（包括Android 8.0）之后的版本不再需要適配治力，因為矢量圖不會失真，所以可以達到自適應的效果勃黍。

（1）位圖和矢量圖的概念

位圖又叫點陣圖或像素圖宵统，計算機屏幕上的圖是由屏幕上的發(fā)光點（即像素）構成的，每個點用二進制數據來描述其顏色與亮度等信息覆获，這些點是離散的马澈，類似于點陣。多個像素的色彩組合就形成了圖像弄息，稱之為位圖痊班。

矢量圖又叫向量圖，是用一系列計算機指令來描述和記錄一幅圖疑枯，一幅圖可以解為一系列由點辩块、線、面等到組成的子圖，它所記錄的是對象的幾何形狀废亭、線條粗細和色彩等国章。生成的矢量圖文件存儲量很小，特別適用于文字設計豆村、圖案設計液兽、版式設計、標志設計掌动、計算機輔助設計（CAD）四啰、工藝美術設計、插圖等粗恢。

位圖圖像與矢量圖像相比更容易模仿照片似的真實效果柑晒。位圖圖像的主要優(yōu)點在于表現(xiàn)力強、細膩眷射、層次多匙赞、細節(jié)多，可以十分容易的模擬出像照片一樣的真實效果妖碉。由于是對圖像中的像素進行編輯涌庭，所以在對圖像進行拉伸、放大或縮小等到處理時欧宜，其清晰度和光滑度會受到影響坐榆。位圖圖像可以通過數字相機、掃描或PhotoCD獲得冗茸，也可以通過其他設計軟件生成位圖圖像席镀，也稱點陣圖像或繪制圖像，是由稱作像素的單個點組成的夏漱。當放大位圖時愉昆，可以看見構成圖像的單個圖片元素。擴大位圖尺寸就是增大單個像素麻蹋，會使線條和形狀顯得參差不齊。但是如果從稍遠一點的位置觀看焊切，位圖圖像的顏色和形狀又是連續(xù)的扮授，這就是位圖的特點。矢量圖像专肪，也稱繪圖圖像刹勃，在數學上定義為一系列點與點之間的關系，矢量圖可以任意放大或縮小而不會出現(xiàn)圖像失真現(xiàn)象 嚎尤。

（2）阿里圖庫的使用

阿里圖庫的官網如下：

https://www.iconfont.cn/

我在阿里圖庫中隨意找了一張素材荔仁，如下：

圖片.png

點擊“SVG下載”一張矢量圖備用。點擊復制SVG獲取矢量圖數據如下：

<svg t="1570928688533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3192" width="200" height="200">
    <path d="M737.3 63.8H286.7C174.4 63.8 83 155.2 83 267.6v488.8c0 112.4 91.4 203.8 203.8 203.8h450.5c112.4 0 203.8-91.4 203.8-203.8V267.6C941 155.2 849.6 63.8 737.3 63.8zM887 756.4c0 82.6-67.2 149.7-149.7 149.7H286.7C204.2 906.2 137 839 137 756.4V267.6c0-82.6 67.2-149.7 149.7-149.7h450.5c82.6 0 149.7 67.2 149.7 149.7v488.8z" fill="#d4237a" p-id="3193"></path>
    <path d="M685.1 441v-38.8c0-34.4-28-62.4-62.4-62.4H584L556.1 312c-11.8-11.8-27.4-18.2-44.1-18.2-16.7 0-32.4 6.5-44.1 18.2L440 339.8h-37.8c-34.4 0-62.4 28-62.4 62.4V440L312 467.9c-24.3 24.3-24.3 63.9 0 88.2l27.9 27.9v38.8c0 34.4 28 62.4 62.4 62.4H441l26.9 26.9c12.2 12.2 28.1 18.2 44.1 18.2s31.9-6.1 44.1-18.2l26.9-26.9h39.7c34.4 0 62.4-28 62.4-62.4V583l26.9-26.9c24.3-24.3 24.3-63.9 0-88.2L685.1 441z m-6.5 81.7l-33.8 33.8c-4.4 4.4-6.9 10.4-6.9 16.7v49.5c0 8.2-6.9 15.1-15.1 15.1h-49.5c-6.3 0-12.3 2.5-16.7 6.9l-33.8 33.8c-5.8 5.8-15.6 5.8-21.4 0l-33.8-33.8c-4.4-4.4-10.4-6.9-16.7-6.9h-48.5c-8.2 0-15.1-6.9-15.1-15.1v-48.5c0-6.3-2.5-12.3-6.9-16.7l-34.8-34.8c-5.8-5.8-5.8-15.6 0-21.3l34.8-34.8c4.4-4.4 6.9-10.4 6.9-16.7v-47.6c0-8.2 6.9-15.1 15.1-15.1H450c6.3 0 12.3-2.5 16.7-6.9l34.8-34.8c5.6-5.6 15.7-5.6 21.3 0l34.8 34.8c4.4 4.4 10.4 6.9 16.7 6.9h48.5c8.2 0 15.1 6.9 15.1 15.1v48.5c0 6.3 2.5 12.3 6.9 16.7l33.8 33.8c5.8 5.8 5.8 15.6 0 21.4z" fill="#d4237a" p-id="3194"></path>
    <path d="M512.5 420.6c-50.4 0-91.4 41-91.4 91.4s41 91.4 91.4 91.4 91.4-41 91.4-91.4-41-91.4-91.4-91.4z m0 135.6c-24.4 0-44.2-19.8-44.2-44.2 0-24.4 19.8-44.2 44.2-44.2 24.4 0 44.2 19.8 44.2 44.2 0 24.4-19.9 44.2-44.2 44.2z" fill="#d4237a" p-id="3195"></path>
</svg>

（3）Vector Asset的使用

首先，鼠標選中app模塊乏梁，或者app的子文件（夾）次洼，F(xiàn)ile-->New-->Vector Asset，進入Vector Asset界面遇骑，界面如下：

圖片.png

矢量圖的制作有兩種素材類型：Clip Art（剪切圖）卖毁，Local file（本地SVG文件或者PSD文件）

【Clip Art（剪切圖）】

Name：xml文件名稱
Clip Art：可以選擇AS自帶的圖標

圖片.png

Size：設置矢量圖的大小
Color：設置矢量圖的顏色
Opacity：設置不透明度
Enable auto mirroring for RTL layout：為RTL布局啟用自動鏡像

【Local file（本地SVG文件或者PSD文件）】

Name：xml文件名稱
Size：設置矢量圖的大小
Opacity：設置不透明度
Enable auto mirroring for RTL layout：為RTL布局啟用自動鏡像
Path：選擇本地矢量圖（比如svg圖片）
從本地導入上面預留好的svg文件，如下：

圖片.png

導入android之后會生成ic_setting.xml文件落萎，這個文件里面的代碼也是自動生成的亥啦，代碼如下：

<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#d4237a" android:pathData="M737.3,63.8H286.7C174.4,63.8 83,155.2 83,267.6v488.8c0,112.4 91.4,203.8 203.8,203.8h450.5c112.4,0 203.8,-91.4 203.8,-203.8V267.6C941,155.2 849.6,63.8 737.3,63.8zM887,756.4c0,82.6 -67.2,149.7 -149.7,149.7H286.7C204.2,906.2 137,839 137,756.4V267.6c0,-82.6 67.2,-149.7 149.7,-149.7h450.5c82.6,0 149.7,67.2 149.7,149.7v488.8z"/>
    <path android:fillColor="#d4237a" android:pathData="M685.1,441v-38.8c0,-34.4 -28,-62.4 -62.4,-62.4L584,339.8L556.1,312c-11.8,-11.8 -27.4,-18.2 -44.1,-18.2 -16.7,0 -32.4,6.5 -44.1,18.2L440,339.8h-37.8c-34.4,0 -62.4,28 -62.4,62.4L339.8,440L312,467.9c-24.3,24.3 -24.3,63.9 0,88.2l27.9,27.9v38.8c0,34.4 28,62.4 62.4,62.4L441,685.2l26.9,26.9c12.2,12.2 28.1,18.2 44.1,18.2s31.9,-6.1 44.1,-18.2l26.9,-26.9h39.7c34.4,0 62.4,-28 62.4,-62.4L685.1,583l26.9,-26.9c24.3,-24.3 24.3,-63.9 0,-88.2L685.1,441zM678.6,522.7l-33.8,33.8c-4.4,4.4 -6.9,10.4 -6.9,16.7v49.5c0,8.2 -6.9,15.1 -15.1,15.1h-49.5c-6.3,0 -12.3,2.5 -16.7,6.9l-33.8,33.8c-5.8,5.8 -15.6,5.8 -21.4,0l-33.8,-33.8c-4.4,-4.4 -10.4,-6.9 -16.7,-6.9h-48.5c-8.2,0 -15.1,-6.9 -15.1,-15.1v-48.5c0,-6.3 -2.5,-12.3 -6.9,-16.7l-34.8,-34.8c-5.8,-5.8 -5.8,-15.6 0,-21.3l34.8,-34.8c4.4,-4.4 6.9,-10.4 6.9,-16.7v-47.6c0,-8.2 6.9,-15.1 15.1,-15.1L450,387.2c6.3,0 12.3,-2.5 16.7,-6.9l34.8,-34.8c5.6,-5.6 15.7,-5.6 21.3,0l34.8,34.8c4.4,4.4 10.4,6.9 16.7,6.9h48.5c8.2,0 15.1,6.9 15.1,15.1v48.5c0,6.3 2.5,12.3 6.9,16.7l33.8,33.8c5.8,5.8 5.8,15.6 0,21.4z"/>
    <path android:fillColor="#d4237a" android:pathData="M512.5,420.6c-50.4,0 -91.4,41 -91.4,91.4s41,91.4 91.4,91.4 91.4,-41 91.4,-91.4 -41,-91.4 -91.4,-91.4zM512.5,556.2c-24.4,0 -44.2,-19.8 -44.2,-44.2 0,-24.4 19.8,-44.2 44.2,-44.2 24.4,0 44.2,19.8 44.2,44.2 0,24.4 -19.9,44.2 -44.2,44.2z"/>
</vector>

以上代碼就是矢量圖在Android中的表示了。

（4）了解SVG

SVG 即可縮放矢量圖形 (Scalable Vector Graphics) 练链，是使用 XML 來描述二維圖形和繪圖程序的語言翔脱，其定義遵循 W3C 標準。

在 2003 年 1 月媒鼓，SVG 1.1 被確立為 W3C 標準届吁。使用 SVG 的優(yōu)勢在于：

SVG 可被非常多的工具讀取和修改(比如記事本)
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小隶糕，且可壓縮性更強
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的瓷产，同時也是可搜索的(很適合制作地圖)
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML

SVG 的 <path> 元素用于定義一些復雜的圖形，其定義在 W3 SVG Path枚驻。

<path> 可用的命令如下：

以上所有命令均允許小寫字母再登。大寫的字母是基于原點的坐標系(偏移量)尔邓，即絕對位置；小寫字母是基于當前點坐標系(偏移量)锉矢，即相對位置梯嗽。

在Android 中，矢量圖的繪制由pathData完成沽损。

[本章完...]