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平台可以针对多色图标对IE6/7/8有更好的支持，而阿里对多色只支持到IE9。后面的输出流程也是以icomoon为标准进行梳理。
二、输出流程
1.点击首页右上角的IcoMoon App按钮，进入操作界面
2.点击左上角直接点击Import Icons上传SVG文件
3.上传之后选中所有的图标，然后点击右下角 Generat Font 生成字体的按钮
PS：上传时尽量保持图标颜色统一，虽然设计师需要把每一个图标的颜色调整一遍，麻烦了一些，但是为了后期方便查看，不会杂乱无章，还是值得的。
（ 下图我就没有统一颜色，典型的反例，(⊙﹏⊙)b ）
然后在前端同学引用的时候再按照标注，规定每一个图标的color值就OK了
4.点击左上角的设置按钮，在弹层中勾选对IE6/7/8的支持选项，设置完毕之后下载字体包
5.生成字体包，可以打开demo.html进行图标的预览
至此，就可以把生成的文件交给前端同学进行开发了。
那么，设计的同学该怎么使用iconfont呢，也很简单
1.首先我们打开下载好的iconfont文件夹-->fonts-->找到命名好的字体，然后安装字体
然后就是使用
主要针对 2 个常用软件来说明，分别是 AI 和 PS
AI2014 ： 文字 > 字形
PS2015： 文字 > 面板 > 字形面板
打开面板之后，找到自己的字体，就可以看到自己的图标都在里面了，使用也很简单，和输入文字一样，直接在面板里面双击即可。