圖片壓縮知識梳理(5) VectorDrawable 簡介

1、爲何要使用 VectorDrawable

雖然目前已經有不少針對於PNG/JPG的壓縮算法，可是這些算法最終的壓縮效果仍然是有限的，所以，人們開始嘗試尋找一種新的圖片格式來替代它們，今天咱們所介紹的VectorDrawable就是Android平臺上一種新的圖片存儲格式，它採用了一種矢量圖形的思想。

2、光柵圖像（Raster Image）

在介紹VectorDrawable以前，咱們先簡單瞭解一下最多見的光柵圖像。

光柵圖像也叫作位圖、點陣圖、像素圖，它是有一個個小的像素點組成，而每一個像素點由經過一系列的顏色通道（RGB）來組合成它的顏色，咱們平時談到的PNG、JPG就是光柵圖像的子類。

當咱們在應用中使用這種類型的圖片時，會面臨以下幾個問題：

• 圖片的大小會隨着像素個數的增長而線性增大
• 圖片的壓縮率會受到圖片中各像素點的自類似性影響，其表現爲：當圖片中相同顏色的像素點越多，那麼壓縮率就越高。
• 爲了適應多種機型的分辨率，咱們還須要在APK中內置多種分辨率的圖片，這無形中就增長了APK的大小。

3、矢量圖形（Vector Image）

3.1 矢量圖形的基本概念

爲了解決以上的幾個問題，矢量圖形的想法就被提出了：它包含的不是圖片中的各個像素點的描述，而是對於圖片的繪製命令，當咱們解析圖片的時候，會運行這一系列的繪製命令來最終獲得光柵圖像。

3.2 SVG 和 VectorDrawable

SVG就是矢量圖形的一種具體實現，它包含了一系列的繪製命令，例以下圖，咱們使用xml文件的多個標籤進行組合，最終把圖像描述出來：

然而 SVG的缺點是它包含了許多在 Android中並沒必要要的組件，而 Android平臺又很是在乎 APK的大小，所以它對 SVG的協議進行了裁剪，定義了本身的矢量圖形格式 - VectorDrawable。

VectorDrawable的工做原理和SVG相似，可是它只包含SVG繪製命令的一小部分。其整個處理過程爲加載VD，對其進行柵格化處理，使用柵格化處理後的Bitmap，下圖就是一個VectorDrawable的例子：

VectorDrawable和光柵圖像相比有如下幾點優點：

• 在aapt打包的過程當中會把VectorDrawable所對應的xml文件轉換爲二進制流的格式，這樣就能夠進一步縮減文件的大小
• 因爲VectorDrawable是經過繪製的命令來描述一個圖像，所以它能作到一個文件，適配多種分辨率的機型
• 能夠對VectorDrawable中的各個部分添加動畫，也就是AnimatedVectorDrawable

4、VectorDrawable 的適用範圍

雖說VectorDrawable有不少的優勢，可是也有它的侷限性，例以下面這兩點：

4.1 適用於較小的圖片

在Android當中，VectorDrawable到光柵圖像的柵格化處理是經過CPU進行的。而這一光柵處理的時間和圖片的大小成正比，所以，若是圖片很大，那麼加載的時間將會很長，這種狀況就不適合使用VectorDrawable了。

4.2 適用於較爲簡單的圖片

VectorDrawable還有一點限制，就是你只能經過一系列簡單的圖形（矩形、圓形、弧形）和連線來組成最終的圖像，所以，若是圖形很複雜，那麼就須要更多的命令來描述這個圖形，最終就致使了文件的增大和加載時間的增長，所以，儘可能只用VectorDrawable來表示較爲簡單的圖形。

5、簡化 VectorDrawable 的 Path

在使用VectorDrawable的時候，咱們通常是先產生一個原始的SVG圖像，再經過第三方工具將它轉換成爲Vector格式。在這一轉換的過程中，最須要關注的一點就是轉換後所生成的vector文件中的pathData屬性：

• 當須要描述一個較爲複雜的圖像時，pathData一般會變得很是大。有的時候，僅僅對SVG圖像進行一些微小的調整，均可能使得pathData發生很大的變化。
• 應用程序在須要將一個VectorDrawable所描述的圖像展示在屏幕上以前，首先會經過Path進行柵格化處理，這一處理過程所耗費的時間而資源將會隨着pathData的增大而增長。

也就是說，使用VectorDrawable所耗費的成本而pathData的大小是成正比的，所以咱們應該儘量地簡化 VectorDrawable的Path數據。

6、在必要時使用 ShapeDrawable

對於某些圖像，若是咱們能用原始的圖形（圓形、矩形、橢圓等等）來替換Path，那麼將有可能進一步的減少柵格化過程所耗費的性能，以及圖片文件的大小。

ShapeDrawable就是一種很好的替代方式，它使用一系列簡單的圖形來描述圖像，例以下面這樣：

7、文獻

Image compression - How VectorDrawable works