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

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

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

小结：

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

（编辑：网站开发网_安阳站长网）

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