如何在Sketch⾥将描边导出成SVG格式
Sketch⾥⽮量图形可以直接获取SVG代码的功能已经存在好⼏个版本啦，虽然sketch版本更迭很快，但是这个功能还有待进⼀步完善。
SVG是⼀种智能⼤⼩可调的⽮量图形格式，但是遗憾的是这个格式现在还不⽀持内描边和外描边。据说SVG2.0将会⽀持内外描边，但是⽬前的1.1版本还是不⽀持的。
所以，能够导出SVG格式的软件都必须⾯临⼀个问题：
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可以还原居中描边
居中描边在开发中可以被像素级还原。这也是Sketch软件的过⼈之处，其他任何设计软件都不能导出这新版Sketch43⾥当你导出SVG⽂件时，居中描边
么⼩这么可靠的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⾥买呢的<use>元素和相应的<defs>. 这个⽅法可以还原设计，⽽且⽤到的代码也很少。
如果你不会代码，那么推荐这个软件给你
SVGito可以⾃动最优化描边和填充问题。⽽且使⽤超级⽆脑简单：
1.在sketch⾥复制SVGcode
2.在sketchmaster⾥粘贴
3.选择optimized代码。
ok，以上就是关于SVG还原与优化的问题和解决⽅法了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。