在Sketch中制作SVG格式图标导出和优化小窍门

时隔一年，日常使用时还是碰到了新坑，需要再重新整理一下问题及解决方法，自取所需

1、图标导出后路径错误/重叠/缺失 

2、图标画的时候尺寸明明一样，开发拿去就大小不一，排不整齐

3、关于批量处理的问题

4、关于压缩优化文件体积的问题

1、sketch里画的图标导出后路径错误/重叠/缺失 解决方法

sketch直接导出的svg有大约几百分之一的概率无法正常显示，尤其是一个面中间布尔挖掉一块的这种路径容易重复，或者布尔的方式发生错误，相交变成相减之类的，需要导入到AI软件中重新整理路径，获得最精简的路径之后再导出。具体步骤可以查看分割线以下之前写过的步骤，不赘述。

2、图标画的时候尺寸明明一样，开发拿去就大小不一，排不整齐 解决方法

   以上图为例，不同图标的画板尺寸一致，但是负空间大小不一致，直接导出的时候就会变成这样子

这样在前端小伙伴使用的时候，很难调整尺寸，非常需要设计师在导出时就把负空间的大小确定下来，才能获得理想的开发结果，解决方法如下：

a、在固定尺寸的画板中制作图标，导出时选中整个画板导出，画板尺寸保持一致，就可以获得一致的尺寸

直接选中整个画板导出，负空间的尺寸就被固定下来了

b、如果不是在单独的画板中制作的图标呢？可以放入AI中调整画板尺寸后导出

选中画板设置

弹窗中选中编辑画板

将宽高设定好之后保存

3、关于批量处理的问题 

评论中有提到如何批量处理，很可惜AI自带的批处理命令里没法把调整画板尺寸的操作录进去，改格式倒是可以，但仅限于一般按照功能或含义命名的图标。按照这种目录树规范命名的方式，导出的存储路径是每个图标不同的，批处理也没法处理，会让保存路径乱掉，还是只能手工一个一个的改和存。

4、关于压缩优化文件体积的问题

原文中推荐的svgomg网站最近打不开了，推荐另一个也是把svgo服务封装的国产小工具，一样好用

https://www.zhangxinxu.com/sp/svgo/

如有任何版权问题请联系我删掉

--------------------------------------------------------------更新分界线------------------------------------------------------------------------

对SVG格式支持的最好的软件还是AI，但是有时候图方便就在Sketch里面把图标画了，省的在两个软件中间转来转去。

结果要切图交付准备美滋滋下班的时候，开发大哥说你的图有问题。Excuse me？都这个点了哪有时间再去AI里重新画一遍？？没事，哪里进坑的我们从哪里爬出来，下面分享并记录下解决方法。

假如我们在Sketch里面画了这样一个笑脸

直接用导出功能出来之后，在浏览器里面变成了一个黑脸（我也想黑脸）

这时候浏览器里查看代码看一下

额，好长，而且不知道是什么。请教了开发之后我们尝试看看里面都出了什么问题

path是路径的意思，做设计的都知道路径是有很多个锚点连在一起组成的，path后面那么多数字就是锚点的坐标。复杂的图形锚点就多了，但是我们这个笑脸很简单，后面应该有优化的空间。关键是，我们的笑脸只有一个面，不应该出现两个path，这就是黑脸的原因了，原来是眼睛嘴巴的位置填充了多余的一个路径。非常遗憾Sketch解决不了这个问题，只能AI上了

AI打开~直接将这个SVG导入到AI中，图层面板里就可以找到这些多余的东西，去掉显然不会影响图案，放心大胆的删

删掉之后用保存为，选择SVG格式，这里需要选择SVG Tiny1.1，否则safari浏览器会有不兼容的问题

再看代码，path已经只剩一个，锚点坐标也瘦身了很多

现在关键问题已经解决，就是有点儿强迫症啊，发现了一个进一步优化SVG体积的好工具SVGOMG，墙裂安利一下

界面超级简单，里面的设置用默认的就行

拖拽进去下载出来，相比最开始瘦了6倍，虽然几个k看起来不多，积少成多也是很可观了

对比下看看，我也终于感受到代码少了的那种爽哈哈

啰嗦一句，直接把显示有问题的SVG拿去SVGOMG瘦身是不行的哈，多余的path还是得在AI里删掉。今天的分享就是这样，谢谢大家，点赞的小主貌美如花，帅到银河对岸