该系列文章作者是Android团队的Nick Butcher：

Understanding Android’s vector image format: VectorDrawable

Draw a Path: Rendering Android VectorDrawables

Using vector assets in Android apps

Vector Assets - Android Conference Talks



Vector Drawable制作工具：

Shape Shifter



Understanding Android’s vector image format: VectorDrawable

这篇文章主要介绍了vector：

vector相比非矢量图（png，jpeg，bmp，gif，webp等）的主要优点有三个

• resize后不失真，这样就可以避免为不同dpi出不同尺寸资源图，也不用为未来更大的dpi更新资源图

• 大小更小，作者距离I/O app中的一个图使用vector技术的话，尺寸能降低到原图的30%

• vector可以实现动画



vector的不足之处

• 需要decoding。decoding过程氛围inflation和drawing（如下）。这个过程的耗时取决vector图的复杂程度，对于静态的vector，这个过程执行一次后，其结果会缓存到一个Bitmap中；但是animated vector的话，就没法做缓存优化，因为它的属性是会变化并需要重绘。而像PNG这样的raster assets，只需要decode文件内容，并且这个过程如今已经经过了高度优化。

• inflation：读取vector文件并parse到一个VectorDrawable，生成paths, groups等model

• drawing：执行Canvas命令来绘制上面的model对象

• 适应性（suitability）。比较适合来描述像icon之类素材，很不适合去做像风景、人像等素材，这时候还是去用raster asset（如webp）。

• 缺乏工具。这就导致设计师和开发者之间有工作流上的gap。（官方工具好想还没有，有一些第三方工具：https://shapeshifter.design/）

• 个人再补充一个就是跨平台问题。针对Android平台的vector不能用到iOS上。



作者还谈到为什么Android没有选择SVG标准，而是要自定义格式：

SVG格式是web平台的工业标准，虽然有丰富、成熟的工具，但是它的标准太大，包括了很多复杂的特性，如执行任意JavaScript代码，blur&filter效果，嵌入其它图片（甚至动画gif）。Android毕竟是电源受限的移动设备，全面支持SVG不现实

Android目前支持了SVG中的path。

此外通过自定义格式，VectorDrawable可以和Android平台目前的特性实现集成，比如@colors, @dimens, @strings，使用theme属性，AnimatedVectorDrawable使用系统中的Animator等。



VectorDrawable的兼容性

这里主要介绍了对SVG path标准的支持情况。



Draw a Path: Rendering Android VectorDrawables

这篇文章主要介绍了VectorDrawable的用法：

• 基本用法，如颜色、tint、和color resource集成、和theme集成、ColorStateLists、Gradients

其中还包括一些示例代码



Using vector assets in Android apps

这篇文章主要将如何使用vector资源，主要面临的问题是兼容性问题，其核心点是：务必使用VectorDrawableCompat而不是VectorDrawable！



Vector Assets - Android Conference Talks

最后这个视频是本系列文章的作者Nick Butcher带来的关于Android平台Vector素材的讲解视频。这个视频的内容除了将上面三篇文章的内容讲了一遍，还介绍了如下的内容：

• Android Studio中的SVG To VD工具，编辑工具

• Sketch工具中如何导出合适的SVG，以及其插件svgo compressor以及插件的配置（使用SVG Tiny 1.2 Profile，以保证Android平台的兼容性）

• 推荐尺寸小于200 * 200 dp，path char数量小于800（Android Lint中包含了对path char超过800的警告规则）

• 使用Shape Shifter工具将VD转换为SVG，再用Sketch修改后输出新的SVG

• 与设计沟通，降低SVG中不必要的细节来减少VD的复杂度

• path morphing的应用，及会碰到的坑（平台限制能morphing的两个path的command数量和类型必须相同，否则会报错），以及使用Shape Shifter搞定这个事情



总结

2016年的时候在Alex Lockwood的博客文章介绍这个技术，还在团队内部做了介绍，但后来由于一些原因没有应用起来。今天回过头来把Nick和Alex的系列文章和工具review了一遍后，发现Android平台应用这个技术已经不存在太大门槛，并且随着Shape Shifter、Sketch和Android Studio等工具链的补齐，设计师到开发者之间已经没有太大的gap。

还有一个问题是Android和iOS平台的兼容性。iOS平台没有native SVG的支持（WebKit的SVG支持不算是native支持），也需要使用到第三方库（如SVGKit）。那么这里的问题来了：Android VD仅支持SVG Path标准，那SVGKit能否实现Android兼容的SVG的复用呢？此外，Sketch、svgo这些工具是否做了跨平台标准的兼容？这些都是实际落地的问题，目前我还没有明确答案。这个问题在做跨平台app时需要考虑。



总体上看，跨平台实现SVG技术（或者衍生技术）目前来说是可行的，实际应用中的坑也不会很大。