小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题

Sketch作为一个为UI设计而生的工具,全矢量、轻量级、像素级精准,非常适合做移动端应用类的界面设计和简单的扁平图标设计~

对一名UI设计师而言在工作中图标设计是日常必备的工作之一,如图~

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第1张图片

最近在设计图标的时候遇到了一个问题,在不懈努力中找到了解决办法,在这里和大家分享一下,我的小妙招!

问题是:sketch 导出SVG后上传到Icon Font 会出现描边消失的问题~

1)制作一个图标,导出为SVG格式

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第2张图片

2)打开 https://www.iconfont.cn/

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第3张图片

3) 上传图标

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第4张图片

4)边框消失了?

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第5张图片

以下是我的解决方案

用到了另一个大家经常用到的软件它就是  小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第6张图片,Sketch+Illustrator 能完美的解决描边问题;

1)打开AI软件,导入Sketch制作的SVG;

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第7张图片

2)选中图标-对象菜单-扩展

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第8张图片

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第9张图片

3)保存图标

4)打开 https://www.iconfont.cn/ 再次上传图标

小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题_第10张图片

描边出现了~~~~~~

以上就是我和大家分享的内容,你学会了么?

你可能感兴趣的:(小妙招-解决Sketch 设计的SVG 上传到iconfont无法显示描边的问题)