1. SVG 简单介绍
1.1 是什么
SVG是指可伸缩矢量图形 (Scalable Vector Graphics)，它不同于传统的位图，不是通过存储图像中每一点的像素值来保存与使用图形，而是通过 XML 文件来定义一个图形，通过一些特定的语法和规则来绘制出我们所需的图像
1.2 和其他格式图片对比
SVG 的方式是事先定义好怎么去画这个图，然后等要用的时候再把它去画出来，而使用传统的位图的话就是已经有了画出来的图，然后要用的时候直接把画好的图拿出来用
- SVG 是在要用图的时候再把图画出来，所以理所当然的在图片显示的时候会花费更多的时间消耗更多的资源。
- 同样由于上一个原因， SVG 并不太适合层次过于复杂细节过于繁多的图片。
- 位图是事先已经画好的图片，所以适应性必然没有 SVG 好，同一张图片在不同分辨率下显示会有差异。
- SVG 的文件里存储了绘制图片的相关信息，所以我们能够对图片的线条有一个非常清晰的感知，这在做动画的时候特别有用。
- SVG 没有存储任何图像的像素信息，所以 SVG 的文件体积远小于传统的位图文件。
- SVG 的文件画出来的图像是矢量图，所以不会存在失真的问题，理论上支持任何级别的缩放。
2. SVG 使用
2.1 获取一个SVG文件
要使用 SVG ，那么首先我们肯定得有一个 SVG 文件。我们一般都有两种方式来获得一个 SVG 文件：自己写一个 SVG 文件，或者通过 AI 或一些网站作图之后导出它的 SVG 文件。
2.1.1 自己手动编写一个 SVG 文件（Android 中）
前面说过，SVG 文件里面存储的是如何去绘制目标图片的相关信息，所以理论上我们是可以从 0 开始写一个我们自己的 SVG 文件的——只要知道它绘制文件的规则，一切皆可绘制。我们先来看一下一个简单的 SVG 文件：
在 res\drawable 目录下，新建一个xml文件
VectorDrawable也是Drawable的一个直接子类, 像其它Drawable那样通常情况下是在xml中定义, 它对应的xml标签是<vector/>, 基本结构如下:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="132dp"
android:height="132dp"
android:viewportHeight="132.0"
android:viewportWidth="132.0">
<path
android:pathData="M50,2 L80.813,2 L80.813,130 L50,130 L50,2 Z"
android:strokeColor="#e33e2b"
android:strokeWidth="8" />
</vector>
- vector是VectorDrawable对应的根标签
- android:width与android:height对应矢量图的实际大小(矢量图是可以无限大, 但通常情况下一个图片都应该有一个原始大小, 假如你将此VectorDrawable作为一个ImageView的src, ImageView的大小都设置为wrap_content, 则ImageView对应的实际大小就是这里设置的大小)
- android:viewportWidth与android:viewportHeight是指当前Drawable对应的虚拟Canvas的大小, 之所以说是虚拟的是因为实际上并不存在这样一个Canvas, 又之所以需要这个值是因为在+ + <path/>标签中的路径数据要基于具体的坐标系来绘制.
- <path/>标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的pathData.PathData中对应的路径描述符号不需要我们去记, 通常情况下由绘图软件生成svg图片再从svg文件中提取.
这个文件绘制出来的图形是这样的(没错，在编写 SVG 的 XML 文件的时候 Android Studio 是可以预览的，很强大)：
效果如下 ：
2.1.2 用工具生成SVG文件
手动编写VectorDrawable是非常困难的，大部分时候得到VectorDrawable的方式应该都是先使用矢量绘图软件生成SVG图片, 再通过一些工具将SVG转化为VectorDrawable.下面是两个比较推荐的:
- Android Studio 内置的Vector Asset Studio
- svg2android ：一个网站直接上传你的svg图片就能生成Vectordrawable.
补充更新：第一种方式生成的svg文件不是标准的svg语法，是扩展后的 ，加入了一些其他的标签，如s 等 ，这样在解析是会有问题 。
那么svg格式的图片怎么得到 ？
可以自己去学学 AI 或者 GIMP 等软件的使用方法， 用它们来制作图形然后导成 SVG ，当然这样的话学习成本有点高——不过没关系，我们还有低配版的实现方式：Method Draw。这是一个在线制作矢量图的网站，可以很方便的将在上面制作的图形导出成 SVG 文件，学习成本相当低，而且能完成我们大部分的需求，总之我觉得还挺好用的。
又发现一个PNG 图片转SVG 的网站：
http://vectormagic.com/home : 免费次数有限
http://image.online-convert.com/convert-to-svg ：也是一个可以转换的网站
2.2 如何使用
2.2.1 简单使用
从Lollipop(Android 5.0)开始, Android引入了对矢量图的支持, 但并不支持svg这种矢量图片格式, 而是以VectorDrawable的方式来实现矢量图的效果。
VectorDrawable与其它Drawable一样可以被用作View的背景, ImageView的res.
上图是直接在布局文件中直接引用 SVG 的 XML 文件，代码中的 ic_android_black_24dp就是已经写好的 SVG 文件。可以看到，直接把它当做一张普通的图片来使用就可以了。当然，我们也可以在 Java 代码里面来使用 SVG 文件，像下面这样：
mImageView.setImageDrawable(getDrawable(R.drawable.ic_android_black_24dp));
2.2.2 实现动画效果
先看下效果
从动画效果上来看，如果我们自己来实现，肯定非常麻烦，幸运的是有人给我们造好这个轮子了，现在我们只要有一个svg格式的图片， 就可以显示炫酷的动画了。这个过程涉及两个步骤，一个是SVG的解析，一个是解析后的绘制 。
github 项目地址： https://github.com/geftimov/android-pathview ，数据源可以是svg图片，或者Path类
后来又发现一个库：https://github.com/mcxtzhang/PathAnimView ， 也可以把svg 文件实现动画效果 。
只要我们有一个SVG文件， 就可以实现动画效果 。
这个开源库的用法简单介绍一下
首先引入
dependencies {
compile 'com.eftimoff:android-pathview:1.0.8@aar'
}
下一步在布局文件中， 引入控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical"
tools:context="demo.com.svddemo.MainActivity">
<com.eftimoff.androipathview.PathView
android:id="@+id/pathView"
android:layout_width="350dp"
android:layout_height="350dp"
app:svg="@raw/monitor"
app:pathColor="@android:color/white"
app:pathWidth="2dp"/>
</LinearLayout>
最后在activity 中
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final PathView pathView = (PathView) findViewById(R.id.pathView);
// final Path path = makeConvexArrow(50, 100);
// pathView.setPath(path);
pathView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
pathView.getPathAnimator().
delay(100).
duration(1500).
interpolator(new AccelerateDecelerateInterpolator()).
start();
}
});
}
private Path makeConvexArrow(float length, float height) {
final Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.lineTo(length / 4f, 0.0f);
path.lineTo(length, height / 2.0f);
path.lineTo(length / 4f, height);
path.lineTo(0.0f, height);
path.lineTo(length * 3f / 4f, height / 2f);
path.lineTo(0.0f, 0.0f);
path.close();
return path;
}
}
看到注释的部分，调用了makeConvexArraw()方法，如果我们没有在xml文件里面指定svg文件，我们也可以在代码中手动指定绘制的路径
2.3 向下兼容
上面说了VectorDrawable是Android 5.0之后才增加的, 那如何作兼容呢? 实际上这里有两种方式:
- 不需要添加任何依赖包, Gradle在编译时会自动生成Vectordrawable对应的位图资源(如果你支持的最低sdk小于api21, 若大于等于21就不存在兼容性问题了)
- 使用Support Library 23.2+(不会自动生成位图)
方式1
会在打包APK时自动生成对应的位图资源, 在低版本的手机上运行时会自动引用位图, 在5.0及以后的手机上运行时会自动引用Vectordrawable. 这种方式的优点是不需要开发者去显式的做任何设置, 缺点是同时打包了位图与矢量图资源APK包会变大. 生成哪种分辨率下的位图资源可以通过下面的Gradle配置指定:
defaultConfig {
vectorDrawables.generatedDensities = ['hdpi','xxhdpi']
}
方式2
不会自动生成位图, 在最终的APK中只存在一份VectorDrawable, 所以不会存在APK包增大的问题, 但需要在使用时作一些调整:
首先需要在你的build.gradle配置文件中增加如下配置:
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
上面的配置的作用是强制gradle在编译时不自动生成兼容低版本的位图资源.
然后在引用Vectordrawable资源时使用app:srcCompat取代android:src, 若你还想将此Vectordrawable资源用作View的背景,遗憾的是这里没有一个类似的app:backgroundCompat方法, 你只能通过代码来设置
Resources resources = context.getResources(Resources, int, Theme);
Theme theme = context.getTheme();
Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme);
view.setBackground(drawable);
今年初Google发布了Android Support Library 23.2其中主要增加了对VectorDrawable与AnimateVectorDrawable的支持.VectorDrawable可以被兼容到Android2.1, AnimateVectorDrawable可以被兼容到Android3.0
注意
- 并不是所有的图片都适合使用VectorDrawable
A vector drawable is appropriate for simple icons. The material icons provide good examples of the types of images that work well as vector drawables in an app. In contrast, many app launch icons do have many details, so they work better as raster images.
上面是官方的原话, 大概意思就是说VectorDrawable只适合于像material icons这样的简单图片, 并不适合细节过于复杂的图片(原因也是很好理解的, 基于矢量图的原理, 它难以反应色彩层次丰富的图像效果)。
- VectorDrawable只支持部分的SVG特性
所以你在将SVG转化为VectorDrawable时, 需要注意一下, 不支持的部分特性被丢失后生成的VectorDrawable你是否能接受.
至此， SVG图片的相关知识就整理完了， 主要是整理了svg图片基础介绍 、基本用法及如何实现动画效果 。
遗留问题
使用几个在线转换的网站 ，生成的svg图片， 在android-pathview 这个开源库下显示有问题，在解析svg文件时 有语法错误 ，不知道为什么 。
com.caverock.androidsvg.SVGParseException: SVG parse error: At line 2, column 51: syntax error
at com.caverock.androidsvg.SVGParser.parse(SVGParser.java:611)
at com.caverock.androidsvg.SVG.getFromResource(SVG.java:187)
at com.caverock.androidsvg.SVG.getFromResource(SVG.java:172)
at com.eftimoff.androipathview.SvgUtils.load(SvgUtils.java:60)
at com.eftimoff.androipathview.PathView$1.run(PathView.java:242)
at java.lang.Thread.run(Thread.java:818)
Caused by: org.apache.harmony.xml.ExpatParser$ParseException: At line 2, column 51: syntax error
at org.apache.harmony.xml.ExpatParser.parseFragment(ExpatParser.java:515)
at org.apache.harmony.xml.ExpatParser.parseDocument(ExpatParser.java:474)
at org.apache.harmony.xml.ExpatReader.parse(ExpatReader.java:316)
at org.apache.harmony.xml.ExpatReader.parse(ExpatReader.java:279)
at com.caverock.androidsvg.SVGParser.parse(SVGParser.java:599)
at com.caverock.androidsvg.SVG.getFromResource(SVG.java:187)
at com.caverock.androidsvg.SVG.getFromResource(SVG.java:172)
at com.eftimoff.androipathview.SvgUtils.load(SvgUtils.java:60)
at com.eftimoff.androipathview.PathView$1.run(PathView.java:242)
at java.lang.Thread.run(Thread.java:818)
参考文档
Android实现炫酷SVG动画效果
拥抱SVG：苦恼于图片适配 in Android？
Android vector标签 PathData 画图超详解
【注释张豪华版 Path酷炫动画】极速get花式Path （支付宝支付成功动画）
vectormagic : PNG 图片转SVG图片的网站， 但是免费试用的次数有限 。
