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