前言
SVG，全名Scalable Vector Graphics可伸缩矢量图形，这种图像格式在前端已经是非常广泛了，矢量图像：SVG是W3C退出的一种开放标准的文本格式的矢量图形描述语言，他也是基于XML的、专门为网络而设计的图像格式，SVG是一种采用XML来描述而为图形的语言，所以它可以直接打开xml文件来修改和编辑位图图像：位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式
SVG的语法
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()
Z = closepath()：关闭路径（会自动绘制链接起点和终点）
Part 1、基本用法
Vector在Android中指代的是Vector Drawable,也就是Android中的矢量图。Vector图像刚发布的时候，只支持Android5.0+的，自从AppCompat 23.2之后，Vector可以使用于Android2.1以上的所有系统，只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了。但是这里的兼容并非真实的兼容，而是在低版本中生成PNG图片来替代SVG
<vector xmlns:android="/apk/res/android"android:width="200dp"android:height="200dp"android:viewportHeight="500"android:viewportWidth="500"><pathandroid:name="square"android:fillColor="#000000"android:pathData="M100,100 L400,100 L400,400 L100,400 z"/></vector>
tips:
1、android:width/android:height ： 矢量图形的大小
2、android:viewportwidth/android:viewportheight ： 定义图像被划分的比例大小，例如例子中的500，即把200dp大小的图像划分成500份
Vector Drawable相对于普通的Drawable来说，有以下几个好处：
（1）Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片。
（2）Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一。
（3）使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像 功能强大。
（4）不用写很多代码就可以实现非常复杂的动画 成熟、稳定，前端已经非常广泛的进行使用了。
下面推荐几个网址
SVG编辑器：http://editor.method.ac/
将SVG文件转化为VectorDrawable xml文件：http://inloop.github.io/svg2android/
众多SVG的图片：/
效果~
似乎看上去很简单，但当你要使用兼容矢量图的时候需要在build.gradle文件添加
//在gradle2.0及以上：android {defaultConfig {vectorDrawables.useSupportLibrary = true}}//在gradle 1.5以前android {defaultConfig {// Stops the Gradle plugin’s automatic rasterization of vectorsgeneratedDensities = []}// Flag to tell aapt to keep the attribute ids aroundaaptOptions {additionalParameters "--no-version-vectors"}}
这里只能用于AppCompatImageView或者AppCompatImageButton或其子类,而且必须在app:srcCompat标签中，如果你要使用TextView、Button的话就会报错，需要将图片依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable进行显示
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:drawable="@drawable/chick"/></selector>
在23.4.0之后需要手动开启
static {AppCompatDelegate.setCompatVectorFromSourcesEnabled(true);}
这样便能在TextView、Button使用兼容的矢量图了
<android.support.v7.widget.AppCompatTextViewandroid:layout_width="150dp"android:layout_height="150dp"android:drawableLeft="@drawable/chick"/>
接下来说一下VectorDrawable的性能问题：
1）当Vector比较简单时，其效率是一定比Bitmap高的，所以，为了保证Vector的高效率，Vector需要更加简单，PathData更加标准、精简，当Vector图像变得非常复杂时，就需要使用Bitmap来代替了
2）Vector适用于ICON、Button、ImageView的图标等小的ICON，或者是需要的动画效果，由于Bitmap在GPU中有缓存功能，而Vector并没有，所以Vector图像不能做频繁的重绘
3）Vector图像过于复杂时，不仅仅要注意绘制效率，初始化效率也是需要考虑的重要因素
Part 2、SVG的高级动画
效果~
tips:
1、画出相应图形
<vector xmlns:android="/apk/res/android"android:width="150dp"android:height="24dp"android:viewportHeight="24"android:viewportWidth="150"><pathandroid:name="search"android:pathData="M141,17 A9,9 0 1,1 142,16 L149,23"android:strokeAlpha="0.8"android:strokeColor="#00FF00"android:strokeLineCap="round"android:strokeWidth="4"/><pathandroid:name="bar"android:pathData="M0,23 L149,23"android:strokeAlpha="0.8"android:strokeColor="#7700FF00"android:strokeLineCap="square"android:strokeWidth="4"/></vector>
2、设置animated-vector动画
<animated-vectorxmlns:android="/apk/res/android"android:drawable="@drawable/searchbar"><targetandroid:name="search"android:animation="@animator/anim_searchbar_in"/><targetandroid:name="bar"android:animation="@animator/anim_searchbar_out"/></animated-vector>
这里target的name值指代着图形path的name值
3、为每个path设置动画
anim_searchbar_in
<objectAnimatorxmlns:android="/apk/res/android"android:duration="1000"android:propertyName="trimPathStart"android:repeatCount="infinite"android:repeatMode="reverse"android:valueFrom="0"android:valueTo="1"android:valueType="floatType"/>
anim_searchbar_out
<objectAnimatorxmlns:android="/apk/res/android"android:duration="1000"android:propertyName="trimPathStart"android:repeatCount="infinite"android:repeatMode="reverse"android:valueFrom="1"android:valueTo="0"android:valueType="floatType"/>
效果~
可以仿照上面来定义自己的SVG动画
效果~
tips:
1、定义图形
<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="/apk/res/android"android:viewportWidth="400"android:viewportHeight="400"android:width="300px"android:height="300px"><group android:name="star_group"android:pivotX="200"android:pivotY="200"android:scaleX="1.0"android:scaleY="1.0"><pathandroid:name="star"android:fillColor="#FF00FF"android:pathData="M 200.30535,69.729172C 205.21044,69.729172 236.50709,141.52218 240.4754,144.40532C 244.4437,147.28846 322.39411,154.86809 323.90987,159.53312C 325.42562,164.19814 266.81761,216.14828 265.30186,220.81331C 263.7861,225.47833 280.66544,301.9558 276.69714,304.83894C 272.72883,307.72209 205.21044,268.03603 200.30534,268.03603C 195.40025,268.03603 127.88185,307.72208 123.91355,304.83894C 119.94524,301.9558 136.82459,225.47832 135.30883,220.8133C 133.79307,216.14828 75.185066,164.19813 76.700824,159.53311C 78.216581,154.86809 156.16699,147.28846 160.13529,144.40532C 164.1036,141.52218 195.40025,69.729172 200.30535,69.729172 z"/></group></vector>
这里的group标签的作用：1、对Path进行分组，由于我们后面需要针对Path进行动画，所以可以让具有同样动画效果的Path在同一个Group中。2、拓展动画效果，单个的path标签是没有translateX和translateY属性的，因此无法使用属性动画来控制path translateY，而group标签是有的，所以我们需要先将相关的path标签元素包裹在一个个的group标签中。
2、设置animated-vector动画
<animated-vector xmlns:android="/apk/res/android"android:drawable="@drawable/vd_star" ><targetandroid:name="star_group"android:animation="@animator/star_rotate" /><targetandroid:name="star"android:animation="@animator/star_shap" /></animated-vector>
