图片都切成正方形一定是对的么？矢量图形一定是体积最小的么？iconfont一定是矢量图形么？这些答案都隐藏在本文中，让我们带着疑问一起探索吧。切图格式从最早的PNG，也是应用最多的，到后来的Iconfont和SVG，他们之间到底有什么区别。本文将从大小、视觉、便捷性上逐一对比。

同一icon，见下图，设计尺寸为24x24

比大小

PNG：在不压缩的情况下@3x切图大小为973B，tinypng压缩后为428B；

SVG：在不压缩的情况下大小为2.17KB，vecta压缩后为1.1KB；

Iconfont：TTF格式无法压缩，大小为1.68KB；WOFF格式大小为1.08KB；（SVG格式大小为1.31KB）（109个文件合并到一起的字体文件大小为100KB）；在占用空间上，即使是3倍切图，PNG仍然是最小的，压缩后比svg和iconfont占用空间小50%左右（不同icon会有所差别）。

比视觉还原度

PNG：可以100%视觉还原（IOS、Android需要根据分辨率匹配不同的倍数；web端直接采用3倍切图，可以满足100%视觉还原-为什么web端要采用3倍图？web端屏幕分辨率为 100%时，实际上只有2倍屏，但在100%的屏幕分辨率下，页面显示字体字体较小，用户往往更改屏幕分辨率为150%/125%，采用2倍切图就会变得模糊）

SVG：可以100%视觉还原（要真正100%与设计稿一致，需要在导出svg切图的时候，图形边缘不留有空白，如果留有空白会导致原本像素对齐的边缘不再对齐到像素；但如果不统一切成正方形会增加开发成本）

Iconfont：无法100%视觉还原，(在采用字体格式时，并非真正的矢量图形，尤其是在web端处理较小的icon时，由于浏览器把它当做字体渲染时进行抗锯齿处理，这会导致同一粗细的描边会变得粗细不一）

比便捷性

PNG：需要压缩处理，不便于前端管理；IOS、Android需要区分2倍、3倍图；设计成本低

SVG：需要压缩处理，不便于前端管理；无需区分2倍、3倍图；设计成本低

Iconfont：无法压缩处理，便于前端管理；无需区分2倍、3倍图；设计成本高（需要特殊处理图标和上传）

在大小性能上PNG＞svg＞iconfont；在视觉还原度上SVG＞PNG＞iconfont；在管理便捷性上Iconfont＞PNG＞svg。在设计成本上PNG＜SVG＜Iconfont；在开发成本上，Iconfont＜PNG＜SVG。

从设计的角度综合考虑，SVG是最优的选择，其次是PNG。

开发同学一般都喜欢用iconfont，因为便于他们管理。我最不想他们用的就是iconfont，因为实现效果跟设计稿有很大出入，尤其是在web端，图标较小、描边较细且存在半像素描边的时候。但用SVG单个文件对于开发成本又太高。

到底是用iconfont还是SVG，在与开发同学多次讨论后发现：iconfont视觉还原度差主要是因为引用了TFF等字体格式，iconfont上其实提供了多种格式，只要让前端采用svg格式就可以解决这个问题。（iconfont是强制正方形画布，图形边缘留有空白会导致原本像素对齐的边缘发生变化，不过在可接受范围内）PS：SVG支持多色，但不支持渐变色和投影。

PS：SVG支持多色，但不支持渐变色和投影。 

Powered by Froala Editor