图像转SVG描摹器

图像转svg描摹器可将 PNG、JPG 或任何其他光栅位图转换为干净、无限缩放的 SVG 矢量图。与上传文件的服务器端描摹器或仅仅嵌入 base64 位图的“虚假” SVG 不同，此工具完全在您的浏览器中运行 — 将图像量化为不同的颜色图层，并结合使用边界跟踪、Ramer–Douglas–Peucker 简化和 Chaikin 角点平滑算法，将每个图层的轮廓重新描摹为真正的矢量路径。拖入标志、图标、素描或照片，实时观看左右对比预览的重新构建，然后即可复制 SVG 标记代码或下载 .svg 文件，以便在 Figma、Illustrator 或 Inkscape 中进行编辑。

为什么选择这款描摹器

工作原理（5 阶段流水线）

使用方法

1. 上传位图。 将 PNG/JPG 拖放到投放区、点击进行浏览、从剪贴板粘贴 (Ctrl+V)，或者点击任何内置的示例以查看描摹器的实际效果。
2. 选择一个预设。 “标志”适用于 2–4 色的图章，“剪影”适用于裁剪出的形状，“线稿素描”适用于手绘艺术，“照片海报”适用于海报化处理的照片，“精细艺术”则适用于细腻的 10 色效果输出。
3. 调整滑块。 “颜色图层”控制描摹器保留的不同颜色的数量。“平滑度”可以圆润像素阶梯。“简化度”用于合并长直线段（越低 = 细节越多，越高 = 文件越小）。“描摹分辨率”决定了内部的运行宽度。
4. 复制或下载。 使用复制 SVG 获取原始标记代码，使用下载 .svg 获取可编辑的矢量文件，或者使用下载 .png 将清理后的 SVG 重新渲染回高分辨率的光栅图。

获取清爽描摹效果的技巧

• 从高对比度的图像开始。 纯色背景和锋利的边缘比充满渐变的照片更能描摹出精美的效果。
• 根据工作选择正确的预设。 默认的“标志”预设假设的是 3 种纯色 — 在照片上使用会显得很奇怪。处理自然图像时请切换到“照片海报”或“精细艺术”。
• 先调高简化度，后调高平滑度。 简化负责移除多余的点，平滑负责软化剩余的部分。按照这个顺序操作可以使结果既小巧又平滑。
• 降低标志的描摹分辨率。 对于图标来说，240 px 就足够了 — 更高只会产生更多带有噪点的路径。
• 如果您希望将 SVG 放入彩色布局中，请勾选“透明背景”。 否则描摹器会用白色填充背景。
• 对于素描画，请使用边缘模式。 它会先运行 Sobel 滤波器，然后描摹生成的边缘图 — 非常适合线稿和铅笔画。

描摹后的 SVG 能用在哪里

矢量标志和图标在每种屏幕尺寸和 DPI 下都能保持清晰 — 从 16×16 的网站图标（favicon）到 4K 的通栏横幅。描摹后的 SVG 也是进行进一步编辑的绝佳素材：在 Figma、Adobe Illustrator 或 Inkscape 中打开文件，您就可以对任何单个路径进行重新着色、变形或制作动画。SVG 也是一等的网页格式：将标记代码内联粘贴到 HTML 中可以省去一次额外的网络请求，或者通过 data: 统一资源标识符（URI）将其作为 background-image 放入 CSS 中，又或者利用 stroke-dasharray 让路径线条动起来，实现手绘书写的效果。

算法背景

经典的黄金标准描摹器是 Potrace (Peter Selinger, 2003)，它使用多边形拟合和曲线优化阶段来产生极度平滑的贝塞尔路径。完整的 Potrace 移植需要数千行代码，因此本工具使用了一个更轻量、同样易于理解的流水线：用于提取轮廓的摩尔邻域边界跟踪（Moore-neighborhood boundary following），用于简化路径的 Ramer–Douglas–Peucker（也称为 Douglas–Peucker 算法），以及用于平滑处理的 Chaikin 切角算法。每个阶段在路径长度上都是 O(n) 的复杂度，因此整个描摹器在不到一秒钟的时间内就能完成一张典型的 240 px 图像的处理。

隐私与安全

所有操作都在本地运行。<input type="file"> 元素直接将文件读取到浏览器中，Canvas API 在您的设备上提取像素数据，JavaScript 描摹器绝不会带着您的图像发起网络请求。您可以通过打开 DevTools（开发者工具） → Network（网络）并在描摹时进行观察来验证这一点 — 不会出现任何上传流量。这使得该工具对于私有标志、未发布的品牌资产以及个人照片都是绝对安全的。

常见问题

我的图像会被上传到您的服务器吗？

不会。图像转svg描摹器是 100% 客户端运行的。您的位图会被读取到浏览器中，使用 Canvas API 进行处理，用原生 JavaScript 进行描摹，绝不会通过网络发送。即使断开 Wi-Fi，描摹器依然可以正常工作。

我可以描摹哪些图像格式？

您的浏览器可以渲染的任何光栅格式：PNG, JPG, GIF（第一帧）, WebP 和 BMP。您还可以描摹现有的 SVG（它会先被光栅化），这对于简化复杂的矢量图或重新量化它们的颜色非常有用。

我应该从哪个预设开始？

对于纯色标志和图标，请使用 标志 预设。对于纯黑白剪影，请使用 剪影。对于图画和线稿，请使用 线稿素描。对于照片，请使用 照片海报 或 精细艺术。然后微调滑块 — 实时预览能让您一眼看出每个控件的作用。

为什么我描摹出来的 SVG 看起来有方块感？

增加 平滑度 滑块以使尖锐的像素边缘变圆，增加 简化度 滑块以合并长的直线段。较高的 描摹分辨率 也能在描摹前捕捉到更多细节，从而提供更细腻的轮廓。

之后我可以编辑描摹好的 SVG 吗？

可以。输出的是普通的 SVG 标记，每个颜色图层对应一个 <path>（在单色/边缘模式下则每个剪影对应一个）。在 Inkscape、Illustrator、Affinity Designer、Figma 或任何文本编辑器中打开它，即可对单个路径进行重新着色、变形或制作动画。路径是按照渲染顺序（最浅的在前）排列的，因此任何矢量编辑器中的图层面板都会与之对应。

我的输入图像可以有多大？

任意大小 — 但描摹器内部会将位图重新采样为您选择的描摹分辨率 (64–512 px)。设置得更高可以捕捉到更精细的细节，但代价是 SVG 文件体积会变大。对于大多数标志，200–300 px 是最完美的平衡点；对于细节丰富的照片，可以尝试 400–512 px。

描摹出的 SVG 会和位图长得一模一样吗？

很接近，但绝不可能做到像素级完美 — 这是矢量化的代价。将图像海报化处理为 N 种颜色势必会丢弃渐变色，而路径简化也会移除微小的特征。对于至关重要的品牌资产，如果存在原始矢量文件，您应该总是优先使用原始文件；本工具适用于您只有位图且需要其可用矢量版本的情况。

我可以将描摹出的 SVG 用于商业用途吗？

描摹器不会在输出结果中添加任何水印、署名信息或分析代码。您是否能将结果用于商业用途，完全取决于您对 原始位图 所拥有的权利 — 描摹别人的标志并不能转移该标志的所有权。请在您自己创建或获得授权进行矢量化处理的资产上使用它。