矢量图代替PNG/JPG

最新推荐文章于 2025-04-29 01:35:18 发布

转载最新推荐文章于 2025-04-29 01:35:18 发布

· 3.4k 阅读

文章标签：

#矢量图

Android 专栏收录该内容

67 篇文章

订阅专栏

转自：https://www.jianshu.com/p/0555b8c1d26a

海量矢量图：http://iconfont.cn/

Android 应用开发时，会经常使用到图片。对于一些比较简单的图片，可以使用矢量图替代。

SVG

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。 SVG由W3C制定，是一个开放标准。

.svg格式相对于.jpg、.png甚至.webp具有较多优势。核心有两点：

省时间：图像与分辨率无关，收放自如，适配android的分辨率可谓一劳永逸；
省空间：体积小，一般复杂图像也能在数KB，图标更是不在话下

VectorDrawable

Google从Android5.0开始引入的一个新的Drawable子类，能够加载矢量图。虽然是个类，但是一般通过配置xml再设置到要使用的控件上。

Android工程中，在res/drawable/目录下，通过<vector></vector>标签描述。例如：svg_ic_arrow_right.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="8dp"
        android:height="8dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path
        android:fillColor="#ffffff"
        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

属性说明：

width，height：图片的宽高，可手动修改到所需尺寸；
viewportHeight，viewportWidth：对应于height，width等分的份数，以上述为例，可以想象将长宽都为8dp的正方形均分为24*24的网格，在这个网格中就可以很方便地描述点的坐标，图像就是这些点连接起来构成的；
fillColor：填充颜色。最好直接写明色值#xxxxxxxx，而不要用@color/some_color的形式，避免某些5.0以下的机型可能会报错；
pathData: 在2中描述的网格中作画的路径

获取矢量图

方式一：iconfront

根据下载的svg图片打开的源码可以看到图片的宽高等属性。如：

<?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 t="1490517024583" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
    <defs>
        <style type="text/css"></style>
    </defs>
    <path d="M288.86749 12.482601C272.260723-4.160867 245.369563-4.160867 228.720647 12.482601 212.15603 29.126068 212.15603 56.438425 228.720647 73.081892L704.289552 511.786622 228.720647 950.918109C212.15603 967.561574 212.15603 994.447175 228.720647 1011.517401 245.369563 1028.160866 272.260723 1028.160866 288.86749 1011.517401L794.952385 544.646802C803.803707 535.684935 807.597131 523.735776 807.007043 511.786622 807.597131 500.264224 803.803707 488.315065 794.952385 479.353198L288.86749 12.482601Z" p-id="1011"></path>
</svg>

文件里好多Android标签不认识，不过有三种解决办法。

大招

svgtoandroid插件，安装：File -> Setting -> Plugins -> Browser repositories -> 搜“svg2VectorDrawable” -> 安装并重启Android Studio，再次进来后顶部工具栏会多一个图标：

点击图标弹出对话框：

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

网上下载的svg资源往往一步到位，有个这个插件将会事半功倍。导入第一个svg文件时就命名成我们想要的名字，如果不满意再导入时无需再关注命名，将后面导入的pathData覆盖第一个观察效果，直到满意后删除不需要的文件。

2.手动

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

3.自动-Androi Studio

鼠标选中drawable文件夹，右键， New， Vector Asset， Local file，然后出现：

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