Svg 使用介绍

JackSunny
2016/06/29
Comments
svg

Category: android

本文会带来什么？

介绍 android中svg 使用场景

介绍 svg 使用方式

1.1 where&when

场景A: UE妹子想实现下图效果，身为RD哥哥你会怎么做？帧动画？自己绘制？怎么可以为妹子增加工作量！
场景B: 美工妹子做的图片在多屏幕中失真了！！！身为 RD 哥哥怎么能不为妹子插自己两刀？
场景C: 待定（好吧，编不下去了）

以上场景如有雷同纯属巧合

没错，以上场景都可以用到SVG，厉不厉害!但svg是何方神圣？为什么可以满足如此让人觉得一千万头草泥马践踏的玻璃心呢？请往下看

1.2 what

简单的说svg是一种图片格式，严格的来说是一种开放标准的矢量图形语音，这种语言可以用来描绘图像（像不像xml定义drawble？），而且svg可以很没底线的被任何文字处理工具打开，因为是标记语言，所以不存在失真问题，而且由于是标记语言，所以比起图片来说，小到你尖叫！

1.3 why

开放标准的矢量图形语开放标准的矢量图形语开放标准的矢量图形语
重要的事情说三遍！所以它

不失真，可大可小，可攻可受
比起图像文件小，下载快
可以自由修改
色彩分辨率相当高，且支持滤镜
跨平台

当然，缺点也是有的
A. Android中原生SVG只支持 Android 5.0 及以后版本（我生君未生，君生我已老，哎），不过没关系，有github大神已经实现，时空传送门，但这种方式肯定会增加学习和使用成本
B. 理论上讲，SVG的效率可能会不如PNG好，这是因为它需要运行时的计算和对应平台的渲染绘制。而且对于PNG来说的另一优势是在开启硬件加速的设备上，绘制Bitmap一个非常快速的过程。可以想象，让SVG不比PNG慢将是一件很有挑战的事情

1.4 who

RD哥哥快来玩儿啊

##如何使用

2.1 Android 中 svg的一些tips介绍

2.1.1 svg 文件格式

svg 格式基本如下

M 2948.00,18.00
C 2956.86,18.01 2954.31,18.45 2962.00,19.91
3009.70,28.94 3043.56,69.15 3043.00,118.00
3042.94,122.96 3042.06,127.15 3041.25,132.00
3036.37,161.02 3020.92,184.46 2996.00,200.31
2976.23,212.88 2959.60,214.26 2937.00,214.00
2926.91,213.88 2912.06,209.70 2903.00,205.24
2893.00,200.33 2884.08,194.74 2876.04,186.91
2848.21,159.81 2839.19,115.93 2853.45,80.00
2863.41,54.91 2883.01,35.57 2908.00,25.45
2916.97,21.82 2924.84,20.75 2934.00,18.51
2938.63,17.79 2943.32,17.99 2948.00,18.00 Z
M 2870.76,78.00
...

够细心的童鞋已经发现其中有M，C，Z等一些字母，这是什么鬼？
其实这些都是定义了一些关于移动的tag标识：
M/m命令：moveto移动到绘制点，后面跟上坐标系点对即可。
Z/z命令：closepath一段路径等的闭合点，无参数。
L/l命令：lineto绘制一个点到另一个点的直线，多个坐标对可以绘制折线，后面跟上坐标系点对即可。
H/h命令：lineto从当前点到指定x点绘制水平直线，多个x无意义，后面跟坐标系x点即可。
V/v命令：lineto从当前点到指定x点绘制垂直直线，多个y无意义，后面跟坐标系y点即可。
C/c命令：cubic bezier三次贝塞尔曲线。
S/s命令：cubic bezier三次贝塞尔曲线。
Q/q命令：quatratic bezier二次贝塞尔曲线。
T/t命令：quatratic bezier二次贝塞尔曲线。
A/a命令：elliptical arc圆弧线。

由此引出解析出svg文件后可以把相应的标签映射成 canvas moveTo，lineTo等方式来“画”出svg

2.2 Android 5.0 及大于5.0版本系统相关使用

####2.2.1 简单使用（静态图）

Android5.0以后支持SVG矢量图了，Google提供了一个标签用来创建VectorDrawable矢量对象，我们只要在svg的path标签中的字符串复制到的path标签中，就能创建出一个ImageView可以使用的矢量图形了，如：
在drawable目录下新建一个根标签为的mysvgdrawable.xml,内容如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="256dp"
android:height="256dp"
android:viewportHeight="100"
android:viewportWidth="100">
<path
android:name="heart"
android:fillColor="#E91E63"
android:pathData="M 2948.00,18.00
C 2956.86,18.01 2954.31,18.45 2962.00,19.91
3009.70,28.94 3043.56,69.15 3043.00,118.00
3042.94,122.96 3042.06,127.15 3041.25,132.00
3036.37,161.02 3020.92,184.46 2996.00,200.31
2976.23,212.88 2959.60,214.26 2937.00,214.00
2926.91,213.88 2912.06,209.70 2903.00,205.24
2893.00,200.33 2884.08,194.74 2876.04,186.91
2848.21,159.81 2839.19,115.93 2853.45,80.00
2863.41,54.91 2883.01,35.57 2908.00,25.45
2916.97,21.82 2924.84,20.75 2934.00,18.51
2938.63,17.79 2943.32,17.99 2948.00,18.00 Z
M 2870.76,78.00"
/>
</vector>

然后直接设置ImageView中即可

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/heart"/>

2.2.1 进阶使用（动态图图）

上面说了怎么显示SVG矢量图像，那怎么让SVG图像动起来？要动，才爽吗！
要实现动态图就要用到AnimatedVectorDrawable这个类了，它就是负责VectorDrawable矢量图形的动画的，不过我们不能像属性动画那样去通过代码进行设置动画，而是需要通过animated-vector标签在xml文件中创建一个AnimatedVectorDrawable，只需要四步：

第一步

首先就是要创建一个VectorDrawable，在drawable目录下创建一个heart.xml，并且，我们知道矢量图是通过点和线进行绘制的，而在上篇中我又讲了path中M和Z两个命令，M是绘制的起始点，然后期间通过一系列的画直线、画弧等过程，最后通过Z命令来闭合这个绘制过程，也就是说绘制一个形状时候是从M出发到Z闭合。所以，面对path中混乱的排列，我们需要把M到Z的字符串进行隔开分别创建一个path（也可以合并为一个group，给它设置个name，然后对它进行动画），到时候进行绘制动画的时候，可以保证各个path绘制的时间一致，然后分别设置一个name，和线条的颜色和宽度，所以内容如下：

heart.xml 如下

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="256dp"
android:height="256dp"
android:viewportHeight="100"
android:viewportWidth="100">
<path
android:name="heart1"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M58.3,10.6C51.4,3.6,40,3.7,32,10.5c-1.3-1.1-2.6-2-4.1-2.8l-5.5-3.8c-0.3-0.2-0.6-0.2-1-0.1c-0.3,0.1-0.5,0.4-0.6,0.8l-0.2,1C15,4.9,9.6,6.7,5.7,10.6C-1.8,18.1-2,30,5.4,37.8L31.3,64c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l25.9-26.2C65.9,30.2,65.7,18,58.3,10.6z"
/>
<path
android:name="heart2"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M57.2,36.4L32,61.8L6.8,36.4c-1-1-1.8-2.1-2.5-3.3l7.5,3.4c0.4,0.2,0.8,0.3,1.2,0.3c0.4,0,0.8-0.1,1.1-0.2l0.7,6.4c0,0.5,0.4,0.8,0.8,0.9l9.4,1.4c0,0,0.1,0,0.1,0c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.6,0.2-0.9l-4-17.6l13.3,11.9c0.2,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.2,0c0.3-0.1,0.6-0.3,0.7-0.6l3.2-8.9c0.2-0.4,0-0.9-0.4-1.2l-5.3-3.6c0.6-0.5,1.1-1.3,1.1-2.1l0.7-9.1c0-0.3-0.1-0.7-0.4-0.9c-0.3-0.2-0.7-0.2-1-0.1l-3.6,1.5l1.1-0.9c0,0,0,0,0,0c0,0,0,0,0,0c7.2-6.7,17.8-7,24.2-0.6C63.5,18.6,63.7,29.6,57.2,36.4z"
/>

<path
android:name="heart3"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M14.3,20.7l1.6,1.9L5.3,26.4l-0.9-9.1L14.3,20.7z"
/>
<path
android:name="heart4"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M19.5,18.3l1.5,3.8    l-2,1.2l-2.6-3.1L19.5,18.3z"
/>
<path
android:name="heart5"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M17.2,24.3C17.3,24.3,17.3,24.3,17.2,24.3l0.4,0.5L14,34c0,0,0,0,0,0l0,0c-0.1,0.3-0.3,0.5-0.5,0.6c-0.3,0.1-0.6,0.1-0.8,0l-6.8-3.1l7.6-5.9L17.2,24.3z"
/>
<path
android:name="heart6"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M22.4,23.5    l9.6,1.2l6.2,4.3l-2.5,6.8L22.2,23.7L22.4,23.5z"
/>
<path
android:name="heart7"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M33.8,21.9c0,0.3-0.2,0.6-0.4,0.7c-0.2,0.2-0.5,0.2-0.9,0.2l-9.6-1.2l-0.3-0.7    l3.3-2.8l8.4-3.6L33.8,21.9z"
/>
<path
android:name="heart8"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M30.4,11.9l-8.4,7L21,16.5c0,0,0-0.1-0.1-0.1l1.9-9.5c0,0,0.2,0,0.2,0s0,0,0,0l-0.2-0.4L30.4,11.9z"
/>
<path
android:name="heart9"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M7.1,12c3.5-3.5,8.2-5.1,13.3-4.5l-1.5,8.8l-4.1,2.4L4.5,15.3C5.3,14.1,6.1,13,7.1,12z"
/>
<path
android:name="heart10"
android:strokeColor="#E91E63"
android:strokeWidth="1"
android:pathData="
M2.6,19.6l0.8,8.3c0,0.3,0.2,0.6,0.5,0.7c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0,0.2,0,0.3-0.1l2.7-1L3.3,31c0,0,0,0,0,0C1.8,27.4,1.6,23.3,2.6,19.6z"
/>
</vector>

第二步

我们在drawable目录下新建一个根结点为animated-vector的heart_animator.xml文件，也就是为矢量图像创建一个AnimatedVectorDrawable。（drawable指的是VectorDrawable，而target指的是对名字为name的path或者group进行动画）。其中内容如下：
heart_vector_animator.xml：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/heart">
<target
android:name="heart1"
android:animation="@animator/heart_animator" />
<target
android:name="heart2"
android:animation="@animator/heart_animator" />
<target
android:name="heart3"
android:animation="@animator/heart_animator" />
<target
android:name="heart4"
android:animation="@animator/heart_animator" />
<target
android:name="heart5"
android:animation="@animator/heart_animator" />
<target
android:name="heart6"
android:animation="@animator/heart_animator" />
<target
android:name="heart7"
android:animation="@animator/heart_animator" />
<target
android:name="heart8"
android:animation="@animator/heart_animator" />
<target
android:name="heart9"
android:animation="@animator/heart_animator" />
<target
android:name="heart10"
android:animation="@animator/heart_animator" />
</animated-vector>

第三步

就是在animator目录下创建一个objectAnimator 动画，然后在第二步中分别设置给各个target。属性trimPathEnd的值是由0~1的，所以，path绘制时候也会表现出对应的动画，内容如下：
heart_animator.xml：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="6000"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />

【注】：trimPathEnd这个属性是path的（表示绘制由开始点到绘制结束点），与之类似的还有trimPathStart（表示绘制由结束点后退到开始点）

第四步

最后一步，我们已经把矢量图像和对应的动画都设置好了，此时你如果运行则不会有动画效果，所以接下来就是需要我们通过代码把动画开启起来并设置给ImageView显示，代码为：

ImageView mImageView = (ImageView) findViewById(R.id.imageView);
AnimatedVectorDrawable mAnimatedVectorDrawable =  (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.heart_vector_animator);//得到对应的AnimatedVectorDrawable对象
mImageView.setImageDrawable(mAnimatedVectorDrawable);
if(mAnimatedVectorDrawable!=null){
mAnimatedVectorDrawable.start();
}

我们得到AnimatorVectorDrawable对象后，只需要把这个Drawable对象设置给ImageView，然后通过AnimatedVectorDrawable.start()开启动画就可以了。

2.3 Android 5.0 之前版本系统使用

低于Android 5.0 的情况只能要么自己写一个工具，要么采用别人写好了的轮子了

##参考