Command Palette

Search for a command to run...

PN

PNG 转 SVG 转换器

将 PNG 标志或图标描摹为由 2、8 或 16 种颜色填充形状组成的 SVG。它无法还原原始矢量设计,照片转换后会得到体积很大、色块斑驳的 SVG

赞助Toolz.dev 所用的主机Hostinger Partner
用 Hostinger 让你的网站上线
  • 免费域名
  • 免费 SSL
  • 30 天退款保证
Trustpilot 评分 4.6,超过 73,000 条评价
领取优惠 优惠码

什么是 PNG 转 SVG 转换器?

PNG 转 SVG 转换器会把位图描摹成由填充形状组成的矢量图。它无法还原原始矢量设计:形状是根据像素重新构建的,所以边缘只是近似效果。标志、图标、线稿等颜色较少的平面图形描摹效果很好。照片则不行,它们会变成体积庞大、色块斑驳的 SVG,可能有几兆字节,有时甚至几十兆字节,远大于原来的 PNG。

两种格式的差异说明了这样做的意义。PNG 存储的是固定的像素网格,放大后边缘会出现锯齿方块。SVG 存储的是用路径描述并填充颜色的轮廓,浏览器或设计软件可以在任意尺寸下清晰地重新绘制。描摹后的 SVG 可以放进网页,可以在矢量编辑器中重新上色,也可以交给依据轮廓工作的切割机或激光雕刻机读取。

描摹分两步进行。首先把图像缩减为一个小调色板,颜色数量由您在“颜色”中选择。然后描摹器沿着每块同色区域的边缘行进,并用直线和曲线拟合边缘,每个区域生成一条填充路径。每条路径还会加上一条与自身颜色相同的 1 像素轮廓,用来填补相邻形状之间原本会出现的细缝。

有两个设置会影响结果。“颜色”可选 2、8(默认)或 16。“细节”可选低、中(默认)或高:选“低”时会先轻微模糊图像,使用较宽松的曲线,并舍弃比斑点还小的形状,得到更简单、更小的文件;选“高”时则紧贴像素,保留微小的形状。更改任一设置都会对已添加的所有文件重新描摹,每一行会在 PNG 大小旁边显示新的 SVG 大小,方便您在下载前比较不同设置。

描摹在后台 Web Worker 中使用 imagetracerjs 在客户端运行,该库只在您添加第一个文件时才会下载,因此页面保持流畅,图像也不会被上传。任意一边超过 1200 像素的图像会在描摹前按比例缩小,以便几秒内完成任务,而 SVG 仍会按原始宽度和高度显示。描摹超过两分钟会被中止,并提示减少颜色数量或降低细节。支持最高 100 百万像素的 PNG,透明区域会变成镂空形状。该工具免费,无需注册,每日转换次数有上限。

如何将 PNG 转换为 SVG

  1. 添加 PNG 文件

    把 PNG 图片拖到框内,或点击上传。可以一次添加多个文件,每个文件添加后会立即开始描摹。标志、图标和扁平图形的效果最干净。

  2. 设置颜色和细节

    黑白图案选 2 种颜色,大多数标志选 8 种,有明暗渐变的图形选 16 种。先从“中”细节开始。更改任一设置,都会用新的值对每个文件重新描摹。

  3. 检查描摹结果

    每一行都会以缩略图显示描摹后的 SVG,并给出状态和一行大小信息,包括转换前后的大小,以及 SVG 比原文件小多少或大多少。点击缩略图可放大查看 SVG,并在转换前和转换后之间切换。如果边缘看起来凹凸不平或文件太大,请更改设置后再看一次。

  4. 下载 SVG 文件

    点击某一行的下载图标即可保存该 SVG,或点击列表顶部的“全部下载”,将整批文件保存为 converted-svg.zip。

为什么要将 PNG 转换为 SVG?

当图像比较简单,并且需要缩放或按轮廓读取时,描摹就很值得。如果是照片类图像,请保留 PNG。

只剩下 PNG 的标志

原始矢量文件常常丢失,只剩下从网站或邮件签名里保存的 PNG。描摹可以得到一个 SVG,用于横幅或印刷时缩放也不会出现锯齿方块。请仔细检查曲线和小字,因为它们是根据像素重新构建的,而不是复制自设计师的原文件。

切割机、雕刻机和刺绣软件

刻字机、激光雕刻机和许多手工工具都按路径而不是像素工作。把剪影、镂空模板或字母组合图案做成 2 色描摹后,每块深色区域都会变成机器可以沿边切割的封闭形状。

网页图标和插图

描摹成 SVG 的扁平图标在高密度屏幕上依然清晰,还可以用 CSS 重新着色。如果之后需要指定尺寸的像素版本,可以将 SVG 渲染回 PNG。

PNG 与描摹后的 SVG:该用哪个

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 预览和文件大小

    下载前即可查看描摹结果和文件大小,每次更改设置后都会更新

常见问题

把 PNG 拖到本页面,它会被描摹成填充形状,你可以下载为 SVG 文件。添加文件后立即开始描摹,更改颜色数或细节程度会重新描摹。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

png to svgconvert png to svgpng to svg converterfree png to svgpng to vectorvectorize pngpng logo to svgtrace png to svgconvert png to vector