Android vector使用svg图片_安卓xml绘制矢量图片步骤

什么是SVG

新建的Android项目默认的图标都是svg的xml图片，那么我们在日常开发中可不可以使用svg的图片呢？答案是肯定的。本文是以读者对SVG有一定了解为前提的，其实svg可以简单的理解成xml图片。可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。

省时间。图像与分辨率无关，收放自如，适配安卓机坑爹的分辨率真是一劳永逸；

省空间。体积小，一般复杂图像也能在数KB搞定，图标更不在话下。

在正式介绍svg图片之前先介绍一个网站给大家，就是 阿里Iconfont，海量在线矢量图，早收藏早致富。以后工作中主要涉及到的矢量图资源均来自该网站。至少现在我是这样的。

VectorDrawable

VectorDrawable是Google从Android 5.0开始引入的一个新的Drawable子类，能够加载矢量图。到现在通过support-library已经至少能适配到Android 4.0了（通过AppBrain统计的Android版本分布来看，Android 4.1以下（api<15）几乎可以不考虑了）。Android中的VectorDrawable只支持SVG的部分属性，相当于阉割版。

它虽然是个类，但是一般通过配置xml再设置到要使用的控件上。在Android工程中，在资源文件夹res/drawable/的目录下（没有则需新建），通过<vector></vector>标签描述，例如 ic_notifications_black_24dp.xml：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z" />
</vector>

基本属性说明：

width, height：图片的宽高。可手动修改到需要尺寸；

viewportHeight, viewportWidth：对应将上面height width等分的份数。以svg_ic_arrow_right.xml举例，可以想象将长宽都为8dp的正方形均分为24x24的网格，在这个网格中就可以很方便地描述点的坐标，图像就是这些点连接起来构成的。

fillColor：填充颜色。最好直接在这里写明色值#xxxxxxxx，而不要用@color/some_color的形式，避免某些5.0以下机型可能会报错。

pathData：在2中描述的网格中作画的路径。具体语法不是本文的重点，故不展开。

Android如何使用SVG矢量图

在 Iconfont 上面搜索你要的资源名字，中英文一般都会有结果。比如“个人中心”，然后下载svg的格式。这个文件可以用浏览器打开->查看网页源码，或者用NotePad 等编辑器打开看到里面的内容，格式化后是这样：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="" class="icon" height="200" p-id="1909"
    t="1517289940201" version="1.1" viewBox="0 0 1024 1024"
    width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css"></style>
    </defs>
    <path
        d="M979.936 962.976c-22.656 48.768-83.136 52.544-101.152 52.544l-741.856 0c-12.736-0.736-64.352-6.336-87.776-50.432-9.888-18.592-17.664-49.728 1.408-92.32 34.752-77.408 115.264-84.928 134.496-85.6 137.056-21.216 181.568-68.384 181.984-68.832l3.2-3.328c14.624-13.792 19.616-38.016 20.928-59.072-88.64-67.424-144.704-197.632-144.704-340.736 0-229.344 142.272-310.688 264.128-310.688 121.888 0 264.192 81.376 264.192 310.688 0 143.104-56 273.28-144.64 340.704 1.376 21.12 6.368 45.408 20.864 59.104l4 4.288c0.096 0 44.832 46.816 181.216 67.904 31.392 1.248 90.336 18.336 128.608 75.936 29.888 44.992 24.704 79.168 15.072 99.84z"
        p-id="1910"></path>
</svg>

1、svgtoandroid插件

svgtoandroid插件，用过之后果然神清气爽。安装：File -> Setting -> Plugins -> Browser repositories -> 搜“svg2VectorDrawable” -> 安装并重启Android Studio，再次进来后顶部工具栏会多一个 "SVG" 的图标，点击图标导入刚刚下载从 Iconfont 上下载的svg图标即可。

勾选Batch选项，将对被选中文件夹中的.svg文件进行批量转换。nodpi会自动添加到没有后缀的drawable文件夹中。

2、手动导入svg

新建一个<vector></vector>标签的xml文件，通过观察文件内容，很容易获取到关键信息。width height自然对应<vector/>中宽高，viewBox后两位数字是分别对应<vector/>中的viewportWidth和viewportHeight，往下<path/>中的d的数据的对应<vector/>中<path/>中的pathData。fillColor自己手动设置。

3、Android Studio新建Vector Asset

Android Studio大发神威的时候到了。鼠标选中drawable文件夹，右键， New， Vector Asset， Local file，然后出现一个Configure Vector Asset的窗口。

先选本地文件（还能支持PSD，强吧），再到磁盘中找到之前下载的.svg矢量图。导入后可以为文件重命名（建议用svg_或者有区别于其它格式的前缀），默认导入宽高均为24dp，选中Override框则读取文件本来宽高，其它配置视需求而定。点击Next到下一页最后点Finish就导入了。自动导入需要格式化一下就是前面svg_ic_profile_right.xml的样子了。

总结

海搜比较耗时间，线条粗细啦，位置没居中啦，大小不搭配啦，关键是这些问题都是导入项目或者运行到手机后才能发现（非强迫症当我没说）。iconfont还有诸多成套的图标库，优点是风格大小一致，或者多彩图标。

矢量图的优点一大把，但也不是万能的。矢量图特别适合icon图标的应用场景，但是不能用于比如加载相册时，设置的placeholder或者error这类需要频繁切换回收的应用场景，否则会造成非常明显的卡顿，因为矢量图是不被硬件加速支持的。

Android 5.0推出已经有些年份了，也不知道Android开发圈对矢量图的使用情况，但知道比如微信这些大厂早已全面推广使用。然而在本人周边似乎自己算先驱了，所以才有了把过程中的一些经验总结分享出来的想法。

若资源对你有帮助，浏览后有很大收获，不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码，你可以扫描下方的二维码，关注DD博客微信公众号（ddblogs）。

或者你也可以关注我的新浪微博，了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间，可以对该博文进行评论，希望不吝赐教。

为保证及时回复，可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问，祝你生活愉快、工作顺心、欢迎常来逛逛。