SVG图片在移动端的应用解决方案

近几年来SVG使用得越来越多，就连Android的官方库也加入VectorDrawable的支持。这个类就是用来支持向量图的。SVG图片在web端使用非常广泛，我第一次接触这个也是在做react-native的项目中使用的。当时我们要做一些动画，需要从一个形状变换成另一个形状，这种一般都是用矢量图来做的。当时设计师就给了我一些矢量图，于是我就开始研究这个东西。

在react-native中，有专门一个库叫react-native-svg来处理这个。不过当时要做两个SVG形状的动画变化，并不是任何一个形状都可以的，需要遵循一定的标准。设计师给我的两个SVG文件并不能转换。后来是我自己根据文件里的一些关键参数自己在代码里直接画出来后，再做转换动画。

最近我在做的native项目中，也遇到了要用SVG的图片。我们的项目里要从服务器下载SVG图片来展示。我们要实现的这些文件是需要服务器动态配置的，也就是说我们不能预先打包进我们的APP里。所以我们这里的要提供一个解决方案，跟图片JPG图片一样显示，缓存。

这个需求跟之前我遇到的那个需求是很不一样的，之前的是设计师已经定义好图片，我们工程师直接拿到文件在程序里展示，不需要考虑下载和缓存之类的。这种需求其实很简单，我们实际上大部分的需求就是这种需求，网上有很多库可以完成这种需求。把SVG图片跟JPG等普通图片一样使用，网上的方案还真不多，特别是iOS方面。。。。

要像普通图片一样使用，就要考虑下载，本地缓存，内存缓存。像这种需求，我们移动端都会使用专门的图片框架，像安卓端的glide，UIL等，iOS端的SDWebImage等。但是这种库它是默认都不会考虑SVG图片。但是我们最好还是像使用这种框架来处理SVG图片。最好的方式就是把SVG的支持集成到这些库中。好在这些库的优点就是容易扩展。

安卓端的解决方案

由于我们的项目是采用glide框架来处理图片，所以这里就只讲在这个框架集成SVG图片的展示。

实际上glide真的是一个很强大的库，怪不得那么多人用它（早几年我们都是用UIL），它在它的sample例子里就提供了SVG的展示支持svg。在这个例子里，采用的SVG解码方式是使用外部的解码库。它采用的解码库是androidsvg。这个库是web端移