什么是svg
SVG是指可伸缩矢量图形 (Scalable Vector Graphics),它不同于传统的位图,不是通过存储图像中每一点的像素值来保存与使用图形,而是通过 XML 文件来定义一个图形,通过一些特定的语法和规则来绘制出我们所需的图像
svg的优点很多,简单讲因为存储的是结构信息而非像素信息,体积小,不失真,不过不太适合层次复杂细节繁多的图片,毕竟它存储的相当于是存储了绘制路径的关键节点和画笔属性。svg也是有很多语法,可以实现很多效果和动画,关于svg的知识可以参考Android SVG技术入门,文章里面也介绍了一些android中解析svg的一些原理,简言之相当于通过对svg绘制指令的解析,将svg指令对应到Path类中的绘制方法完成绘制,比如svg中的M指令相当于android中的Path.moveTo()。
android中的svg
android中使用svg是通过VectorDrawable,官方介绍链接Vector drawables overview。
VectorDrawable是一种定义了点,线,曲线以及它们的颜色信息集合的xml文件。主要优势就是任意缩放不失真,由此也能减小apk包的大小,因为不必为适配多种分辨率的屏幕添加多套图片资源。可以直接用xml定义VectorDrawable,也可以从svg文件转换得到。Android 5.0 (API 21)是官方首次支持VectorDrawable和 AnimatedVectorDrawable的版本,不过低版本的可以使用Android support library兼容。
可以说VectorDrawable是Android中的一种矢量方案,是svg的一种实现,它支持大部分的svg语法。
怎么用?
如果你没有资源,android studio中提供了一选择,下面会提到,还有一些网站可以得到免费svg资源:
SVG图片下载地址
选择要下载的图片,下载时选择svg下载
获取到的svg文件后,要转为android中的xml以VectorDrawable的形式使用。可以用工具:
svg2android
能将一个svg图片转换成Android中的vector文本。
Android Studio中提供了方便的工具转换,(如果没有请升级至最新版,记得升级gradle插件)
android中的使用步骤:
-
res-drawable-new-Vector Asset
2.可以选择android studio自带的一些vector资源
3.如果有自己的svg资源,可以选择本地上传
左下角的Enable auto mirroring for RTL layout指是否支持从右向左布局,使用于从右向左阅读的语言体系。
4.添加头像svg后生成的文件:ic_admin.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportHeight="40"
android:viewportWidth="40">
<path android:fillColor="#000000"
android:fillType="evenOdd"
android:pathData="M2,20C2,10.0589 10.0589,2 20,2C29.9411,2 38,10.0589
38,20C38,29.9411 29.9411,38 20,38C10.0589,38 2,29.9411 2,20ZM10.1784,
31.3377C12.4742,30.0084 14.6212,29.3867 14.6212,29.3867C14.6212,29.3867
16.5914,28.8271 16.5914,27.1482C16.5914,26.5559 16.3099,26.0289 16.0285,
25.7491C15.8585,25.5801 14.765,23.9827 13.9252,22.0659C12.6614,21.5192
12.3857,20.5971 12.3857,19.6526C12.3857,19.0841 12.6926,18.8678 12.9647,
18.7878C12.9437,18.5862 12.9325,18.3879 12.9325,18.1939C12.9325,15.1159
12.9774,15.1017 13.0728,13.9633C13.2133,12.629 13.1573,11.092 15.0223,
9.7958C16.8872,8.4997 18.0211,8.5659 19.4438,8.6501C20.376,8.7104 22.6178,
8.6501 23.8114,7.9948C25.005,7.3395 26.7902,11.1296 26.9717,13.5465C27.1532,
15.9634 27.0624,16.5744 26.9717,17.793C26.9717,17.793 26.9545,18.167 26.8726,
18.757C27.1542,18.8268 27.4942,19.0349 27.4942,19.6334C27.4942,20.5551 27.2317,
21.4554 26.0447,22.0064C25.7745,22.691 25.4266,23.3748 24.9791,23.9846C23.1572,
26.4668 23.5532,26.0343 23.4128,26.9265C23.5532,27.6696 22.5923,28.5217 27.3369,
29.9336C28.3379,30.2315 29.2776,30.6097 30.1373,31.0561C33.1263,28.3141 35,24.3759
35,20C35,11.7157 28.2843,5 20,5C11.7157,5 5,11.7157 5,20C5,24.528 7.0063,28.5874
10.1784,31.3377Z"
android:strokeColor="#00000000"
android:strokeWidth="1"/>
</vector>
- vector是VectorDrawable对应的根标签
- android:width与android:height对应矢量图的实际大小(矢量图是可以无限大, 但通常情况下一个图片都应该有一个原始大小, 假如你将此VectorDrawable作为一个ImageView的src, ImageView的大小都设置为wrap_content, 则ImageView对应的实际大小就是这里设置的大小),由于矢量图首次加载会消耗更多的CPU资源,建议设置合适的大小以节省绘制时间。
- android:viewportWidth与android:viewportHeight是指当前Drawable对应的虚拟Canvas的大小, 之所以说是虚拟的是因为实际上并不存在这样一个Canvas, 又之所以需要这个值是因为在 <path/>标签中的路径数据要基于具体的坐标系来绘制.
- <path/>标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的pathData,PathData中对应的路径描述符号不需要我们去记, 通常情况下由绘图软件生成svg图片再从svg文件中提取。
- android:fillType对应Path的fillType方法,颜色设置也是,比如android:fillColor是画笔颜色。可以改变这些属性然后在旁边的preview栏里看到实时预览。
如果不使用android的导入功能,也可以使用其他方式获取到相应代码直接定义在xml文件中。
5.使用这个xml,与使用png资源一样,直接通过drawable引用就可以了。
<ImageView
android:id="@+id/iv_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="@drawable/ic_admin"/>
也可以作为drawable检索
Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.iv_user);
有那些坑?
- 小于Api21的低版本适配有两种方式
- android studio2.2+以及gradle插件1.5.0+下,会自动给低版本生成对应的所有分辨率的png资源,所以这样会导致apk包比较大,但是可以通过下面的设置要生成的分辨率信息。
defaultConfig {
vectorDrawables.generatedDensities = [edDensities 'hdpi','xxhdpi']
}
2.使用Support Library 23.2+(不会自动生成位图),Android Support Library 23.2其中主要增加了对VectorDrawable与AnimateVectorDrawable的支持.VectorDrawable可以被兼容到Android2.1, AnimateVectorDrawable可以被兼容到Android3.0
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
dependencies {
compile 'com.android.support:appcompat-v7:23.2.0'
}
此时,使用的方式会发生变化,比如需要用app:srcCompat来代替android:src。
<ImageView
android:id="@+id/iv_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:srcCompat="@drawable/ic_admin"/>
- 一个处理了android4.0+上svg使用兼容性问题的开源库:SVG-Android
主要场景
- 图标各种状态:修改绘制的颜色
- 图标+矩形背景,背景各种状态:修改背景绘制的颜色
- svg可以实现很多酷炫的动画。可以通过定义AnimateVectorDrawable完成动画的定义,也可以使用三方库:PathAnimView