版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013700502/article/details/55505027
SVG是什么？
- SVG 意为可缩放矢量图形（Scalable Vector Graphics），
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG的历史和优势
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
Android中该如何使用SVG呢？
Android5.0之后为支持SVG提供了两个个类：VectorDrawable和AnimatedVectorDrawable，如果想在5.0之前使用，需要加入com.android.support:appcompat-v7:23.2.0以上版本的兼容包，如：
compile 'com.android.support:appcompat-v7:24.2.0'然后配置一下gadle,如果Gradle Plugin的版本在2.0或者以上，则配置：
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}如果你正在使用Gradle 1.5 ，则应该配置：
// Gradle Plugin 1.5
android {
defaultConfig {
generatedDensities = []
}
// This is handled for you by the 2.0+ Gradle Plugin
aaptOptions {
additionalParameters "--no-version-vectors"
}
}将SVG格式的图片转换为VectorDrawable 地址：
http://inloop.github.io/svg2android/
VectorDrawable可以用一个XML文件来定义，根元素是，定义一个XML文件vector_drawable.xml如下：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:name="@string/app_name"
android:width="200dp"
android:height="200dp"
android:tint="@color/colorAccent"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group>
<path
android:fillAlpha="100"
android:fillColor="#FF000000"
android:pathData="M12,2c1.1,0 2,0.9 2,2s-0.9,2 -2,2 -2,-0.9 -2,
-2 0.9,-2 2,-2zM21,9h-6v13h-2v-6h-2v6L9,22L9,9L3,9L3,7h18v2z"
android:strokeLineCap="round" />
</group>
</vector>在ImageView中引用：
<ImageView
android:id="@+id/iv_vector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/vector_drawable" />或者在代码里设置：
ImageView iv_vector= (ImageView) findViewById(R.id.iv_vector);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(this, R.drawable.vector_drawable);
iv_vector.setImageDrawable(animatedVectorDrawableCompat);效果图：
来看下各个属性的含义：
| 参数 | 备注 |
|---|---|
| < vector > | |
| android:name | 定义VectorDrawable的名字 |
| android:width、android:height | 定义图片的宽、高，支持所有尺寸单位，通常用dp指定 |
| android:viewportWidth、android:viewportHeight | 定义图片被划分的比例大小，例如上面的600.0，即把64dp平均分成500份，后面Path标签中的坐标，就全部使用的是这里划分后的坐标系统，width和height这两个值必须一样，否则图片会出现变形。 |
| android:tint | 定义图片的颜色，默认不设置颜色，该值会覆盖path标签中的android:fillColor值 |
| android:tintMode | //定义图片颜色为Porter-Duff blending 模式，默认值为 src_in |
| android:autoMirrored | //当布局方向从右到左时，该图片是否自动被镜像 |
| android:alpha | 图片的透明度，取值范围(0-255)，255表示全透明 |
| < group > | 包含一组path或子group，通过group可以把多个path组合到一块形成一个图片 |
| android:name | 定义group的名字 |
| android:rotation | 定义group顺时针旋转的角度 |
| android:pivotX、android:pivotY | （pivotX，pivotY）定义了group缩放、旋转时的中心点 |
| android:scaleX、android:scaleY | X轴、Y轴的缩放倍数 |
| android:translateX、android:translateY | X轴、Y轴的平移倍数 |
| < path > | 定义被绘制的路径 |
| android:name | 定义路径名字 |
| android:pathData | 定义矢量图的路径信息 |
| android:fillColor | 定义填充路径的颜色，没有定义不填充 |
| android:strokeColor | 定义路径边框的颜色 |
| android:strokeWidth | 定义路径边框的宽度 |
| android:strokeAlpha | 定义路径边框颜色的透明度 |
| android:fillAlpha | 定义填充路径颜色的透明度 |
| android:trimPathStart、android:trimPathEnd | 取值范围都是（0,1），意思是截取从起始部分到结束部分的部分path |
| android:trimPathOffset | //设置路径截取区域，取值范围（0,1） |
| android:strokeLineCap | //设置路径线帽的形状，取值为 butt, round, square |
| android:strokeLineJoin | 设置路径交界处的连接方式，取值为 miter,round,bevel |
| android:strokeMiterLimit | //设置斜角的上限 |
| < clip-path > | 定义当前绘制的剪切路径。注意，clip-path 只对当前的 group 和子 group 有效 |
| android:name | 定义clip-path名字 |
| android:pathData | 类似于path中的pathdata,定义路径信息 |
path标签中的pathData中指令：
| 参数 | 备注 |
|---|---|
| M | M = moveto(X,Y) ：将画笔移动到（X,Y）坐标位置 |
| L | L = lineto(X,Y) ：画直线到（X,Y）坐标位置 |
| H | H = horizontal lineto(X)：画水平线到指定的X坐标位置 |
| V | V = vertical lineto(Y)：画垂直线到指定的Y坐标位置 |
| C | C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三阶贝赛尔曲线 |
| S | S = smooth curveto(X2,Y2,ENDX,ENDY) |
| Q | Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二阶贝赛尔曲线 |
| T | T = smooth quadratic Belzier curveto(ENDX,ENDY)：映射 |
| A | A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 |
| Z | Z = closepath()：关闭路径 |
注：上面的指令，可以大写也可以小写，大写相对于屏幕坐标系；小写相对于父View坐标系。
AnimatedVectorDrawable将VectorDrawable和动画联系到一起，可以用三个XML文件来表示,如下：
表示VectorDrawable的XML文件：icon_vector.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:tint="@color/colorAccent"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:name="icon_path"
android:fillColor="#FF000000"
android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"
android:trimPathEnd="1.0"
android:trimPathStart="0.0" />
</vector>表示AnimatedVectorDrawable的XML文件：icon_vector_anim.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
<!--icon_vector即为要操作的VectorDrawable资源文件-->
android:drawable="@drawable/icon_vector">
<target
<!--target的name,这里为上面VectorDrawable文件里的path名字-->
android:name="icon_path"
<!--为目标添加的动画-->
android:animation="@anim/anim_icon" />
</animated-vector>用来定义动画的XML文件：anim_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<objectAnimator
android:duration="2000"
android:propertyName="trimPathStart"
android:valueFrom="0.0"
android:valueTo="1.0" />
<objectAnimator
android:duration="2000"
android:propertyName="trimPathStart"
android:valueFrom="1.0"
android:valueTo="0.0" />
</set>在布局文件中引用：
<ImageView
android:id="@+id/iv_anim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="@string/app_name"
android:src="@drawable/icon_vector_anim" />效果图：
完整代码地址：AnimatedVectorDrawable_Demo
参考：
1、Android Vector曲折的兼容之路
2、android 中使用svg
3、Android Support Library 23.2有哪些新东西