Android中SVG的使用姿势

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如下：

在ImageView中引用：

或者在代码里设置：

ImageView iv_vector= (ImageView) findViewById(R.id.iv_vector);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(this, R.drawable.vector_drawable);
iv_vector.setImageDrawable(animatedVectorDrawableCompat);

效果图：

vector.png

来看下各个属性的含义：

参数	备注
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表示全透明
	包含一组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轴的平移倍数
	定义被绘制的路径
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 只对当前的 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

表示AnimatedVectorDrawable的XML文件：icon_vector_anim.xml

    android:drawable="@drawable/icon_vector">
    
        android:name="icon_path"
        
        android:animation="@anim/anim_icon" />

用来定义动画的XML文件：anim_icon.xml

在布局文件中引用：

效果图：

vector_a.gif

完整代码地址： AnimatedVectorDrawable_Demo

参考：
1、Android Vector曲折的兼容之路
2、android 中使用svg
3、Android Support Library 23.2有哪些新东西