Android 矢量图标使用记录

01.SVG格式图片

我们在Android的应用开发中，经常会用到各种图标。有时候我们会在drawable目录下发现一些xml文件，却能够以图片的方式使用。打开后，我们能看到诸如pathData="M10,20h2v5h-2v-5z"这样意义不明的字符串，这其实是SVG的描述方法。这里主要记录了路径、填充方法等等。如下是一个简单的SVG文件以文本方式打开的内容。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#416DB4;}
</style>
<g id="XMLID_2_">
    <g id="XMLID_3_">
        <path id="XMLID_5_" class="st0" d="M20.6,2.9h0.9v18h-0.9V2.9L20.6,2.9z M18.9,2.9h0.6v18h-0.6V2.9L18.9,2.9z M16.9,2.9h1v18h-1
            V2.9L16.9,2.9z M14.9,2.9h1.5v18h-1.5V2.9L14.9,2.9z M13.5,2.9h0.5v18h-0.5V2.9L13.5,2.9z M11.5,2.9h1v18h-1V2.9L11.5,2.9z
             M9.6,2.9h1v18h-1V2.9L9.6,2.9z M8,2.9h0.6v18H8V2.9L8,2.9z M6,2.9h1.1v18H6V2.9L6,2.9z M4,2.9h1.5v18H4V2.9L4,2.9z M2.5,2.9h0.8
            v18H2.5V2.9L2.5,2.9z"/>
    </g>
</g>
</svg>

我们可以看到path标签中的内容就是我们需要的路径数据了。

02.路径数据简介

关于这个路径的描述方法，网络上也有很多资料，主要就是一下几点。
1. M：move to 移动绘制点
2. L：line to 直线
3. H：horizontal line 绘制从当前点到指定x坐标的直线。
4. V: vertical line 绘制从当前点到指定y坐标的直线。
5. Z：close 封闭图形
6. C：cubic bezier 三次贝塞尔曲线
7. Q：quatratic bezier 二次贝塞尔曲线
8. A：ellipse 圆弧

听说有大神直接手写path路径的，不过我们有软件可以直接绘制，能大大提高工作效率。不过弄清楚了这个路径数据的含义，以后看见了也不会一头雾水。

03. 推荐图标制作方法

使用AndroidStudio的插件Android Material Design Icon Generator 直接在AndroidStudio的Plugin里面搜索即可找到，可以直接生成Android的路径xml文件，也可以生成图片，内置了常用的图标，风格统一，使用方便。
使用PPT中的插件 ISlide 下载矢量图标，然后保存为emf等矢量图片文件，导入到Adobe Illustrator/CorelDraw 等软件中，保存为SVG格式导出，然后复制<path>标签内的数据即可。
直接使用Adobe Illustrator/CorelDraw 等软件绘制也是非常方便的。