SVG的全称是Scalable Vector Graphics（可缩放矢量图形)，它不会因为图像放大而失真，且占用内存小，同时搭配Path动画，能够实现一些意想不到的效果。
Android中的SVG图像又叫Vector图像，它是对原生的SVG进行了简化，利用path来实现绘制。

1、VetcorDrawable

1.1、Vector图形制作

我们可以在svg编辑网页上制作好SVG图像，然后通过Android Studio中的Vector Asset Studio，将SVG转换成Vector。

转换后代码格式大致如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="100dp"
    android:viewportWidth="100"
    android:viewportHeight="50">

    <path
        android:name="bar"
        android:pathData="M50,23 L100,25"
        android:strokeWidth="2"
        android:strokeColor="@android:color/darker_gray" />
</vector>

1.2、vector标签属性

用于vector图形是矢量图，即无限放大也不会失真，所以要指定其宽高。
同时图形中的坐标值，也不能依据宽高的具体值大小，只是就引入了划分比例大小，即viewportXXX。

举例说明：本例中，将大小为200dp x 100dp的图像，划分出100 x 50个小份，每份尺寸为2dp x 2dp；而android:pathData属性中的坐标值，就是相对于这100 x 50个小份所决定的。如坐标(50,50)，就对应本图形底部中点。

1.3、path标签属性

1、常用属性
path标签具有以下几个常用属性。

2、 android:trimPathStart
指定路径的开始位置，取值为0～1。当取值为0时，表示从头部开始;当取值为1时，整条路径不可见。

3、 android:trimPathEnd
指定路径的结束，取值为0～1。当取值为0时，整条路径不可见，当取值为1，整条路径显示完整。当截取的路径超出范围时，会从开始位置继续累计。

4、 android:trimPathOffset
指定结果路径的偏移距离，取值为0～1。当取值为0时，不进行位移，当取值为1，位移整条路径长度。

5、android:pathData
指定图形内容，通过一系列指令和坐标，自动生成对应的图像。

1.4、Vector的常用语法

即Vector中path标签下android:pathData属性里字符串的语法。格式如下：

其中A指令绘制一条弧线，各个参数含义如下：

在使用上面的指令时，需要注意以下几点。
1、坐标轴以(0,0)为中心，X轴水平向右，Y轴水平向下。
2、所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系。
3、指令和数据间的空格可以省略。
4、同一指令出现多次可以只用一个。

1.5、group标签

group标签主要是将同一个Vector文件中，多个Path组成的图像当做一个整体，便于动画执行。包含以下属性：

1.6、使用VetcorDrawable

gradle文件中配置：

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

ImageView or ImageButton

app:srcCompat="@drawable/vector_image"

Button

通过selector来进行设置，并开启下面的设置

static{
    AppCompatDelegate.setCompatVetcorFromResourcesEnabled(true);
}

2、AnimatedVectorDrawable

AnimatedVectorDrawable与VectorDrawable名字上多了一个Animated，这也是它们自己最大的区别，AnimatedVectorDrawable 拥有执行动画的能力。

2.1、AnimatedVectorDrawable使用

1、创建vector图片

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <group android:name="left">
        <path
            android:fillColor="#8C9EFF"
            android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3z" />
    </group>
    <group android:name="right">
        <path
            android:fillColor="#8C9EFF"
            android:pathData="M14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z" />
    </group>
</vector>

2、创建左右动画
左箭头动画

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/anticipate_overshoot"
    android:propertyName="translateX"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="10"
    android:valueType="floatType"/>

右箭头动画

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/anticipate_overshoot"
    android:propertyName="translateX"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="-10"
    android:valueType="floatType"/>

3、配置动画粘合剂

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_vector_arrows">
    <target
        android:name="left"
        android:animation="@animator/vector_left_anim" />
    <target
        android:name="right"
        android:animation="@animator/vector_right_anim" />
</animated-vector>

4、为ImageView设置appCompat

<ImageView
     android:layout_width="100dp"
     android:layout_height="100dp"
     android:onClick="animatorStart"
     app:srcCompat="@drawable/anim" />

5、使用动画

public void animatorStart(View view) {
    ImageView imageView = (ImageView) view;
    AnimatedVectorDrawable drawable = (AnimatedVectorDrawable)imageView.getDrawable();
    drawable.start();
}

我们此时会发现，创建一个Vector动画步骤也太繁琐了吧，没关系，谷歌工程师早就帮我们想好了解决办法，通过合并资源，轻松完成上面前3步。

2.2、轨迹动画

这是一种比较常见的动画，比如以下几种（请原谅我盗图）：

451f72f752ee777e3df07be3223b47ea.gif

19101361568977583839781636.gif

看起来是不是很炫酷，其实实现起来很简单：
将objectAnimator动画文件android:valueType属性设置为floatType，android:propertyName属性设置为trimPathStart，trimPathEnd，trimPathOffset之一，并指定android:valueTo和android:valueTo。
当动画执行后，会不断修改上述3个属性的值，以实现各种轨迹动画效果。这3个属性含义上文已经解释，这里就不再提及。

知道了上面的内容，就能很好理解属性动画的定义产生的不同效果了：

1、使用trimPathStart属性，valueFrom:0，valueTo:1
线条从起点缩短到终点，即初始截断部分是0%，从起点开始逐渐扩大到终点，达到100%。

2、使用trimPathStart属性，valueFrom:1，valueTo:0
线条从终点增长到起点，即初始截断部分是100%，从终点开始逐渐缩小到起点，达到0%。

3、使用trimPathEnd属性，valueFrom:0，valueTo:1
线条从起点增长到终点，即初始截断部分是100%，从起点开始逐渐缩小到终点，达到0%。

4、使用trimPathEnd属性，valueFrom:1，valueTo:0
线条从终点缩短到起点，即初始截断部分是0%，从终点开始逐渐扩大到起点，达到100%。

2.3、路径动画

路径动画，相对来说就麻烦一下，但麻烦的在于制作，不是使用，使用时，只需将propertyName设置为pathData，valueType设置为pathType即可。Android就可以从一种图像变成另一种图像。

3、兼容性

3.1、VectorDrawable

Android L，只兼容minSDK>=21的版本
Gradle Plugin 1.5
设备版本>=21——使用Vector
设备版本<21——将Vector转换为png
AppCompat23.2后，VectorDrawable几乎可以兼容大部分使用场景
静态Vector支持Android2.1+
动态Vector支持Android3.0+

3.1、AnimatedVectorDrawable兼容性

1、向下兼容问题
Path Morphing
路径变换动画，在Android pre-L版本下是无法使用的

Path Interpolation
路径插值器，在Android pre-L版本下只能使用系统的插值器，不能自定义

2、向上兼容问题
Path Morphing
路径变换动画，在Android L版本以上需要使用代码配置