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,放大后有锯齿或模糊现象。

使用字体图标的好处:

文件小:相比图片几十几百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

打开AI

1.2 打开需要切图的图片

打开图片

1.3 找到需要切图的图层

找到切图

1.4 Ctrl+C复制第三步选中的图层

1.5 Ctrl+N新建文档

新建文档

1.6 Ctrl+V粘贴选中图层,如下图所示

新建文档完成

1.7选择画布工具,调整画板大小(Alt+鼠标滚动调整画布以精确选择)

调整画布

1.8 存储上一步粘贴的图层

存储svg

存储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在线转字体图标...

下载出来的文件

  1. SVG到ICOMOON创建多个路径,如下图所示:

下载出来的文件

2.1 可以这样使用

1<span class="icon-unknown-img"> 2 <span class="path1"></span> 3 <span class="path2"></span> 4 <span class="path3"></span> 5</span> 6

显示出来的结果如下图所示

下载出来的文件

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
注:此办法是最笨的办法,不建议使用

完成

转载于:https://www.cnblogs.com/HeHeSha/p/10019903.html

代码交流 2021