免费转换器

PNG 转换 SVG 矢量化

将PNG或JPG光栅图像转换为可缩放的SVG矢量图形。直接在浏览器内安全、快速地完成处理。

将 PNG/JPG 拖放到此处

最高支持 50MB

关于此工具

将 PNG 转换为 SVG 从根本上来说是一个跟踪操作,而不是格式更改。 PNG存储像素; SVG 存储几何图元。从像素网格到可缩放矢量路径需要解释位图并在相似颜色的区域周围绘制近似形状。结果是真正可扩展的——您可以自由调整大小而不会出现像素化——但它并不是源代码的完美再现。摄影内容的追踪效果很差,因为每个像素级的颜色变化都会变成一个形状,产生巨大的 SVG,无法达到目的。徽标、图标、艺术线条和高对比度图形的描迹清晰,因为它们具有少量且边界明确的颜色区域。

该转换器使用 imagetracerjs 库,这是一个类似于 potrace 的矢量跟踪算法的 JavaScript 端口。 PNG 被解码为 RGBA 位图,使用可配置调色板将位图分割为颜色区域,将每个区域的边界跟踪为路径,使用贝塞尔近似简化路径,并将生成的路径作为 SVG 路径元素发出。整个管道在您的浏览器中运行,无需任何服务器上传。

跟踪参数控制保真度和文件大小之间的权衡。更多的颜色和更精细的细节会产生更大的 SVG,与源更加匹配;更少的颜色和更粗糙的描画会产生更小的 SVG,并具有更风格化的感觉。徽标和图标的默认值已调整;复杂的图像可能会受益于调整设置的跟踪通道,或者可能根本不适合矢量化。

为什么将 PNG 转换为 SVG

当您需要将图像缩放到超出其原始分辨率时,矢量化 PNG 最有用。尤其是徽标,通常以适中尺寸的 PNG 形式出现,并且需要在广告牌、视网膜显示屏和大幅面印刷品上显得清晰。矢量轨迹生成的 SVG 可以在不损失质量的情况下进行缩放;权衡是对原始像素的保真度。

对于颜色较少且平坦区域较大的图形,SVG 也比 PNG 更加紧凑。 256×256 的 PNG 图标可能为 8 KB;具有两种或三种颜色的等效 SVG 通常小于 1 KB。对于交付到 Web 前端的 UI 图标库,矢量版本可减小包大小并提高所有显示密度的清晰度。

使用方法

拖放 PNG,选择跟踪设置,生成 SVG。

  1. 上传你的PNG: 将文件拖入上传区域或点击浏览。最好的结果来自具有锐利边缘和少量不同颜色的 PNG - 徽标、图标、线条艺术、简单插图。照片追踪效果很差并且生成巨大的 SVG。
  2. 如果需要,调整跟踪选项: 颜色计数控制输出中出现的不同颜色的数量。路径简化(也称为 ltres 或 qtres)控制算法平滑拐角的积极程度。精度越高,SVG 就越接近源,但具有更多路径数据。
  3. 跟踪和预览: imagetracerjs算法贯穿了颜色量化、边缘检测、轮廓追踪、贝塞尔曲线拟合。跟踪时间尺度与图像大小和颜色数量。 256×256 的标志,4 种颜色在一秒内完成;具有 16 种颜色的 1024×1024 图像可能需要几秒钟的时间。
  4. 下载 SVG: 将 SVG 保存到您的设备。该文件包含带有路径元素的 XML 标记;您可以在任何文本编辑器中打开它来检查或手动调整结果。

常见用例

技术细节

imagetracerjs 实现了多级管道:颜色量化使用 k 均值聚类或中值切割将位图减少为固定数量的颜色;边缘检测识别区域之间的像素边界;轮廓追踪沿着边界产生闭合多边形;直线和曲线拟合用贝塞尔曲线逼近多边形以减少路径数据。

最重要的算法参数是颜色数量(典型值:4-32)、pathomit(比这么多像素短的路径将作为噪声被丢弃)、ltres(线容差 - 边缘在分割成新段之前可以偏离多远)和 qtres(二次曲线容差 - 曲线平滑的程度)。默认值适用于徽标;复杂的图像受益于每个图像的调整。

输出是带有路径元素的标准 SVG 1.1。每个颜色区域都成为具有填充属性的一条路径。生成的文件可以在任何浏览器、矢量编辑器或支持 SVG 的设计工具中打开。文件大小主要取决于路径数和节点密度;典型的跟踪徽标为 1–10 KB。

最佳实践

常见问题

SVG 输出是真正的矢量文件吗?
该工具跟踪光栅图像以创建矢量路径。简单的图形、徽标和线条艺术效果最佳。照片会产生复杂的路径,并且看起来可能不像预期的那样。
SVG 与其他图像格式有何不同?
SVG 是一种矢量格式——图像被描述为数学形状而不是像素。这意味着 SVG 文件可以缩放到任何大小而不会损失质量,并且它们通常比徽标和图标等图形的光栅图像小得多。
有什么限制需要注意吗?
支持最大 50MB 的文件。非常大或复杂的文件可能需要更长的时间来处理。所有转换都发生在您的浏览器中,因此处理速度取决于您的设备。
我的图像在转换过程中是否保密?
是的。您的 PNG 文件完全在浏览器中使用 Canvas API 和 JavaScript 进行处理。没有任何内容上传到任何服务器 - 文件直接从您的设备传输到转换器,然后返回到您的设备。
痕迹可以在 Illustrator 或 Inkscape 中编辑吗?
是的。输出是带有路径元素的标准 SVG。 Illustrator 和 Inkscape 都可以在本机打开它,让您编辑路径、更改颜色和优化结果。
我的 PNG 是否已上传到服务器?
不会。跟踪是在您的浏览器中使用 imagetracerjs 进行的。该文件不会离开您的设备。
为什么我的 SVG 文件很大?
通常是因为源图像具有太多颜色或太多精细细节。尝试减少颜色数量、增加路径简化或使用具有更清晰几何形状的不同源图像。
我可以描画具有透明度的 PNG 吗?
是的。透明像素成为 SVG 中没有路径的区域。当 SVG 以任何背景颜色渲染时,透明背景都会被保留。