SVG 描边转填充转换器

粘贴任意包含描边图形的 SVG，就能得到一份等效的 SVG——每一处描边都会被替换成视觉形状和宽度相同的填充路径。适用于只能可靠渲染填充的图标系统和设计工具，或者在进一步矢量编辑前把 SVG 简化成纯填充路径。

工具介绍

有些渲染管线——某些图标字体生成器、部分游戏引擎、较旧的 PDF 导出工具，以及只能合成填充的工具——无法正确处理甚至完全不支持 SVG 描边。把描边转换成同等宽度的填充形状可以彻底绕开这个问题：视觉效果看起来完全一样，但表达方式变成了一个填充路径，而不是描边线条。

这个工具的原理是沿着每个图形的轮廓采样大量点位（使用浏览器自带的路径长度 API，也就是 SVG 动画所依赖的同一套机制），在描边宽度的一半处向两侧各构建一条偏移线，再把它们闭合成一个填充多边形。

为什么使用它？

支持 path、line、polyline、polygon、rect、circle 和 ellipse 元素——不只是 <path>——都用同一套统一的采样方法处理。
如果原图形本身带有填充，会把它作为单独的图层保留在新生成的描边填充下方，所以"既有填充又有描边"的图形也能正确转换。
转换前后并排预览，方便你在复制结果前先目视确认效果。
完全在浏览器本地运行——你粘贴的 SVG 不会被上传到任何地方。
免费、即时，除了浏览器本身的渲染能力，没有文件大小限制。

使用方法

把你的 SVG 代码粘贴到文本框里（默认已预填了一个可用示例）。
点击"Convert strokes to fills"。
对比转换前后的预览，确认效果正确。
点击"Copy SVG"复制转换后的、不含描边的代码。

示例

输入

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

输出

一个单独的 <path fill="#3B82F6">，其轮廓沿原曲线两侧描绘，间距为 12 个单位，完全没有 stroke 属性。

曲线的形状之所以能被完整保留，是因为这个工具是沿实际渲染出的路径连续采样的，而不是只依赖控制点。

常见问题

为什么尖角会变成圆角，而不是原来的尖角（斜接）？

这是采样方法一个已知且有意为之的简化：沿路径的密集点采样天然会产生圆润的连接和端点，无论原本的 stroke-linejoin 或 stroke-linecap 是什么值。要还原精确的斜接（miter）或斜切（bevel）连接需要另一套更复杂的算法（在每个顶点做线段相交计算），这个工具没有实现它。对大多数图标和插画场景来说，视觉差异很小，但如果你需要精确的斜接效果，专业矢量编辑器的"轮廓化描边"功能会更精确。

这个工具能处理虚线描边（stroke-dasharray）吗？

不能——工具会把所有描边都当作实线处理，忽略 stroke-dasharray/stroke-dashoffset。虚线描边会被当作实线转换，导致外观发生变化。如果你的 SVG 用到了虚线描边，这个工具不适合处理那些图形。

为什么什么都没转换？

这个工具只会转换同时具备描边颜色（不是"none"）和正数 stroke-width 的元素，无论这些值是写在属性上还是元素自身的 style 里。如果你的 SVG 通过外部 CSS 类设置描边，而浏览器无法在这个工具的隔离预览环境里解析该类，或者通过引用类的 <style> 块设置，计算出的样式可能无法正确解析——试着把 stroke 和 stroke-width 直接写成图形元素的属性。

什么时候该把描边转换成填充，什么时候该保留描边？

如果你还在设计阶段，保留描边——stroke-width 是一个可编辑的单一数值，转换后就没有了。如果你要导出到一个处理描边有问题的管线（图标字体生成器、某些游戏引擎或 PDF 导出工具），把转换作为最后的导出步骤，同时保留原始的带描边文件作为可编辑的源文件，因为转换是单向的。

转换后 SVG 文件会变大吗？

通常会——一条由少数几个控制点定义的描边曲线，会变成由数百个采样线段组成的填充轮廓，所以路径数据会明显增大。对图标来说这在实际使用中通常无所谓，但如果你在意文件大小，可以在转换后用 SVG 优化工具处理一下，去掉多余的坐标精度。

stroke-opacity 会被保留到转换后的填充上吗？

不会——转换后的路径会把描边的颜色变成填充色，但透明度是完全不透明的；原图形上的 stroke-opacity 值会被丢弃。如果你需要保留透明度，可以在复制结果后手动给转换后的路径加上相同数值的 fill-opacity。