为解决图标1x、2x、3x多种尺寸的问题，大家经常会想到svg或者iconfont图标库。这里我们不比较svg与iconfont两种形式的优缺点，单独对svg图标库进行研究，找到它的不足，并给出弥补这种不足的解决方法。
首先明确一下svg图标的优点，这也是我们舍弃传统的位图，使用svg图的原因所在：
?图形自由缩放不发虚
?图形大小可通过CSS自由控制
?图形颜色可通过CSS自由赋予
?图形的不同区域可赋予不同颜色
?同一图形可通过改变大小及颜色用于不同场景
也就是说，只要图形形状没发生变化，那就只需要一个svg图，而不会出现像位图那样即便形状完全一样，只要大小、颜色任意一项发生变化就需要输出一套新图标的情况。举个例子，假设我们已经给开发同学提供了一个加号svg图标，并用于tabbar上，大小为24*24，颜色为#FFFFFF，若有其他情况也需要用到这个加号图标，但大小跟颜色都有所不同时，我们不用再重新切图，只需要将尺寸及色值给到开发同学，开发同学继续调用这个svg图标，并赋予新给出的大小与颜色。这样会大大的降低图标维护成本，提高设计与开发之间的协作便利性。
svg虽说是矢量图形，放大缩小都不会影响图形本身的锐利程度，但受限于屏幕显示机制的原因，如果图形缩放一定倍率后，边缘没有对齐到像素，屏幕显示时还是会模糊、不锐利。其实从本质上说，这并不是svg的原因，因为不管在缩放什么倍率，svg图形本身是不会模糊或者虚化的，只是因为屏幕的显示机制缺陷，才造成了svg图标在一些情况下看起来模糊不清。而我们要做的工作，就是通过控制svg图标的部分特性，来实现对屏幕显示缺陷的规避，进而实现清晰锐利的图标显示效果。
我们发现，svg图标在缩放过程中，有几个关键因素可能会影响到图形的显示效果：图标绘制尺寸L、缩放倍率i、线宽b、绘制时安全区宽度p，如下图
可能有同学会问为什么n.5也能满足，这里补充一下，因为绘制图标时一般使用sketch软件，并将画板设定为x1尺寸，所以当图标线宽或绘制时安全区宽度为n.5时在X2后依然可以得到整数，自然可以保证边缘对齐到像素。但如果是针对web的设计，尽量对齐到整数像素，毕竟高清或retina屏电脑还没有达到手机高清屏的普及程度。
接下来我们通过详细的数据计算、验证，提炼出一些通用规则，方便大家使用。
目的：一套svg图标满足一个产品所有图标需求。
难点：保证放大或缩小后的图标边缘全部对齐到整数或.5个像素。
影响因子：图标绘制尺寸L、缩放倍率i、线宽b、绘制时安全区宽度p。
画板尺寸：375*667、375*812
正文：
图标类型分为线型、面型、线面接合型三种，三种图标影响像素锐度的因子有所不同。
线型影响因子：图标绘制尺寸、缩放倍率、线宽、绘制时安全区宽度；
面型影响因子：图标绘制尺寸、缩放倍率、绘制时安全区宽度；
线面接合型影响因子：图标绘制尺寸、缩放倍率、线宽、绘制时安全区宽度；
其中线型与线面型因为影响因子相同可以归为一类，视为一种。
一、图标绘制尺寸L与缩放倍率i
我们发现，设计时常用图标尺寸一般在12-36px之间。为了方便绘制的时候查看页面效果，我们可以从中选择一个尺寸作为绘制尺寸，然后通过设定缩放倍率来获得其他尺寸的图标。
因为L值只能为偶数，所以可选的L值有12、14、16、18、20、22、24、26、28、30、32、34、36。如果要满足所有缩放后的图标尺寸也是偶数，则需满足图标尺寸是4的倍数，即可选L值为12、16、20、24、28、32、36。
?L=12时
所以，可用icon尺寸为：12、18、24、30、36
?L=16时
7所以，可用icon尺寸为：16、24、32
?L=20时
所以，可用icon尺寸为：20、30
?L=24时
所以，可用icon尺寸为：12、16、24、36
?L=28时
所以，可用icon尺寸为：14、28
?L=32时
所以，可用icon尺寸为：16、32
?L=36时
所以，可用icon尺寸为：12、18、24、36
综上，L=20、28、32时可用尺寸数太少，不宜使用，我们可选的L值为12、16、24、36。其中L=12或16时，最小值即为绘制值；L=24或36时，L为中间值，分别向上递增向下递减速。
L=12时，可用尺寸为：12、18（x1.5）、24（x2）、30（x2.5）、36（x3）；
L=16时，可用尺寸为：16、24（x1.5）、32（x2）；
L=24时，可用尺寸为：12（x1/2）、16（x1/1.5）、24、36（x1.5）;
L=36时，可用尺寸为：12（x1/3）、18（x1/2）、24（x1/1.5）、36
二、绘制时安全区宽度p
图标绘制尺寸L及缩放倍率i确定后，相当于可用图标尺寸已全部确定。这时我们还需要保证图标绘制时安全区宽度p在做相应缩放后为整数或者n.5，且当p=n.5时，缩放倍率i≠n.5，否则会出现.25或者.75的情况，无法对齐到像素。而我们前文也验证了，若不能采用n.5倍率，可用图标尺寸会比较少且图标尺寸跨度比较大，不能满足现实需求。因此，绘制时安全区宽度p≠n.5，p只能取整数。
当L=12或16时，绘制时安全区宽度取1或2时都能满足缩放后对齐到像素或者.5像素；但当p=2时，安全区面积所占比例分别达到了55.56%和43.75%，造成绘制区域过小，不符合要求，所以绘制时安全区宽度p只能取1。
当L=24时，L为中间值；若p=1，则向下计算时，12、16尺寸下绘制时安全区宽度分别为0.5和2/3，无法对齐到像素，不符合要求；若p=2，则向下计算时，16尺寸下绘制时安全区宽度为4/3，无法对齐到像素，不符合要求；若p=3，则向下向上皆可对齐到像素，但是安全区面积所占比例达到了43.75%，造成绘制区域过小，不符合要求。因此L=24时，不能满足设计需求。
当L=36时，L即为最大值；p=1或2时，12、18、24至少同时有2个不能满足对齐到像素；p=3时，12、18、24时安全区宽度分别为1、1.5、2，都能对齐到像素或.5像素。
因此，在满足p值符合要求的前提下，可用绘制尺寸L只能取12、16或36三种，12与16时p值为1，36时p值为3。另外我们也发现，L=12或36时，结果已基本趋同，且L=36的结果被包含于L=12的结果中，所以可选L值可以缩减为两种，分别为12及16。
综上，
L=12时，p=1；
L=16时，p=1。
三、绘制时线宽b
因为缩放倍率i一定会有等于n.5的情况，为保证缩放后线宽都对齐到像素，就要求绘制时线宽b必须像p值一样必须取整数，所以
L=12时，b=1、2、3…
L=16时，b=1、2、3…
四、结论
4.1、若绘制面型图标
L=12时，p=1，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；
L=16时，p=1，i=1.5、2、2.5，可选图标大小为：16、24、32、40；
4.2、若绘制线型图标
L=12时，p=1，b=1、2，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；
L=16时，p=1，b=1、2、3，i=1.5、2、2.5，可选图标大小为：16、24、32、40。
五、延展
是否可以基于2个L值绘制图标？
即我们可以选取12与16，或者16与24两个L值来绘制图标，这种情况下我们只需要保证缩放倍率为整数即可，也可以获得满足设计需要的不同icon尺寸。比如：
L为12与16时，可得图标尺寸12、24、16、32；
L为16与24时，可得16、32、12、24；
但是基于两个L值进行图标绘制时会产生两种尺寸的svg图标，增加维护和使用成本，还容易出现同一图标两种尺寸的情况，造成图标冗余。好处是方便图标绘制，提高图标的绘制便捷性。
L=12与16，或L=16与24时
安全区为1.5时，一则不方便图形绘制，二则16px下安全区为1.5会造成安全区占比过大，故方便起见，在12与16的情况下，安全区都设置为1。
也就是说如果绘制时L值取两个，安全区宽度p的设定可以固化为基于12与16大小情况下都为1，基于24的则为2；而线宽b的值可以根据绘制风格从上方表格中自由选取。
哇哦这个讲的太清楚了最近在看有关像素对齐的知识想到各种情况的适配有点头大看到这个豁然开朗