PNG 转换 SVG 矢量化
将PNG或JPG光栅图像转换为可缩放的SVG矢量图形。直接在浏览器内安全、快速地完成处理。
将 PNG/JPG 拖放到此处
最高支持 50MB
将PNG或JPG光栅图像转换为可缩放的SVG矢量图形。直接在浏览器内安全、快速地完成处理。
最高支持 50MB
将 PNG 转换为 SVG 从根本上来说是一个跟踪操作,而不是格式更改。 PNG存储像素; SVG 存储几何图元。从像素网格到可缩放矢量路径需要解释位图并在相似颜色的区域周围绘制近似形状。结果是真正可扩展的——您可以自由调整大小而不会出现像素化——但它并不是源代码的完美再现。摄影内容的追踪效果很差,因为每个像素级的颜色变化都会变成一个形状,产生巨大的 SVG,无法达到目的。徽标、图标、艺术线条和高对比度图形的描迹清晰,因为它们具有少量且边界明确的颜色区域。
该转换器使用 imagetracerjs 库,这是一个类似于 potrace 的矢量跟踪算法的 JavaScript 端口。 PNG 被解码为 RGBA 位图,使用可配置调色板将位图分割为颜色区域,将每个区域的边界跟踪为路径,使用贝塞尔近似简化路径,并将生成的路径作为 SVG 路径元素发出。整个管道在您的浏览器中运行,无需任何服务器上传。
跟踪参数控制保真度和文件大小之间的权衡。更多的颜色和更精细的细节会产生更大的 SVG,与源更加匹配;更少的颜色和更粗糙的描画会产生更小的 SVG,并具有更风格化的感觉。徽标和图标的默认值已调整;复杂的图像可能会受益于调整设置的跟踪通道,或者可能根本不适合矢量化。
当您需要将图像缩放到超出其原始分辨率时,矢量化 PNG 最有用。尤其是徽标,通常以适中尺寸的 PNG 形式出现,并且需要在广告牌、视网膜显示屏和大幅面印刷品上显得清晰。矢量轨迹生成的 SVG 可以在不损失质量的情况下进行缩放;权衡是对原始像素的保真度。
对于颜色较少且平坦区域较大的图形,SVG 也比 PNG 更加紧凑。 256×256 的 PNG 图标可能为 8 KB;具有两种或三种颜色的等效 SVG 通常小于 1 KB。对于交付到 Web 前端的 UI 图标库,矢量版本可减小包大小并提高所有显示密度的清晰度。
拖放 PNG,选择跟踪设置,生成 SVG。
imagetracerjs 实现了多级管道:颜色量化使用 k 均值聚类或中值切割将位图减少为固定数量的颜色;边缘检测识别区域之间的像素边界;轮廓追踪沿着边界产生闭合多边形;直线和曲线拟合用贝塞尔曲线逼近多边形以减少路径数据。
最重要的算法参数是颜色数量(典型值:4-32)、pathomit(比这么多像素短的路径将作为噪声被丢弃)、ltres(线容差 - 边缘在分割成新段之前可以偏离多远)和 qtres(二次曲线容差 - 曲线平滑的程度)。默认值适用于徽标;复杂的图像受益于每个图像的调整。
输出是带有路径元素的标准 SVG 1.1。每个颜色区域都成为具有填充属性的一条路径。生成的文件可以在任何浏览器、矢量编辑器或支持 SVG 的设计工具中打开。文件大小主要取决于路径数和节点密度;典型的跟踪徽标为 1–10 KB。