Android应用性能优化系列视图篇——SVG图片版本兼容及性能优化解决方案

SVG矢量图在图片表现力方面远远优于PNG位图，同时在可维护性和修改性方面也比位图要方便很多。尽管Android在5.0版本就引入了SVG图片的解决方案：Vector。然而，兼容性和性能方面却是差强人意，以至于至今都未能广泛使用。

本篇博客给大家带来一套较为不错的解决方案：SVG-Android（作者是本人。。。），相比于Vector，其在兼容性方面能够兼容到2.3以上，同时在性能方面，也有了质的提升。

开源库地址： https://github.com/MegatronKing/SVG-Android

PS：主要思想参考的微信的SVG解决方案。

一、SVG-Android为何而生

Android从5.0开始支持SVG图片，也就是VectorDarwable，但是相比于常用的PNG位图却存在着诸多问题。

1、性能方面

正常情况下，Vector的性能损耗是PNG的3倍左右，主要表现在解析xml和计算path两个阶段，如此大的性能差距，导致很少有公司会采用。

2、兼容性

由于android 5.0以上才出现VectorDarwable，为了兼容低版本，google推出了support-vector-drawable兼容库，但是实际效果并不好。首先，support-vector-drawable兼容库的最低版本是23.2.0，同时依赖于support-v4，如果support-v4版本过低，无法引入兼容库。其次，如果要在layout中直接使用vector，必须引入support-v7包，对于不使用v7包的应用来说，只能舍弃vector了。

3、程序包体积

尽管Vector文件相比于PNG图片，体积占用比较小，但是为了兼容低版本，打包时编译工具会将vector文件生成对应的PNG图片一并打包到apk中，这非常容易导致包体积膨胀。

4、实用性

虽然兼容库能兼容到低版本，但是在API使用方面就不那么容易了，我们很难直接在xml中直接使用，比如src=http://www.tuicool.com/articles/”@drawable/svg”，这大大制约了开发效率。

针对以上几种缺点，SVG-Android应运而生，完美支持2.3+!

二、SVG-Android性能比较

1、SVG-Android VS PNG

SVG-Android在decode阶段性能远远优于PNG位图，但是draw渲染阶段相对逊色了不少，后期会着力于优化这一块。

2、SVG-Android VS Vector

SVG-Android在decode阶段的性能遥遥领先，耗时大约在100-200us，比Vector高出至少10倍

SVG-Android在draw阶段也稍稍领先,大概节约了250us

总体来说，SVG-Android性能方面比PNG位图略低0.2-0.5倍，比Vector提高了2-3倍。但是对于对图片效果的呈现，SVG-Android比PNG好很多，完全不会因为尺寸拉伸而失真。

下图是100次加载的测试数据，单位us，很明显SVG-Android总体效果还是有优势的。

三、SVG-Android实现原理

1、预解析

从对Vector的性能测试数据来看，大部分耗时都在解析xml和绘制渲染两个阶段。为了提高性能，SVG-Android的做法是将部分耗时操作由运行时转移到编译前，也就是预解析。同时，由于svg文件的fillData的数据在Android中表现为Path，这部分计算量也是可以预先计算好的。

所以，SVG-Generator库会将Vector文件提前解析生成用于直接渲染的SVGRenderer类，另外fillData的每个指令数也会预先计算好，直接生成Java Path代码，SVGDrawable只要通过SVGRenderer就能画出svg图形了。

2、无感知

为了提高开发效率，我们希望开发者在使用SVG图片的时候能够和使用常规的PNG一样，可以在layout文件中直接使用@drawable/xxx，或者java代码中使用R.drawable.xxx。为了解决这个问题，我们采用偷天换日的方式，使用SVG-Generator生成一张空的shape文件，放入到drawable-anydpi中，同时会将对应的SVGDrawableConstantState预先注入到Resources的sPreloadedDrawables缓存中，拦截掉所有对shape的获取请求。

四、SVG-Android如何接入

1、SVG图片转换成Vector文件

由于Android只支持部分规范的SVG文件，所以我们还是按照官方的思路，先生成合法的Vector文件，这样还有个好处就是可以引用dimen和color，方面以后统一修改尺寸和颜色。

SVG图片转换成Vector文件有很多种方式。

方式一：使用svg2android网站转换 http://inloop.github.io/svg2android/

方式二：使用Android Studio 右键 -> New -> Vector Asset -> Local SVG File

2、SVG-Generator解析Vector自动生成代码

其次，在SVG-Generator模块的build.gradle文件中配置两个参数：存放Vector文件的目录，主项目模块目录。

接着，运行SVG-Generator的task run。可以在gradle的task列表中点击，也可以运行命令：gradle task run

最后，我们可以看到在指定的目录下生成了SVGRenderer类,类名就是图片名。同时，在drawable-anydpi生成了对应的空shape文件。

3、应用程序中引入SVG-Support包并装载SVGLoader

在应用程序的Application自定义类中，装载SVGLoader（上一步自动生成），只要一行代码！

五、Enjoy SVG-Android！

欢迎 fork & star！欢迎 fork & star！欢迎 fork & star！

本博客不定期持续更新，欢迎关注和交流：

http://blog.csdn.net/megatronkings