svg线上踩坑实录

3,246

由于svg有着可以动态缩放而不影响图片质量的特性,所以项目中只需要导入一张图片就可以代替之前的多张png图片了,可以减少apk体积。今天给大家分享一下我自己项目中的svg使用经验,希望能对大家有所帮助。

1.如何导入svg

选中drawable文件夹,右键->New->Vector Asset


接下来给图片取一个名字,在path中选择好图片在本地的路径,点击Next即可。这里勾选Override代表自定义图片大小,使用16 * 16的大小,当然也可以取消勾选,取消后就是原图默认大小,且修改框会被置灰不可点击。


接下来点击Finish就可以了


2.如何使用svg

和使用png类似,可以在xml布局中使用app:srcCompat="@drawable/图片名"的方式,而不是android:src的方式,这里和使用png略有不同。

也可以在代码中通过setImageResource(R.drawable.图片名)的方式使用

3.坑点一览

坑点一  不能通过TextView的drawableLeft这种方式来设置svg图片

我们经常使用TextView中drawableLeft的方式来实现一些最简单的图文混排效果,但是如果该图片是svg的,在5.0以上是没问题的,但是在4.x会直接crash。


报错日志如下:



坑点二  自定义view时图片id作为自定义参数时,会导致crash

我们自定义view时,如果设置了图片类型的自定义参数,然后尝试获取,代码如下:


如果图片是svg时,在4.x手机上则会直接crash,报找不到svg图片。这个问题是上线前一天才发现的,真是吓出了一身冷汗,现在想来都有点害怕。。。


解决方案是先try...catch尝试获取,如果获取不到再尝试使用反射进行获取


4.x手机一般使用反射都能获取到,但是我为了更加地安全,在使用这个id时还进行了判空,如果依然没有获取到,就使用默认的图片



坑点三  AS不支持有遮罩、带阴影的svg图片

用AS导入svg图片时,如果这个图片有阴影效果,则导入时AS会提示错误。但是如果你坚持使用还是可以导入成功的,只不过使用以后那些阴影效果就没有了。



坑点四  非矢量svg在部分手机上有显示的兼容性问题

有部分svg使用起来挺好的,但是在实际测试时,部分手机上没报错,但是显示的图片不正常。如下图,本来这个消息图片里是一个笑脸的,但是最终只显示了一只眼睛


经过和UI小姐姐360度全方面沟通,原来是这一块并未使用矢量图,后面UI小姐姐重新画了个图就解决了


总结

svg还有一些其他的技巧,比如可以在使用时通过tint属性来动态修改图片颜色,所以如果形状一样但是背景颜色不一样的图片也只需要导入一张即可。但是svg是一把双刃剑,有利也有弊,减少apk大小的同时也会带来很多的兼容性问题,特别是在没有svg经验初步使用的时候,一定要做好4.x手机的兼容性工作。建议使用时循序渐进,不要一次性把项目里的icon图都换成svg,先在不重要的页面试试点,万一出问题可以降低影响。另外svg图片不能太大,一般只考虑200 * 200以内的。也不能支持很丰富的颜色,所以只能是作为一些icon小图片来使用。