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

澤毛發表於2017-12-21

一、為什麼要使用 VectorDrawable

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

二、光柵影像(Raster Image)

在介紹VectorDrawable之前,我們先簡單瞭解一下最常見的光柵影像。

光柵影像也叫做點陣圖、點陣圖、畫素圖,它是有一個個小的畫素點組成,而每個畫素點由通過一系列的顏色通道(RGB)來組合成它的顏色,我們平時談到的PNGJPG就是光柵影像的子類。

當我們在應用中使用這種型別的圖片時,會面臨如下幾個問題:

  • 圖片的大小會隨著畫素個數的增加而線性增大
  • 圖片的壓縮率會受到圖片中各畫素點的自相似性影響,其表現為:當圖片中相同顏色的畫素點越多,那麼壓縮率就越高。
  • 為了適應多種機型的解析度,我們還需要在APK中內建多種解析度的圖片,這無形中就增加了APK的大小。

三、向量圖形(Vector Image)

3.1 向量圖形的基本概念

為了解決以上的幾個問題,向量圖形的想法就被提出了:它包含的不是圖片中的各個畫素點的描述,而是對於圖片的繪製命令,當我們解析圖片的時候,會執行這一系列的繪製命令來最終得到光柵影像。

3.2 SVG 和 VectorDrawable

SVG就是向量圖形的一種具體實現,它包含了一系列的繪製命令,例如下圖,我們使用xml檔案的多個標籤進行組合,最終把影像描述出來:

圖片壓縮知識梳理(5)   VectorDrawable 簡介
然而SVG的缺點是它包含了許多在Android中並不必要的元件,而Android平臺又非常在意APK的大小,因此它對SVG的協議進行了裁剪,定義了自己的向量圖形格式 - VectorDrawable

VectorDrawable的工作原理和SVG類似,但是它只包含SVG繪製命令的一小部分。其整個處理過程為載入VD,對其進行柵格化處理,使用柵格化處理後的Bitmap,下圖就是一個VectorDrawable的例子:

圖片壓縮知識梳理(5)   VectorDrawable 簡介
VectorDrawable和光柵影像相比有以下幾點優勢:

  • aapt打包的過程中會把VectorDrawable所對應的xml檔案轉換為二進位制流的格式,這樣就可以進一步縮減檔案的大小
  • 由於VectorDrawable是通過繪製的命令來描述一個影像,因此它能做到一個檔案,適配多種解析度的機型
  • 可以對VectorDrawable中的各個部分新增動畫,也就是AnimatedVectorDrawable

四、VectorDrawable 的適用範圍

雖然說VectorDrawable有很多的優點,但是也有它的侷限性,例如下面這兩點:

4.1 適用於較小的圖片

Android當中,VectorDrawable到光柵影像的柵格化處理是通過CPU進行的。而這一光柵處理的時間和圖片的大小成正比,因此,如果圖片很大,那麼載入的時間將會很長,這種情況就不適合使用VectorDrawable了。

4.2 適用於較為簡單的圖片

VectorDrawable還有一點限制,就是你只能通過一系列簡單的圖形(矩形、圓形、弧形)和連線來組成最終的影像,因此,如果圖形很複雜,那麼就需要更多的命令來描述這個圖形,最終就導致了檔案的增大和載入時間的增加,因此,儘量只用VectorDrawable來表示較為簡單的圖形。

五、簡化 VectorDrawable 的 Path

在使用VectorDrawable的時候,我們一般是先產生一個原始的SVG影像,再通過第三方工具將它轉換成為Vector格式。在這一轉換的過程當中,最需要關注的一點就是轉換後所生成的vector檔案中的pathData屬性:

  • 當需要描述一個較為複雜的影像時,pathData通常會變得非常大。有的時候,僅僅對SVG影像進行一些微小的調整,都可能使得pathData發生很大的變化。
  • 應用程式在需要將一個VectorDrawable所描述的影像展現在螢幕上之前,首先會通過Path進行柵格化處理,這一處理過程所耗費的時間而資源將會隨著pathData的增大而增加。

也就是說,使用VectorDrawable所耗費的成本而pathData的大小是成正比的,因此我們應該儘可能地簡化 VectorDrawablePath資料

六、在必要時使用 ShapeDrawable

對於某些影像,如果我們能用原始的圖形(圓形、矩形、橢圓等等)來替換Path,那麼將有可能進一步的減小柵格化過程所耗費的效能,以及圖片檔案的大小。

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

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

七、文獻

Image compression - How VectorDrawable works

相關文章