为网页添加高清SVG ICON解决方案（上）

什么是SVG？ SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。简单的说他就是一个可伸缩矢量图形 (Scalable Vector Graphics)，在浏览器中采用绘图技术。

接下来我们来看看使用iconfont和使用SVG做出来的图标有什么差异：

Chrome下效果

FF下效果

IE9下效果

上面的demo分别在不同浏览器下的效果，第一行用的是iconfont实现，下面三行都是用的SVG实现的图标，只是调用SVG时的方法不同：第一行是用inline SVG，将SVG直接写在html中来使用，第二行是用的img标签去调用SVG，第三行用样式的background来调用SVG文件。从Chrome和FF下的显示效果，我们看到SVG画的ICON的质量确实是比iconfont要好，iconfont做的图标，我截图后放大后看到线的边缘发虚了，这是因为字体渲染的原因导致，在FF下也是发虚，只是不那么明显。在IE9+下的效果上我们看到IE对SVG的支持性着实差的令人无法直视，IE10，IE11效果和IE9几乎一样（真的是坑爹）。

如何绘制高质量ICON

在上面的demo中眼尖的同学应该可以看出在FF下，inline SVG图标有一个出问题了，然而Chrome却是正常的：

但左边那个图标却是正常的，相当不科学，如果是渲染问题理应左边的也发虚才对，但是却只有右边的出问题了，定位了很久问题出在哪里，最后发现是画AI文件时出问题了，AI本身不像PS那样，有网格辅助视觉画图，所以iconfont.cn出了一个AI模板，其实这套模板就是给AI画了一套辅助线，帮助设计师按照栅格画ICON，我前面的案例就是用的他们提供的模板画的图标，第一个没问题，但是第二个出问题了。他们这套AI模板实际导出后的画布大小是1002px1002px，然后分成1616个格子，也就是每个格子实际分得62.625px*62.625px，其实在很多时候貌似不会出问题的，但是我的demo中却出问题了，于是猜测：

是否是绘制图标出问题了，没有按照某种规范画法？ 是否是因为他的网格不能被整除导致的？

1、由于绘制这个锁型的图标时我们留下了一个单数列，会不会因为这样导致了他出现锯齿，如果是，那问题就来了，如果一定要左右对称或者每次画图都要铺满所有格子，这种做法不太现实，因为很多图标是不一定都全部能铺满16*16的格子。

2、发现iconfont这套模板的网格有些问题，画布网格竟然有1px像素是留空的，也是说16格子其实是1001/16=62.5625px，虽说画布是1002px，不知道这是否是人工失误。

决心和视觉自己做一套AI模板，AI模板也是1616的网格，但是每个网格将他们的实际导出像素设置成1px,也就是整个画布是16px16px，这样的就不怕不会被整除了。然后用新AI模板重新做了三个图标，进行测试，左右上下对称的做了一个，不能左右对称的做了一个，左右上下不能对称的也做了一份。，然后导出效果查看：

按照这套模板做了图标后，FF下面三个图标都是完美的，没有出现虚边，并且Chrome也同样是完好的，这是我们希望看的的。也证实了上面的两个问题猜测是正确的。所以这套AI模板是完全可以满足不同场景图标绘制。

小结：

本文介绍了字体渲染机制，并分析iconfont出现锯齿的底层原因，再到如何绘制高质量SVG ICON的步骤和输出了一套严谨的AI绘制图标模板。

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!