四、基于Iconfont的设计规范
因为我们平时工作主要会借助iconfont这个平台，所以我们在制作图标的时候，一方面会遵循iconfont的一些图标制作规范，另一方面，如何去建立成套的icon图标体系，我们需要在一些方面进行思考，定义。
1、网格与尺寸
阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸：16X16、32X32、64X64、128X128；特设置了一个可以整除他们的尺寸：1024X1024px。在此基础上，进一步定义栅格及有效区域。
在16X16的栅格中绘制，那么16像素2的n倍都能应用，这样图标的边框就不会落在半个像素上，避免出现虚边、加粗等现象。
设计过程中预留 64px 的出血位，避免溢出。这样的预留也是与字体设计的规律保持一致的。
2、定义视觉基准线
根据几种常见的几何形状建立形状基准线。
为什么要这样做？这就涉及到了视觉偏差的问题。
由于视错觉带来的感知偏差，我们需要建立常见的形状基准做为向导，来达到各种形状样式的视觉统一感。
怎么建立？其实也是基于栅格，定义参考线。
省事的方法，就是我们根据antdesign的这组基准规范来制作图标。因为同是基于1024画板，遵循上面的基准线就很可以了。
3、角度
在图标设计中，当遇到角度的问题，有人会随意地定义，也有很多人会喜欢使用60°、90°。但这一方面缺乏规范性，一方面也难以满足实际的设计需求。在设计规范与视觉呈现上都相对缺乏。
在角度的设置上，我们需要有统一的规范。
举个栗子。可以从常规思路入手。图标区域的中心点为圆心，分成24等分，每一等分为15度。角度采用15倍数原则，从小到大以 15的规律递增。常用的规格是4种，分别为 30、75、90、120。
当然，也可以采用其他规则……比如antdesign就是收到美式战斗机F-14的启发，将常用角度定在约76度。
无论如何，在角度的设置上，遵循一定的倍数关系。
4、线条
一致的笔画宽度，是用线的基础。笔画具有内部平直，外部圆角的特点。
笔触轮廓和网格对齐，特殊情况下笔触轮廓与1/2处对齐，使之在使用过程中有较高的清晰度，看起来更加简洁工整。
5、圆角
当只设定一种圆角值无法满足设计需求时，我们需要设定多个圆角值。圆角的设置采取一定的倍数关系，如8的倍数。
以上图为例，最左边的，是四方的闭合图标样式，我们给他设定一种圆角；然后第2个，相对不规则的，我们设定一种；第三种开放性的，第四种大圆角……通过一些规则的建立，规范圆角的设置。
6、笔画末端
笔画末端是我们往往容易忽略的细节。但实际上末端如何处理，也需要进行规范定义。
上面是常见的末端处理方式：末端平直、末端圆角、末端圆头。在具体执行中用哪种？怎么用？并没有好坏之分，根据需求规范定义即可。
比如说：如果我们采用末端平直，那其实我们在设计图标的时候，也不适合用圆角了，不然视觉呈现不统一。另一方面，末端平直给人坚硬的视觉感受，在设计的时候也要考虑到情感的传递。末端圆角过渡自然，也非常细节。但在制作上会相对费功夫一些，基本上需要逐个设置，并且还要兼顾对齐栅格。末端圆头好操作，末端的处理也相对柔和……总之，具体在执行的过程中，都需要多方面考虑。
6、视觉校正
极端情况下必要的校正能够增加图标的清晰度与视觉美感。所以纵然我们在设计过程中制定了一系列的规范，但规范是死的，设计是活的，必要时，也需要打破规范，以求整体上的统一。
结语
以上就是从视觉设计师的角度，对SVG图标的解析。希望能对大家有帮助。SVG图标的制作，简单，又不简单。怎样真正掌握？还是需要大家在实践中不断思考，加深理解，真正消化为自己的知识。
