如何在Sketch里将描边导出成SVG格式

Sketch里矢量图形可以直接获取SVG代码的功能已经存在好几个版本啦，虽然sketch版本更迭很快，但是这个功能还有待进一步完善。

SVG是一种智能大小可调的矢量图形格式，但是遗憾的是这个格式现在还不支持内描边和外描边。据说SVG2.0将会支持内外描边，但是目前的1.1版本还是不支持的。

所以，能够导出SVG格式的软件都必须面临一个问题：

如果设计中使用了内描边或者外描边，这些图层怎么才能被还原成跟设计完全相同的SVG图形呢？

通常有以下三种方式：

1.将描边转成形状：将描边成填充的图像。（Sketch：layer-convert to outlines）
2.切换成居中描边，然后用蒙版内部和外部各遮一半。
3.切换成居中描边，然后手动调整路径上的每一个（嗯，每一个）锚点到相应位置。

第一种方法，确实能够还原SVG的形状，但是也有些不可避免的缺点，比如文件尺寸相对较大。同时，描边的大小不可以通过改变stroke-width来调整。除此之外，线性描边（<path>元素）跟浏览器中SVG的描边相对应的，通过使用css就可以完成icon颜色的修改。
第二种方法，使得SVG的大小和复杂程度都增加了，这更倾向于破坏而不是还原设计。
第三种方法，相比前两种，这种能够减小文件尺寸同时最大程度的还原设计。

尽管第三种是最优方案，但是在导出前手动调节非规则几何图形实在太浪费时间啦。

第三种方法的痛苦，你不懂

深入讨论之前，需要注意的是SVG图形用stroke而不是border表示描边。事实上，他们两个是同种东西，但是在sketch里面图形未导出对应的描边是border，但是在导出后的SVG图形中描边就是stroke。

Sketch43可以还原居中描边

新版Sketch43里当你导出SVG文件时，居中描边在开发中可以被像素级还原。这也是Sketch软件的过人之处，其他任何设计软件都不能导出这么小这么可靠的SVG文件。

新版本软件在过去几个月的工作中都表现良好，但是有时也会出bug-在重塑外描边的SVG路径时出现多余的锚点，这个bug并不会对工作造成巨大的影响，同时，Sketch团队也意识到了这个bug。

One more thing

如果，你懂点代码，你会发现当一个在sketch里又有描边又有填充的矢量图形，在SVG的代码中会发生些小变化。比如，一个填充颜色是亮绿色描边是深绿色的圆形。如果描边是居中的，当导出SVG时，会将fill和stroke两个行叠加在同一个<cricle>元素上。但如果描边是内描边或者外描边，导出的SVG代码就会变化很大：sketch自动将描边和填充分别加在两个<cricle>元素上，承载fill的圆形会被放入<defs>元素中，同时引入<use>元素。事例如下：

填充（ fill）+ 居中描边（ centered border）

填充（ fill）+ 内／外描边（ inside／outside border）

在sketch里设计时，我们很少将矢量元素分成填充和描边两个形状。通常我们希望所导出的SVG能像素级还原设计稿同时尺寸尽可能的小。

正如下面的代码原型所示，带有填充和内部或外部描边的图层的文件尺寸通常会比居中描边的大。另外一个比较严重的缺陷是在描边和填充图层间有间隙。

换言之，当将描边和填充分离成两个元素后，设计的视觉效果会其实会发生改变。那是因为描边和填充有相同边缘，尽管两个边缘看上去密不透风，但是当电脑将设计渲染成像素呈现在屏幕上时，背景颜色会渗透过来。这会导致icon和图形看起来很糟糕。

如何修复？

如果你比熟悉SVG代码编辑的话，解决方案十分简单：给具有stroke的元素添加fill属性，然后删除fill里买呢的元素和相应的. 这个方法可以还原设计，而且用到的代码也很少。

如果你不会代码，那么推荐这个软件给你

sketchmaster

SVGito可以自动最优化描边和填充问题。而且使用超级无脑简单：

1.在sketch里复制SVGcode

2.在sketchmaster.com里粘贴

3.选择optimized代码。

ok，以上就是关于SVG还原与优化的问题和解决方法了。