- 原文地址： Understanding Android’s vector image format: VectorDrawable
- 原文作者： Nick Butcher
- 译文出自： 掘金翻译计划
- 本文永久链接： github.com/xitu/gold-m…
- 译者： HarderChen
- 校对者： gs666 , Qiuk17
因为 Android 设备通常具有不同的尺寸、形状和屏幕像素密度，所以我更喜欢用与分辨率无关的矢量资源（vector assets）。但它们究竟是什么？有什么益处？需要什么成本？什么时候应该使用它们？怎么创建和使用它们？在这一系列文章中，我将会探讨这些问题并解释为什么在你的应用中应该大量地使用矢量资源（vector assets）以及怎样最大限度地使用它们。
位图 vs 矢量图
大多数的图像格式（png、jpeg、bmp、gif 和 webp 等等）都是位图格式，这意味着它们将图像绘制为一个固定的像素网格。因此，对于固定分辨率的位图，我们只了解每个像素的颜色，却不理解其中包含的内容。然而，矢量图像是通过在抽象大小的画布上定义一系列形状来描绘图像。
为什么使用矢量图？
矢量资源有三大好处，分别是：
- 好用
- 占用资源少
- 动态
好用
矢量图可以优雅的调整大小；这是因为它们将图像绘制在抽象大小的画布上，你可以放大或缩小画布，然后重新绘制对应尺寸的图像。但是，位图资源在重新调整大小后会变得很糟糕。缩小栅格资源是 OK 的（意味着会丢失一些信息），但是放大它们会导致模糊或者色带状的失真，因为它们必须插入缺失的像素。
放大的位图（左）与放大的矢量图（右）
这就是为什么在 Android 上我们需要为不同密度的屏幕提供多个版本的位图资源：
- res/drawable-mdpi/foo.png
- res/drawable-hdpi/foo.png
- res/drawable-xhdpi/foo.png
- …
在需要的时候，Android 会选择最接近的较大密度并将其缩小。随着设备具有越来越高的屏幕密度，应用开发者对相同的资源必须不断创建、囊括、转换更多的版本。需要注意的是，许多现代设备的屏幕密度并不是精确的（例如，Piexl 3 XL 是 552 dpi，介于 xxhdpi 和 xxxhdpi 之间），所以资源通常会被缩放。
因为矢量资源可以优雅的调整大小, 你只需包含单个资源，它就能在具有任何屏幕密度的设备上呈现。
占用资源少
矢量资源通常会比位图资源占用资源更少，因为你只需要提供一个版本，而且矢量资源很好被压缩。
例如， Google I/O app 在 这次提交 中通过将一些 PNG 图标从位图转换成矢量图，节约了 482 KB。尽管听上去不是很多，但这仅仅是对小图像而言；更大的图片（如插图）会节省更多。
这张 插图 来自于上一年的 Google I/O 示例 APP 流程：
对于插图，矢量是很好的选择
我们无法用 VectorDrawable 替换它，因为当时没有广泛支持渐变（现在已经支持），所以我们不得不发布一个位图版本 😔。如果我们能够使用矢量，那么这将只有其大小的 30%，而且会取得更好的效果：
- Raster: Download Size = 53.9KB (Raw file size = 54.8KB)
- Vector: Download Size = 3.7KB (Raw file size = 15.8KB)
请注意，虽然 Android App Bundle 通过向不同设备提供其所需的密度资源带来相同的好处，但 VectorDrawable 通常会更小，并且无需创建更大的位图资源。
动态
由于矢量图像描述它们的内容并不是将自己”扁平化“为像素，这为动画、交互或动态主题等有趣的新可能打开了新大门。将来会写更多关于这方面的文章。
矢量会保持图像结构，所以里面的单个元素的属性可以发生改变而被用来制作主题或动画。
权衡
矢量确实也有一些需要考虑的缺点：
解码
正如前面所诉，矢量图像描述了自己包含的内容，因此在使用前需要对它们进行 inflate 和 draw 操作。
在渲染之前解码矢量所涉及的步骤
有如下两步：
-
Inflation
。你的矢量文件必须被读取和解析成为
[VectorDrawable](https://developer.android.com/reference/android/graphics/drawable/VectorDrawable)对你声明的 paths 和 groups 进行建模。 -
Drawing
。然后必须通过执行
Canvas绘制命令来绘制这些模型对象。
这两步的执行时间与矢量的复杂性和你执行的操作类型成正比。如果你使用非常复杂的形状，将会花费更长的时间将之解析成为
[Path](https://developer.android.com/reference/android/graphics/Path)
。类似地，更多的绘制操作将花费更长的时间来执行（还有一些更耗费时间的，例如剪辑操作）。
对于静态矢量，绘图阶段只需执行一次，然后可以缓存为
Bitmap
。对于动画矢量，就无法进行此优化，因为它们的属性必然会发生变化，需要重新绘制。
将其与像 PNG 这样只需要解码文件内容的位图资源进行比较，这些资源随着时间的推移已经经过高度优化。
这是位图与矢量图的基本权衡。矢量图提供上述好处，但代价是渲染更加昂贵。在 Android 早期, 设备性能差一点，屏幕密度差别不大。现在，Android 设备性能越来越好，屏幕密度却各不相同。因此我认为所有 APP 都应当使用矢量资源。
适应性
由于格式的性质，矢量在在描述一些矢量资源（如简单图标等）时 非常有用 。它们在编码摄影类型图像时非常糟糕，因为这种图像内容很难被描述为一系列形状的组合。位图格式（如 webp）此时会更有效率。这当然是一个范围，取决于你的资源的复杂度。
转变
据我所知，没有设计工具能够直接创建
VectorDrawable
s ，这意味着有一个来自其他格式的转换步骤。 这会使设计人员和开发人员之间的工作流程复杂化。我们将在以后的文章中深入讨论这个主题。
为什么不用 SVG？
如果你曾经使用矢量图像格式，你可能会遇到网络上的行业标准 SVG 格式（可缩放矢量图形）。它是强大、成熟的建模工具，它同时也是一个强大的标准。它包括许多复杂的功能，如执行任意 javascript，模糊和滤镜效果或嵌入其他图像，甚至 GIF 动画。Android 在受限制的移动设备上运行，因此支持整个 SVG 规范并不是一个现实的目标。
