SVG转字体图标
一. 问题？
- SVG和字体图标的区别是什么？为什么要转换使用？
- SVG如何转换字体图标？
- 转换过程中遇到的问题有哪些？
二. 解答
SVG和字体图标的区别以及转换字体图标的好处
SVG和字体图标都是矢量化图形
SVG（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。
字体图标采用的是字体渲染，利用字体工具把我们平时 Web 上用的图形图标转换成 web fonts，就成了字体图标，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示字体图标。它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。
使用字体图标的好处：
-
文件小：相比图片几十几百KB的容量，字体图标几乎是羽翼级轻量;
-
加载性能好：因为图标都被打包进一套字体内，http request（http请求） 减少。这如同我们常用的 css sprites（精灵图片） 技术。用几个引几个，不会影响加载速度;
-
支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
-
兼容性好：iconfont 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。
SVG如何转换ICON
首先打开ai格式的图，选中要操作的图层，进行切图并保存svg格式，然后打开icomoon在线转字体图标（参考icomoon文档）
1. AI转SVG
1.1 打开AI
1.2 打开需要切图的图片
1.3 找到需要切图的图层
1.4 Ctrl+C复制第三步选中的图层
1.5 Ctrl+N新建文档
1.6 Ctrl+V粘贴选中图层，如下图所示
1.7选择画布工具，调整画板大小(Alt+鼠标滚动调整画布以精确选择)
1.8 存储上一步粘贴的图层
存储svg格式到本地新建的文件夹
1.9 切图完成，在本地文件查看svg格式的图片
1.10 查看svg图片是否生成
2. SVG转ICON
使用icomoon完成svg转字体图标,借助在线生成工具https://icomoon.io/app/#/select点此链接进入
2.1 进入在线生成工具主页面
2.2 新建图集
2.3 添加.svg图片（可以使用现成的，也可以使用自定义的）
使用现成的--点击页面Import Icons...
使用自定义的--直接拖拽进图集即可添加
2.4 生成字体文件
（1）选择好要生成的图标（*选择）
（2）点击底部的："Generate Font"
2.5 可以*命名
2.6 修改完成后，点击download生成Font
2.7 下载压缩文件
2.8 运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。
2.9 根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。
也可以根据实际情况设置color改变其颜色。
三.转换过程中遇到的问题有哪些
- svg图标里面包含文字的时候不能正常转换，转换出来的ICON无法显示文字，如下图1所示：
解决办法：打开AI，选中字体部分，文字--创建轮廓--保存最新svg，然后重新用icomoon在线转字体图标...
- SVG到ICOMOON创建多个路径，如下图所示:
2.1 可以这样使用
<span class="icon-unknown-img">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</span>
显示出来的结果如下图所示
2.2 正常组合图标使用解决办法
2.2-1 因为您的svg文件中有多个路径，您需要在外部将它们合并在一起并再次导入
合并步骤:
- 打开AI--选中
- 转到对象>路径>轮廓化描边
- 然后选择全部
- 窗口>路径查找器>合并
- 保存并再次在线生成icomoon
2.2-2 因为icomoon只支持单色，您需要删除图标颜色且保存最新的svg并再次导入
删除颜色步骤:
打开选中的icomoon页面，如下图
点击Generate SVG & More 到如下页面
点击图片 到如下页面
点击箭头所指位置删除图标颜色，然后下载svg（Download【SVG】），重新导入
2.2-3 本人解决svg颜色不一致的问题
- 用电脑所安装的编辑器打开svg格式的图标
- 手动修改不同的颜色，如下图所示：
将.st0 .st1 .st2 .st2的fill全部手动修改为 #666
注：此办法是最笨的办法，不建议使用