PNG转SVG怎么做：Logo、图标和线稿描摹矢量化

PNG 是位图：由固定的像素网格组成，每个像素有颜色，还可以带有不透明度。一个 500 × 500 px 的 Logo 恰好有 250,000 个小方格，除此之外一无所有，所以把它放大到海报尺寸，只能让每个方格变大，或让方格之间的空隙变模糊。SVG 是矢量图，本质上是一个文本文件，用坐标和填充色列出 <path>、<circle>、<rect> 等形状。浏览器或切割机会按所需尺寸重新绘制这些形状，所以矢量 Logo 在手机屏幕和展会横幅上都同样清晰。

从矢量到位图很容易，因为渲染器只需把形状绘制成像素；SVG 转 PNG 一秒钟就能完成。反过来则没有无损的捷径，因为像素网格里没有记录生成它的形状。必须有程序去查看像素，推测每个形状从哪里开始、到哪里结束。这一步叫描摹或矢量化，从 Illustrator 到命令行程序，每一个靠谱的 PNG 转 SVG 转换器，底层都是描摹器。

有些转换器会跳过最难的部分。它们生成一个合法的 SVG 文件，里面只有一个 <image> 元素，把原始 PNG 以 base64 文本嵌入，文件还会比 PNG 大约三分之一。这样的结果能作为 SVG 打开，也能通过文件类型检查，但本质仍是矢量外壳里的像素图：放大后能看到同样的锯齿边缘，切割机也找不到可循的路径。用文本编辑器打开任意 SVG 并搜索 data:image/png，如果有这串字符，就说明没有真正矢量化。

描摹最适合本来就是以形状绘制的图片。设计软件导出的 Logo、扁平图标、黑色轮廓的卡通、扫描的签名或镂空模板，都由少数几种纯色和清晰的边缘组成。描摹器把每种颜色归为区域，沿边界走线并拟合平滑曲线，因此得到的 SVG 与设计师最初画的形状很接近。字标中的粗体字也描摹得不错，因为大号字母不过是又一个填充形状，每个字形都会变成可改色、可缩放的轮廓，但不能再重新输入文字。

照片则恰恰相反。人像或产品图有成千上万种互相渗透的细微色调，矢量格式没有高效的方式来描述。让描摹器取 16 色，会得到带明显色带的海报化插图；取 64 色，则会得到数以万计的小形状，文件比 PNG 大得多，看起来仍不像照片。柔和的渐变、投影和发光也会同样变成一叠叠细色带。小字是第三个难点：在 10–12 px 时，抗锯齿会把每个字母与背景混在一起，描摹器分不清“e”和“o”。

分辨率比任何设置都重要。描摹器是根据边缘上的像素阶梯来拟合每条曲线的，阶梯越细，曲线越准。如果 PNG 是你自己从 Figma、Canva、Photoshop 或幻灯片导出的，请按显示尺寸的两到三倍重新导出；宽 1500–2000 px 的 Logo 能给描摹器充足的素材。除非 AI 放大后的结果在 100 % 缩放下看起来干净，否则不要先用它放大小尺寸 PNG，因为凭空生成的边缘纹理会和真实边缘一样被忠实地描摹出来。

其次，让背景尽量简单。PNG 支持完全透明，透明背景是最容易的情况：完全透明的像素都被视为空白，所以 SVG 里图案后面不会有白框。如果 PNG 有纯色底，请先紧贴图案裁剪；我们的指南如何按比例裁剪图片介绍了精确取景的方法。背景杂乱的图片，比如拍在 T 恤上的 Logo，应先抠掉，或在描摹前用一种纯色涂盖。

最后，在描摹器替你减色之前先自己减色。在源文件中隐藏阴影、发光和渐变叠加；如果矢量版不需要渐变，就用其中间色代替渐变填充。数一数剩下的纯色（包括轮廓色）并记下数字，它是下一步最有用的输入值。如果同一个 Logo 有 JPEG 和 PNG 两个版本，请选 PNG，因为 JPEG 压缩会在每条边缘周围产生噪点，详见 JPG、JPEG 与 PNG 的区别。

所有描摹器都会问同样的三个问题，只是名称不同。第一个是保留多少种颜色。在 PNG 转 SVG 转换器中，颜色模式可在彩色、灰度和黑白之间选择，颜色数量设定像素被归为多少类，范围为 2 到 64。请与你记下的数量保持一致。设得太高，描摹器会把抗锯齿的边缘像素分成各自的细颜色，表现为每个形状周围有一圈淡淡的光晕；设得太低，则会把两种品牌色合并成一种。

第二个问题是如何处理边缘。平滑会磨圆像素留下的阶梯，细节决定多小的斑点仍能成为形状。PNG 页面默认细节 70、平滑 40，可在干净的导出图上保留小的转角。出现灰尘和杂点时降低细节，曲线发抖时提高平滑；由直边构成的几何 Logo，把曲线设为直线；想保持块状外观的像素画，则设为像素边缘。

第三个问题只适用于黑白描摹：墨与纸的分界线划在哪里。阈值范围 1 到 254，默认 128。比阈值暗的像素变黑，较亮的则为空白。用细蓝圆珠笔写的签名，把它调高到 160–180，让淡笔画得以保留；在略带灰色的纸上用粗马克笔画的图，把它调低到 100 左右，免得纸张纹理变成杂点。每次只改一个设置并对比，因为各项设置会相互影响。

不要只看缩略图。在浏览器中打开 SVG，把最紧凑的曲线（字母的圆弧或尖角的顶端）放大到 400–800 %。好的描摹结果，弧线平滑，设计上有转角的地方转角锐利；差的则会出现抖动、凹陷和圆钝的尖角。然后在 Inkscape、Illustrator 或 Figma 等矢量编辑器中打开文件，开启轮廓或节点视图。简单的双色 Logo 通常只需几百个节点；如果你的有几千个，说明描摹器跟着噪点走了，这样的路径编辑或切割起来会很痛苦。

文件大小是快速的合理性检查。扁平 Logo 优化后的 SVG 通常只有几 KB 到几十 KB，往往比原 PNG 还小。描摹后的文件比源 PNG 大好几倍，通常意味着颜色太多、细节太多，或者是不该描摹的照片。请保持开启优化 SVG，它会在不产生可见变化的前提下舍入坐标并合并路径；最后把图案放大到海报尺寸、缩小到网站图标尺寸，确认两种尺寸下都清晰易辨。

免费的桌面方案是 Inkscape。导入 PNG，选中后打开路径 > 临摹位图（Shift+Alt+B）。亮度截止等单次扫描模式会生成一条黑色路径，适合线稿；多次扫描模式则把指定数量的颜色或灰度描摹成叠放的图层。Inkscape 的黑白描摹基于 Potrace，这是 Peter Selinger 于 2001 年发布的描摹库。Potrace 本身是命令行程序，读取 PBM、PGM、PPM 或 BMP 而不是 PNG，只处理双色图像，输出 SVG、PDF、EPS 或 DXF，适合用脚本批量处理大量扫描件。

在 Adobe Illustrator 中，图像描摹从 Illustrator CS6 起取代了旧的实时描摹。置入 PNG，打开窗口 > 图像描摹，从“黑白徽标”“3 色”或“16 色”等预设开始，再在高级部分调整路径、转角和杂色。在你点击扩展之前，描摹结果一直保持实时状态，扩展后会变成普通的可编辑路径。如果两个程序都没装，浏览器转换器也走同样的减色、找边缘、拟合曲线流程；图片转 SVG 转换器还支持 JPG、WebP 和 HEIC，也可以输出 EPS、PDF 或 DXF 而不是 SVG。

在网页上，SVG 自 2001 年起就是 W3C 推荐标准，目前所有主流浏览器都能在 <img> 标签、CSS 背景中渲染它，也可以内联在 HTML 里，此时甚至能在鼠标悬停时改变颜色。描摹后的徽标通常只需一个小文件，就能取代为视网膜屏准备的多种尺寸 PNG。对于切割机，SVG 是 Cricut Design Space 和 Silhouette Studio 所需的格式：每个描摹出的形状都会成为切割路径，多色描摹的结果会以独立图层导入，可以分别用不同颜色的乙烯基材料切割。激光切割机和 CNC 软件通常更偏好 DXF，PNG转DXF 可以用同样的描摹设置生成。

印刷厂要求提供矢量稿，是因为印刷机、刺绣制版师或刻字机需要的是边缘而不是像素，描摹得到的 SVG 往往能满足贴纸、T 恤或横幅的需求。但它仍然只是近似结果：曲线是拟合出来的，颜色是由像素平均得出的，文字也被转成了轮廓。所以在描摹公司徽标之前，先问问制作者。设计师或广告公司几乎都留有原始的 AI、EPS、PDF 或 SVG 文件，包含精确的曲线、命名颜色和字体，发给你只需一分钟。当原稿已经丢失、徽标只留存在扫描的信笺上，或者作品是你自己的手绘时，描摹才是合适的办法。