SVG图标使用心得

什么是SVG？

SVG（可缩放矢量图形）允许矢量图形显示在浏览器中。SVG正在迅速成为网络图标和动画的新标准。它们不仅提供出色的缩放，而且它们通常比图标字体更快速，更可靠地呈现。由于矢量图形完全由代码组成，因此不必从大型外部文件导入它们。它们的尺寸也比典型的JPG或PNG以及大多数图标字体库小得多。

SVG图标的发展历程

1. 2001年9月4日，发布SVG 1.0
2. 2003年1月4日，发布SVG 1.1
3. 2003年1月14日，推出SVG移动子版本：SVG Tiny和SVG Basic
4. 2008年12月22日，發布SVG Tiny 1.2
5. 2011年8月16日，發布SVG 1.1（第2版），成为W3C目前推荐的标准
6. W3C目前仍正在研究制定SVG 2

SVG图标的特点

相比icon font优势

1. font-icon比png 图标的优点是矢量（任意缩放也不失真），可通过css样式控制大小颜色，体积更小（可被缓存）。
2. icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好。
3. icon font做为字体无法支持多色图形，这就对设计造成了许多限制，因此这也成为了icon font的一个瓶颈。
4. 虽然SVG和图标字体都是基于矢量的，但浏览器会将icon font解释为文本，