看完本篇文章后，你也许不会再用png图片，来作为图标的格式。

1、解决图标在不同尺寸手机中模糊问题。

2、图标可以用css设置大小和颜色，方便修改。

3、优化图标大小，提升加载速度。

什么是SVG？

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

重点是SVG可缩放，针对不同终端，都可以完美适配大小。

为什么要使用SVG?

随着硬件快速的发展，Retina技术发展至今，已经应用到各种移动终端屏幕。目前主流的Retina显示器还是以devicePixelRatio = 2为主，但是为了更好的用户体验，前端的小伙伴们经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。

说的更具体些，例如，在做前端的过程中，有很长时间都是在用ps中切图好的图标，用于各种场景。这在pc网站中是没什么问题的。但是当这些图标应用在手机等不同尺寸的终端中，特别是Retina屏幕下，会因为屏幕分辨率等因素，导致图标锯齿状和模糊。

目前，SVG格式是公认最好的解决办法之一。

如何正确使用SVG？

首先要弄清项目运营环境，如果非要项目兼容IE6，不建议使用SVG，虽然网上也有接近兼容ie的办法，但也是牺牲加载速度前提下。

如果你的项目是手机网站项目、响应式网站项目，那么用SVG是非常正确和高效的选择。（网上有很多相关的资料供网友查看，我这里只介绍最简单的一种使用方式！）

1. 确定项目要用到什么样的图标，这里推荐一个网站：http://www.iconfont.cn/，各种SVG图标都能够找到，当然你也可以用AI自己设计，也可以用其他第三方网站下载。

2. 下载的SVG图标放在一个文件夹下，打开Icomoon网站：https://icomoon.io/app/。

点击Import Icons

3.选择本地下载好的SVG文件导入进来。

导入后图标

4.选中你要生成的SVG，点击右下方按钮，准备生成SVG的字体文件。

右下方按钮

5.确定没有问题后，点击download。

用默认设置下载即可

6.下载的文件里的“font”文件是用于自己项目，默认是4个扩展名的文件，这个font文件兼容了ie、firefox等浏览器。

4个图标文件

7.下载的文件里，显示如何使用font，非常方便。

注意事项

• 项目改变后，SVG可能更换，只需要把svg的文件重新上传到icomoon中，重新下载即可，但是要注意SVG的文件名统一，以防更新后，项目整体图标显示错误。

• icomoon下载的文件，如果要跟别的框架，比如bootstrap一起使用的话，需要把自带的font删除，重新合并即可。

• SVG这里我只表述一种应用方法，还有 SVGsprite，理论上跟css sprite无大区别。