SVG图标使用心得

• 什么是SVG？
• SVG图标的发展历程
• SVG图标的特点
• • 相比icon font优势
  • 劣势
• SVG图标制作方法
• 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解释为文本，这意味着它们会受到抗锯齿的影响。因此，SVG往往看起来比icon font更锐利。
5. 图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取
6. 因为Iconfont的支持，使用Iconfont制作font-icon效率也大大提高。

劣势

1. SVG 做的图标在IE9+的浏览器渲染效果相当的差，所以在IE下我们我们不使用SVG ICON，我们可以将SVG转成一倍的png图片来进行替代。

SVG图标制作方法

目前制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等。

SVG图标使用方法

使用Iconfont制作图标后导出的资源文件支持三种使用方式，分别是unicode，font-clss 和 symbol。