
什么是 PNG 转 SVG 转换器?
PNG 转 SVG 转换器会把位图描摹成由填充形状组成的矢量图。它无法还原原始矢量设计:形状是根据像素重新构建的,所以边缘只是近似效果。标志、图标、线稿等颜色较少的平面图形描摹效果很好。照片则不行,它们会变成体积庞大、色块斑驳的 SVG,可能有几兆字节,有时甚至几十兆字节,远大于原来的 PNG。
两种格式的差异说明了这样做的意义。PNG 存储的是固定的像素网格,放大后边缘会出现锯齿方块。SVG 存储的是用路径描述并填充颜色的轮廓,浏览器或设计软件可以在任意尺寸下清晰地重新绘制。描摹后的 SVG 可以放进网页,可以在矢量编辑器中重新上色,也可以交给依据轮廓工作的切割机或激光雕刻机读取。
描摹分两步进行。首先把图像缩减为一个小调色板,颜色数量由您在“颜色”中选择。然后描摹器沿着每块同色区域的边缘行进,并用直线和曲线拟合边缘,每个区域生成一条填充路径。每条路径还会加上一条与自身颜色相同的 1 像素轮廓,用来填补相邻形状之间原本会出现的细缝。
有两个设置会影响结果。“颜色”可选 2、8(默认)或 16。“细节”可选低、中(默认)或高:选“低”时会先轻微模糊图像,使用较宽松的曲线,并舍弃比斑点还小的形状,得到更简单、更小的文件;选“高”时则紧贴像素,保留微小的形状。更改任一设置都会对已添加的所有文件重新描摹,每一行会在 PNG 大小旁边显示新的 SVG 大小,方便您在下载前比较不同设置。
描摹在后台 Web Worker 中使用 imagetracerjs 在客户端运行,该库只在您添加第一个文件时才会下载,因此页面保持流畅,图像也不会被上传。任意一边超过 1200 像素的图像会在描摹前按比例缩小,以便几秒内完成任务,而 SVG 仍会按原始宽度和高度显示。描摹超过两分钟会被中止,并提示减少颜色数量或降低细节。支持最高 100 百万像素的 PNG,透明区域会变成镂空形状。该工具免费,无需注册,每日转换次数有上限。
如何将 PNG 转换为 SVG
添加 PNG 文件
把 PNG 图片拖到框内,或点击上传。可以一次添加多个文件,每个文件添加后会立即开始描摹。标志、图标和扁平图形的效果最干净。
设置颜色和细节
黑白图案选 2 种颜色,大多数标志选 8 种,有明暗渐变的图形选 16 种。先从“中”细节开始。更改任一设置,都会用新的值对每个文件重新描摹。
检查描摹结果
每一行都会以缩略图显示描摹后的 SVG,并给出状态和一行大小信息,包括转换前后的大小,以及 SVG 比原文件小多少或大多少。点击缩略图可放大查看 SVG,并在转换前和转换后之间切换。如果边缘看起来凹凸不平或文件太大,请更改设置后再看一次。
下载 SVG 文件
点击某一行的下载图标即可保存该 SVG,或点击列表顶部的“全部下载”,将整批文件保存为 converted-svg.zip。
为什么要将 PNG 转换为 SVG?
当图像比较简单,并且需要缩放或按轮廓读取时,描摹就很值得。如果是照片类图像,请保留 PNG。
只剩下 PNG 的标志
原始矢量文件常常丢失,只剩下从网站或邮件签名里保存的 PNG。描摹可以得到一个 SVG,用于横幅或印刷时缩放也不会出现锯齿方块。请仔细检查曲线和小字,因为它们是根据像素重新构建的,而不是复制自设计师的原文件。
切割机、雕刻机和刺绣软件
刻字机、激光雕刻机和许多手工工具都按路径而不是像素工作。把剪影、镂空模板或字母组合图案做成 2 色描摹后,每块深色区域都会变成机器可以沿边切割的封闭形状。
网页图标和插图
描摹成 SVG 的扁平图标在高密度屏幕上依然清晰,还可以用 CSS 重新着色。如果之后需要指定尺寸的像素版本,可以将 SVG 渲染回 PNG。
PNG 与描摹后的 SVG:该用哪个
| PNG | 描摹后的 SVG | |
|---|---|---|
| 存储内容 | 像素网格。 | 根据这些像素描摹出的填充形状。不是原始矢量设计。 |
| 缩放 | 放大后出现锯齿方块或变模糊。 | 任意尺寸下都能清晰地重新绘制。 |
| 颜色 | 数百万种颜色,渐变平滑。 | 2、8 或 16 种平面颜色。渐变会变成色带。 |
| 透明度 | 完整的 alpha 通道。 | 透明区域会被描摹为镂空形状。 |
| 标志和图标 | 在保存时的尺寸下效果良好。 | 很合适:边缘干净,易于重新着色。 |
| 照片 | 很合适,而且通常文件更小。 | 不合适:体积庞大、色块斑驳的 SVG,有时可达几十兆字节。 |
| 编辑 | 像素编辑器。 | 矢量编辑器、切割和雕刻软件、代码。 |
“颜色”和“细节”如何影响描摹结果
每个设置都是在 SVG 的还原度和形状数量之间做取舍。形状越多,文件越大,在矢量编辑器中需要清理的内容也越多。
颜色:2、8 或 16
图像在描画之前被简化为如此多的颜色,两种颜色适合黑白徽标、模板、签名和线条艺术,八种颜色处理大多数平面徽标,带有一些品牌颜色和一些抗锯齿边缘,十六种颜色保持更多的阴影,价格是沿着每个柔软的边缘有更多的小形状。
细节:低、中或高
“低”细节会轻微模糊图像,用较宽松的曲线拟合,并舍弃微小的形状,从而得到平滑的轮廓和较小的文件。“中”细节拟合曲线的误差约在一个像素以内。“高”细节紧贴像素并保留小形状,因此能保留细线条,但也会带入噪点。
为什么照片效果不好
照片到处都是柔和的渐变和纹理,即使用 16 种颜色,也会被拆成成千上万块不规则的色块。每个色块都会变成一条带有自己坐标的路径,最终 SVG 的大小可能是 PNG 的很多倍,看起来还像是一张海报化的复制品。这是描摹本身的局限,而不是改某个设置就能解决的。
隐私与安全
- PNG 在当前浏览器标签页内通过后台 Worker 解码和描摹,图像绝不会被上传。
- 只有在您添加第一个文件时,才会从本站加载 imagetracerjs 库。
- SVG 仅由描摹出的路径构成,不含脚本、链接,也不嵌入原始 PNG 的副本。
- 每日使用次数检查会发送工具名称、设备标识符,以及您的登录令牌(如果有)。不包含任何图像数据。
- 批量处理结束后,页面会记录文件数量、总字节数和输出格式,绝不会记录文件名或像素内容。
主要功能
2、8 或 16 种颜色
从黑白线稿到带阴影的扁平图形
低、中、高三档细节
平滑紧凑的轮廓,或对小形状的精细描摹
无缝隙形状
每个形状都带有一圈匹配的细轮廓,可遮住颜色之间的接缝
SVG 预览和文件大小
下载前即可查看描摹结果和文件大小,每次更改设置后都会更新
常见问题
Comments
0 comments
No comments yet. Be the first to share your thoughts!

