SVG转字体图标

SVG转字体图标

一. 问题？

1. SVG和字体图标的区别是什么？为什么要转换使用？
2. SVG如何转换字体图标？
3. 转换过程中遇到的问题有哪些？

二. 解答

SVG和字体图标的区别以及转换字体图标的好处

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

SVG（英语：Scalable Vector Graphics，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如何转换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文件放到相应的项目中。

@font-face详解

2.9 根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

也可以根据实际情况设置color改变其颜色。

三.转换过程中遇到的问题有哪些

1. svg图标里面包含文字的时候不能正常转换，转换出来的ICON无法显示文字，如下图1所示：

解决办法：打开AI，选中字体部分，文字--创建轮廓--保存最新svg，然后重新用icomoon在线转字体图标...

2. 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文件中有多个路径，您需要在外部将它们合并在一起并再次导入

合并步骤:

1. 打开AI--选中
2. 转到对象>路径>轮廓化描边
3. 然后选择全部
4. 窗口>路径查找器>合并
5. 保存并再次在线生成icomoon

2.2-2 因为icomoon只支持单色，您需要删除图标颜色且保存最新的svg并再次导入

删除颜色步骤:

打开选中的icomoon页面，如下图

点击Generate SVG & More 到如下页面

点击图片 到如下页面

点击箭头所指位置删除图标颜色，然后下载svg（Download【SVG】），重新导入

2.2-3 本人解决svg颜色不一致的问题

1. 用电脑所安装的编辑器打开svg格式的图标
2. 手动修改不同的颜色，如下图所示：

将.st0 .st1 .st2 .st2的fill全部手动修改为 #666
注：此办法是最笨的办法，不建议使用

完成