矢量图形获取SVG代码的功能已有数个版本可供使用，尽管这些版本更新换代速度较快，但该功能仍需继续优化和提升。

SVG属于一种智能调整尺寸的矢量图形格式，然而遗憾的是，目前该格式尚不支持内描边与外描边功能。据传闻，SVG2.0版本将有望实现这一功能，但就目前而言，1.1版本依然未能提供此类支持。

因此，任何能够输出SVG格式的软件都必须解决一个难题：当设计包含内部或外部轮廓时，如何确保这些图层能够精确地恢复为与原始设计完全一致的SVG图形呢？

通常有以下三种方式：

方法一：描边转成形状

将图像的轮廓转换为填充形式，确实可以精确地重现SVG图形的轮廓，然而，这种方法也存在一些不可规避的不足，例如，生成的文件体积往往较大。此外，描边的粗细无法通过调整strok-width的值来改变。而且，对于线性描边（

元素与浏览器内SVG的轮廓线条相匹配，我们只需运用CSS技术，便能够实现对图标色彩的调整。

方法二：蒙版搞定

将描边调整为居中样式，并分别对SVG图形的内部和外部应用遮罩，各遮盖一半，这样SVG的尺寸和复杂度均有所提升，但这种做法更可能对设计造成破坏而非恢复。

方法三：手动调整路径

将描边调整为居中样式，接着对文档中的每个锚点进行精确定位。相较于前两种方法，此操作不仅能够有效减小文件体积，还能尽可能完美地重现设计效果。

尽管第三种方案堪称最佳选择，然而在导出之前，对那些不规则几何图形进行手动调整的过程实在是耗费了太多的时间。

第三种方法的痛苦sketch导出svg图标，你不懂

在深入探讨之前，我们必须明确一点：SVG图形中使用的并非“表示描边”，而是“用描边”。实际上，这两个概念指的是同一事物。然而，在图形未导出时，并未包含相应的描边信息；而一旦图形被导出，SVG图形中便会出现描边。

可以还原居中描边

在最新版本中，导出SVG文件时，居中描边功能正在开发中，其能够实现像素级的精确还原。这恰恰是本软件的显著优势，因为其他设计软件无法生成如此精细且可靠性极高的SVG文件。

新软件在近期使用过程中整体表现优异，不过偶尔仍会显现出一些问题——比如在重新构建外轮廓的SVG路径时，会出现多余的锚点。这种问题虽不会对工作带来重大干扰，但我们的团队已经注意到了这一情况。

One more thing

若你对代码有所了解，便会发现，在SVG代码中，对于既包含描边又包含填充的矢量图形，会有一些细微的改动。以一个填充色为亮绿色、描边色为深绿色的圆形为例sketch导出svg图标，若描边位于中心位置，那么在导出SVG文件时，fill属性与两个相关的行会合并为一个元素。若采用内描边或外描边进行绘制，导出的SVG文件将发生显著变化：系统会自动将描边与填充各自分配至两个独立的元素之中，其中包含填充色的圆形将被嵌入到元素内部，并新增一个元素。具体示例见下：

填充（fill）+ 居中描边（ ）;

填充（fill）+ 内／外描边（／ ）

在设计过程中，我们鲜少将矢量图形区分为填充与轮廓两部分。我们通常期望导出的SVG文件能够精确地还原设计图，并且其文件大小要尽量紧凑。

正如代码示例所展示，含有填充以及内部或外部轮廓的图层文件，其尺寸一般会比仅采用居中轮廓的图层文件更大。此外，还有一个较为显著的不足，即描边和填充图层之间存在一定的缝隙。

换句话说，一旦将轮廓与填充区分开来成为独立的两个部分，整体设计的视觉效果实际上会随之发生变化。这主要是因为轮廓与填充共享相同的边界，尽管这两个边界看起来紧密无缝，但当电脑将设计转换为像素并在屏幕上展示时，背景颜色便会渗透进来。这种情况会导致图标和图形显得相当糟糕。

如何修复？

若你对SVG代码的编辑较为熟练，那么找到解决方案便变得相当容易：只需为相关元素赋予fill属性，接着移除fill属性中的错误元素及其对应的点。通过这种方法，你能够恢复设计，并且所需编写的代码量并不多。

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

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

在里复制

2. 在.com里粘贴

3.选择代码，在粘贴回去。

如有侵权请联系删除！