图片压缩知识梳理(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