android开发之svg全面总结

VectorDrawable

Vector Drawable是Google从Android 5.0开始引入的一个新的Drawable子类，能够加载矢量图（低版本中需要做兼容，如何兼容低版本下文提及）,android中vector Drawable通过配置xml再设置到要使用的控件上，不必进行多屏幕分别率适配，只需要创建一份，不需要通过分辨率来设置不同的图片，可以大幅减少图像的体积，vector Drawable有些类似svg文件，但是Android中的Vector并不是支持全部的SVG语法

属性说明

• width, height：图片的宽高。可手动修改到需要尺寸；
• viewportHeight, viewportWidth：对应将上面height width等分的份数。以上图为例，表示将长宽都为24dp的图形均分为24x24的网格，在这个网格中就可以很方便地描述点的坐标，图像就是这些点连接起来构成的。
• fillColor：填充颜色。
• pathData：描述的网格中作画的路径。

兼容处理

Vector Drawable是Android 5.0才提出的，所以对于低于5.0版本是需要做兼容处理的，低版本做vector drawables兼容实际上是在运行时将根据屏幕密度vector drawables转化成bitmap
兼容设置：
打开app module的build.Gradle，在defaultConfig 添加：
gradle 版本低于 2.0

image.png

gradle 版本高于 2.0

image.png

添加appcompat的支持

image.png

实战1：在控件中使用

ImageView通过设置src

image.png

通过Java代码设置src

image.png

image.png

使用vectordrawable设置background (包括TextView的CompoundDrawable)
不管是使用xml还是Java，都要求View是AppCompatView,而且vectorDrawable不能直接使用, 必须依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable这里选择selector再包一层使用，另外不能忘记在Activity设置 AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);（如上图）

image.png

image.png

image.png

image.png

image.png

image.png

动态的SVG

svg动画库
https://github.com/geftimov/android-pathview

svg获取

通过iconfont网站
http://www.iconfont.cn/

image.png

使用系统的Material Icons.

image.png

image.png

image.png

svg神兵利器

• svg生成VectorDrawable代码
  https://inloop.github.io/svg2android/

image.png

• png转svg
  使用软件vector Megic
  软件下载地址：http://pan.baidu.com/s/1slblMDR
  
  

  image.png

源码

https://github.com/ZhongXiaoHong/SvgPractice

参考：

https://www.androidhive.info/2017/02/android-working-svg-vector-drawables/
http://www.jianshu.com/p/e3614e7abc03
http://www.jianshu.com/p/0555b8c1d26a