Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画
SVG 和 VectorDrawable 的基本知识
VectorDrawable 并没有支持所有的 SVG 规范，目前只支持 PathData 和有限的 Group 功能。另外还有一个 clip-path 属性来支持后面绘图的区域。 所以对于使用 VectorDrawable 而言，我们只需要了解 SVG 的 PathData 规范即可（对应自定义控件中的绘图中的Path路径功能）。通过查看 PathData 文档，可以看到 path 数据包含了一些绘图命令，比如 ：
- moveto 命令 M or m ，移动到新的位置 (大写的命令为绝对坐标命令；小写的命令为相对坐标命令， 下同) ，
- closepath 命令 Z or z，封闭路径，从当前的位置画一条直线到该路径或者子路径起始位置
- lineto 命令 L or l，从当前的位置画一条线到指定的位置
- horizontal lineto 命令 H or h，水平画一条直线到指定位置
- vertical lineto 命令 V or v，垂直画一条直线到指定位置
- quadratic Bézier curve 命令 Q or q ，贝塞尔曲线
- smooth quadratic Bézier curveto 命令 T 光滑二次贝塞尔曲线
- elliptical arc 命令 A 椭圆弧
矢量图xml文件
复制代码
该示例的画布大小为 400 X 400像素（左上角坐标为0,0； 右下角坐标为400,400）， path 路径为： 移动到 100、100 位置，然后画一条线到绝对坐标 300、100位置，然后画一条线到绝对坐标 200、300位置，然后画一条线到该路径的起始位置。这样一个倒三角形就绘制出来了。
需要注意的是， 在根元素 vector 上有两个宽高设置，其中 viewport 是指矢量图里面的画布大小，而android:width 和 android:height 是指该矢量图所对应的 VectorDrawable 的大小。
path 元素里面的 pathData 就是矢量图的路径数据，除此之外还可以设置其他属性。path 元素属性设置说明
svg 路径基本设置
| 属性设置 | 功能描述 |
|---|---|
| android:name | 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径 |
| android:pathData | 和 SVG 中 d 元素一样的路径信息。 |
svg 路径边框相关设置
| 属性设置 | 功能描述 |
|---|---|
| android:strokeColor | 定义如何绘制路径边框，如果没有定义则不显示边框 |
| android:strokeWidth | 定义路径边框的粗细尺寸 |
| android:strokeAlpha | 定义路径边框的透明度 |
| android:strokeLineCap | 设置路径线帽的形状，取值为 butt, round, square. |
| android:strokeLineJoin | 设置路径交界处的连接方式，取值为 miter,round,bevel. |
| android:strokeMiterLimit | 设置斜角的上限 |
当strokeLineJoin设置为 “miter” 的时候， 绘制两条线段以锐角相交的时候，所得的斜面可能相当长。当斜面太长，就会变得不协调。strokeMiterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10，意味着一个斜面的长度不应该超过线条宽度的 10 倍。如果斜面达到这个长度，它就变成斜角了。当 strokeLineJoin 为 “round” 或 “bevel” 的时候，这个属性无效。
svg 路径颜色相关设置
| 属性设置 | 功能描述 |
|---|---|
| android:fillColor | 定义填充路径的颜色，如果没有定义则不填充路径 |
| android:fillAlpha | 定义填充路径颜色的透明度 |
根元素 vector
根元素 vector 是用来定义这个矢量图的
基本设置
| 属性设置 | 功能描述 |
|---|---|
| android:name | 定义该drawable的名字 |
| android:width | 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸，通常使用 dp |
| android:height | 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸，通常使用 dp |
| android:viewportWidth | 定义矢量图视图的宽度，视图就是矢量图 path 路径数据所绘制的虚拟画布 |
| android:viewportHeight | 定义矢量图视图的高度，视图就是矢量图 path 路径数据所绘制的虚拟画布 |
附加设置
| 属性设置 | 功能描述 |
|---|---|
| android:tint | 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的 |
| android:tintMode | 定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in |
| android:autoMirrored | 设置当系统为 RTL (right-to-left) 布局的时候，是否自动镜像该图片。比如 阿拉伯语。 |
| android:alpha | 该图片的透明度属性 |
group 节点
有时候我们需要对几个路径一起处理，这样就可以使用 group 元素来把多个 path 放到一起。 group 支持的属性如下：
| 属性设置 | 功能描述 |
|---|---|
| android:name | 定义 group 的名字 |
| android:rotation | 定义该 group 的路径旋转多少度 |
| android:pivotX | 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。 |
| android:pivotY | 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。 |
| android:scaleX | 定义 X 轴的缩放倍数 |
| android:scaleY | 定义 Y 轴的缩放倍数 |
| android:translateX | 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。 |
| android:translateY | 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。 |
例如 前面提到的三角形，通过 group 可以把其旋转 90度。
复制代码
使用创建好的 静态svg 图形
复制代码