SVG(Scalable Vector Graphics，可伸缩矢量图形 )是W3C推出的一种开放标准的文本式矢量图形描述语言，它是基于XML、专门为网络而设计的图像格式，SVG是一种采用XML来描述二维图形语言，所以它可以直接打开xml文件来修改和编辑
在 Android 中如何使用 svg 呢，下面我们来看一下：
SVG 静态图
自定义 svg 图
1，创建 svg 格式的图
制作地址：https://svg.wxeditor.com/
在上面这个网站中可以在线创建 svg 图片，最后 ctrl + s 进行保存即可。
2，将 svg 转换为 vector Drawable
工具连接：https://pan.baidu.com/s/1bp9HANH
使用转换工具，将上面创建好的图片导入到转换工具，然后进行格式转换。
点击圈起来的地方进行导入 svg 格式文件，然后就会自动生成代码如下：
3，使用
然后复制这些代码，打开 as，在 drawable 文件夹下创建一个 xml 文件，并粘贴这些代码
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="580dp" android:height="400dp" android:viewportWidth="580" android:viewportHeight="400"> <path android:fillColor="#fff" android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" /> <path android:fillColor="#ff0000" android:fillAlpha="0.5" android:strokeColor="#bf0000" android:strokeAlpha="0.5" android:strokeWidth="1.5" android:pathData="M126,150.584091l113.826691,0l35.173309,-108.134872l35.17334,108.134872l113.82666,0l-92.087524,66.830261l35.17511,108.134872l-92.087585,-66.832062l-92.08757,66.832062l35.175156,-108.134872l-92.087578,-66.830261z" /> </vector>
解释一下：
fillColor：填充颜色
strokeColor：线颜色
fillAlpha：填充透明度
strokeAlpha：线透明度
StorkeWidth：线宽度
PathData：路径值，根据值来画图片
即可使用，如下
svg 是自适应的
注意，android 5.0 一下好像不支持 svg
使用 as 自带的 svg 图片
在drawable文件夹上右键->new->Vector Asset
选择要使用的图片，可以设置大小 和 透明度
创建成功后就可以再 drawable 文件夹中看到了。
svg 动画效果
1，用到了 SVG 静态图
2，用到了动画
下面看一下简单使用：
首先看一下 svg 图
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="580dp" android:height="400dp" android:viewportWidth="580" android:viewportHeight="400"> <path android:name="star_back" android:fillColor="#000000" android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" /> <path android:name="star" android:fillColor="#ff0000" android:fillAlpha="0.5" android:strokeColor="#bf0000" android:strokeAlpha="0.5" android:strokeWidth="1.5" android:pathData="M126,150.584091l113.826691,0l35.173309,-108.134872l35.17334,108.134872l113.82666,0l-92.087524,66.830261l35.17511,108.134872l-92.087585,-66.832062l-92.08757,66.832062l35.175156,-108.134872l-92.087578,-66.830261z" /> </vector>
然后是 animated-vector
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/star"> <!-- animated-vector 相当于一个桥梁，静态的 svg 和 动画之间的桥梁--> <target android:animation="@animator/star_in" android:name="star"/> </animated-vector>
接着看一下 target。注意他的 name 和 svg 中 path 的 name 是相同的。
然后 animation 值的是动画 如下：
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:propertyName="trimPathEnd" android:valueFrom="1" android:valueTo="0" android:valueType="floatType"> </objectAnimator>
使用：
<ImageView android:id="@+id/image_main" android:layout_width="200dp" android:layout_height="200dp" android:src="@drawable/star"/>
final AnimatedVectorDrawable drawableIn = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.star_d_in); final AnimatedVectorDrawable drawableOut = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.star_d_out); final ImageView imageView = (ImageView) findViewById(R.id.image_main); imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (flag) { imageView.setImageDrawable(drawableIn); drawableIn.start(); flag = false; } else { imageView.setImageDrawable(drawableOut); drawableOut.start(); flag = true; } } });
imageView.setImageDrawable(drawableOut); drawableOut.start(); flag = true; } } });
