SVG图标绘制

一、图标绘制范围

绘制工具：AI、SKETCH

另外不建议使用PS，因为虽然PS也可以导出SVG，但是PS在绘制有弧度的形状时，会不可避免的出现次级像素，导出SVG则会出现各种"毛刺"，形状也会出现细微的变化，即便控制在最小的程度，回过头还是需要在AI中调整

以下全以AI为绘制工具讲解

绘制图标以常见尺寸48*48为标准，留白左右各4px

图标绘制模板

模板下载地址：http://pan.baidu.com/s/1eRPyJGu

---

绘制区域一般保持在方形区域内

1号区域：制作圆形图标时，请在该区域绘制

2号区域：该区域为，方形图标保持为了与圆形图标视觉平衡而缩小的绘制区域

3号区域：图标最大绘制区域

内容绘制区域标识

---

不规则图标绘制区域需要对参考线进行调整

绘制区域调整

蓝色区域即是不规则图标绘制区域，如下：

图标可适当超出绘制区域

有倾斜角度的图标也一样，先绘制好水平或者纵向的图标然后再进行角度倾斜的处理，而45°是最优角度，因为倾斜所导致的锯齿是最小的。

例如：

旋转后的图标少量超出最大绘制区域属正常现象

范例总结：

   ——  不规则图标绘制方法的图片引自《图标绘制规范：方寸之间皆有讲究》  海边来的设计师

二、图标绘制风格

目前主流图标风格一般有三种：

单色、多色

在实际应用当中，产品或者项目之间使用的通用图标库以单色图标为标准，尽量减少细节，因为图标在小尺寸的应用过程中会造成细节的丢失

手机淘宝图标库

而对于多色类，面+线的图标类型，一般应用于针对某项目而定制化的图标

指标网-成本估算-业态分类图标

三、绘制规则

在阿里巴巴矢量图标库上，基本列出了SVG图标在绘制的时候需要注意的情况

绘制规则

总结一下其实就是

1.单色单层形状、2.禁用描边、3、弧度区域不要有多余节点、4.注意绘制范围

PS：输出SVG时一定要合并形状，生成图标字体时代码中会生成多个path，不经xy轴调整会导致图层错位，很麻烦

具体操作：选中所有图层 > 联集 > 建立复合路径 > 扩展

快捷操作：选中所有图层，按住option键点击布尔运算的联集按钮，从而激活扩展，点击扩展

路径查找器

多色图标绘制时注意的细节和单色图标一致，只不过只能同色的形状建立复合路径，跨色合并会变成一种颜色。

多色之间不能合并

输出iconfont字体图标

一、输出平台

阿里巴巴矢量图标库

阿里巴巴矢量图标库

icomoon

icomoon

平台不过多举例，比较好用的就是这两个平台，相对阿里巴巴，icomoon平台可以针对多色图标对IE6/7/8有更好的支持，而阿里对多色只支持到IE9。后面的输出流程也是以icomoon为标准进行梳理。

二、输出流程

1.点击首页右上角的IcoMoon App按钮，进入操作界面

2.点击左上角直接点击Import Icons上传SVG文件

选择SVG图标文件

3.上传之后选中所有的图标，然后点击右下角 Generat Font 生成字体的按钮

PS：上传时尽量保持图标颜色统一，虽然设计师需要把每一个图标的颜色调整一遍，麻烦了一些，但是为了后期方便查看，不会杂乱无章，还是值得的。

（ 下图我就没有统一颜色，典型的反例，(⊙﹏⊙)b ）

然后在前端同学引用的时候再按照标注，规定每一个图标的color值就OK了

选中所有图标

4.点击左上角的设置按钮，在弹层中勾选对IE6/7/8的支持选项，设置完毕之后下载字体包

设置

5.生成字体包，可以打开demo.html进行图标的预览

生成图标字体文件包

至此，就可以把生成的文件交给前端同学进行开发了。

那么，设计的同学该怎么使用iconfont呢，也很简单

1.首先我们打开下载好的iconfont文件夹-->fonts-->找到命名好的字体，然后安装字体

选择字体进行安装

然后就是使用

主要针对 2 个常用软件来说明，分别是 AI 和 PS

AI2014 ： 文字 > 字形

PS2015： 文字 > 面板 > 字形面板

打开面板之后，找到自己的字体，就可以看到自己的图标都在里面了，使用也很简单，和输入文字一样，直接在面板里面双击即可。