PNG转SVG
在浏览器中把PNG矢量化为可缩放的SVG。适合颜色不多的Logo和扁平图标,不适合照片。
把文件拖到这里
.png · 最大20 MB
更多设置收起设置
如何矢量化为SVG
- 1
拖入PNG
最多20个文件,每个20 MB,每张图片不超过400万像素。名字是.png的JPEG、WebP和BMP文件也会照常转换,不另行提示。
- 2
选择颜色数
颜色越少,结果越干净、越小。白底黑色标志选2种;大多数扁平图标选8种。
- 3
下载SVG
结果卡片会显示得到了多少种颜色和多少条轮廓,马上就能判断设置是否合适。
矢量化到底做了什么
矢量化不是转换,而是近似。图片先被量化成一个有限的调色板,然后沿着每块单色区域的边界走一圈,把它变成一串直线段和贝塞尔曲线。如果原图确实由平坦的色块组成,比如Logo、镂空图案、应用图标或图表截图,效果很好。如果原图是连续色调,效果就很差:照片里找不到平坦区域,矢量化程序只好造出成千上万个小区域,边缘变圆,柔和的渐变断成明显的色带,最后得到的SVG比PNG更大,也更模糊。这个工具仍然会处理照片,并在结果卡片上提示,但与其事后让你意外,不如在这个页面上先说清楚。
四个选项,各自的用途
颜色数是最主要的调节项:它决定所有颜色被量化进去的调色板有多大,对文件大小和轮廓干净程度的影响最大。平滑度决定曲线贴合描出的边界有多紧:低值保留尖角,代价是节点多得多;高值得到平滑的曲线,但可能吞掉小细节。忽略小形状会丢弃比给定像素数短的轮廓,正好用来对付JPEG压缩痕迹和扫描噪点。轮廓宽度默认为零,即形状只填充,没有可见的描边;如果想让每块区域再画上一圈同色轮廓,就调高它。
透明度,以及可以检查的结果
开启“保留透明度”时,透明度低于一半的像素在调色板里单独算作透明项,不会绘制,所以透明背景上的Logo,结果仍是透明背景。关闭后,会先铺一个用最常见不透明颜色填充的矩形,再把描出的形状放在上面,目标位置完全不支持透明时这样更方便。无论哪种方式,输出都是普通、可读的XML:可以用任何编辑器打开,看到路径,并手动修改填充颜色。
文件留在你的设备上
解码和矢量化都在浏览器标签页里运行。PNG解码器是WebAssembly,矢量化程序是JavaScript,两者都不联网。不上传任何内容,服务器上没有排队,关闭标签页后一切都从内存中清除。
常见问题
为什么SVG和原来的PNG看起来不完全一样?
因为矢量化是用曲线重建图片,而不是复制像素。颜色被合并进有限的调色板,每条边界都用一条靠近原边缘、但并不完全重合的曲线来近似。扁平图案在正常尺寸下看不出区别;细节多的内容或照片就很明显。
Logo选几种颜色合适?
数一数Logo里有几种纯色,就选几种。白底上的单色标志选2种效果最好,常见的双色品牌标志选3或4种。对扁平图案来说,再往上加也不会更逼真,只会把抗锯齿边缘的像素拆成多余的过渡形状,让文件变大。
为什么照片转出来的文件这么大?
照片没有平坦区域,所以矢量化程序会给每一小片相近的颜色都生成一条轮廓,常常有几万条。如果轮廓加起来超过50,000个节点,结果会被拒绝,不会交给你,因为它打开起来比原图慢,看起来也更差。如果还是想试试,把颜色数降到4,并调高“忽略小形状”。
“忽略小形状”有什么用?
它会丢掉比这个像素数短的描出轮廓。JPEG压缩留下的小斑点、扫描颗粒或略带噪点的背景,否则都会变成轮廓,每一条都增加文件大小,却不会增加任何看得见的东西。默认值8能去掉大部分噪点,同时保留有意设计的小细节,比如字母i上的点。
能给形状加轮廓线吗?
能。把轮廓宽度调到大于零,每块描出的区域都会用它自己的填充色画一圈描边。设为0时形状只填充,Logo通常就该这样,因为同色描边只会让每个形状都略微变胖。
透明背景会保留吗?
开启“保留透明度”时会保留。透明度低于一半的像素有自己的调色板项,完全不绘制,所以背景保持透明,不会变成一个白框。关闭这个开关,就会得到一个用图片最常见颜色填充的实心背景矩形。
一次能矢量化多少个文件?
最多20个文件,每个20 MB、400万像素。这个像素上限故意定得比我们其他PNG工具低:矢量化的耗时比像素数增长得更快,更大的图片会让标签页卡死,而不是处理完成。
文件会上传到服务器吗?
不会。PNG在浏览器中解码和矢量化,SVG也在浏览器里生成。任何时候都没有内容离开标签页。