android-svg使用调查

什么是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中的使用步骤:

  1. res-drawable-new-Vector Asset


    vetcor-asset

2.可以选择android studio自带的一些vector资源


android-svg

3.如果有自己的svg资源,可以选择本地上传


local-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的低版本适配有两种方式
  1. 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"/>
  1. 一个处理了android4.0+上svg使用兼容性问题的开源库:SVG-Android

主要场景

  1. 图标各种状态:修改绘制的颜色
  2. 图标+矩形背景,背景各种状态:修改背景绘制的颜色
  3. svg可以实现很多酷炫的动画。可以通过定义AnimateVectorDrawable完成动画的定义,也可以使用三方库:PathAnimView

参考文献

Android 中使用 SVG

Vector Asset Studio的使用

SVG 在Android中的应用

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容