使用icomoon把svg图片生成字体图标

今天看了使用icomoon来将svg转换成图标字体，本来是不会使用别人给的svg，也不清楚具体的好处是什么，查了svg以后，越来越懵，svg挺好的为什么要转成图标字体呢。

一、SVG介绍

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。CSS 也可以使用 SVG 文件。SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

二、疑惑：SVG和字体图标的区别是什么？为什么要转换使用？

SVG和字体图标都是矢量化图形

SVG是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。

字体图标采用的是字体渲染，利用字体工具把我们平时 Web 上用的图形图标转换成 web fonts，就成了字体图标，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示字体图标。它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。

使用字体图标的好处：

1. 文件小：相比图片几十几百KB的容量，字体图标几乎是羽翼级轻量;

2. 加载性能好：因为图标都被打包进一套字体内，http request（http请求） 减少。这如同我们常用的 css sprites（精灵图片） 技术。用几个引几个，不会影响加载速度;

3. 支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…

4. 兼容性好：iconfont 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。

三、SVG如何转换字体图标？

使用icomoon完成svg转字体图标，icomoon 可以将.svg结尾的文件生成字体图标, 字体图标放大缩小的时候不会失真

1.首先进入IcoMoon的首页  https://icomoon.io/，找到右上角的icomoon App，点击进入

2.点击选择自己的svg文件，将其导入，并选择自己要下载的图标

下载字体图标文件。下载成功了，使用起来也比较简单。