Android应用开发之PNG、IconFont、SVG图标资源优化详解

========

最近因为一些个人私事导致好久没写博客了，多事之年总算要过去了，突然没了动力，所以赶紧先拿个最近项目中重构的一个小知识点充下数，老题重谈。

在我们App开发中大家可能都会有过如下痛疾（程序员和设计妹妹注意喽）：

• 好多小的图标好烦人，又占体积还要考虑分辨率，一拉伸就模糊等。

• 同一个图标不同状态还有不同颜色的多张。

• 总是幻想IOS、Android、Web等对于一个图标只切一次图多好。

如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案，当然了，采用下面方案对于重型应用或者固件级的优化才会十分明显，对于普通小应用那就要看自己了。

2 PNG、IconFont、SVG理论

========================

PNG为位图，是由不同的排列和染色的像素点组成的图像，当放大位图时就能清晰的看见无数个小方块（像马赛克一样），所以位图的扩大实质是增加单个像素点的大小，故而导致在不同分辨率表现非常糟糕。

SVG为可缩放矢量图，它不会像位图一样因为缩放而让图片质量下降，他在不同分辨率的表现都一样清晰。

IconFont是WebFont形式的图标，你可以把他认为就是WebFont，该类东东的制作来自于SVG矢量图，所以它不会像位图一样因为缩放而让图片质量下降，他在不同分辨率的表现都一样清晰。

下面我们简单给出这几种格式图标素材的对比：

| 图标类型 | 构成 | 优势 | 劣势 |

| — | — | — | — |

| PNG | 独立像素点 | 可以实现各种色彩及真实画面的复现 | 体积比较大，缩放和旋转易失真 |

| SVG | 向量 | 体积较小，缩放和旋转不失真 | 制作色彩变化太多的图象难度比较大 |

| IconFont | WebFont | 体积较小，缩放和旋转不失真 | 基本不支持多色彩图像，一般都是单色 |

有了上面这些对比之后，在正式开始实战之前我们先来简单粗暴了解下SVG与IconFont在App中的优点吧，不然下文就没有存在的意义喽，如下：

• 图标集中处理，设计妹妹只用出一次图喽。

• 减少重型应用或者固件大小，因为IconFont是字符串而不是图片，SVG的体积也小于PNG。

• 因为IconFont的绘制原理和普通文本一样，所以运行时会占用更小的内存空间。

听着挺诱人，好吊的样子，实际下面我们来看一下你就明白啦。

3 PNG、IconFont、SVG实战