不用绕道PNG
直接把.webp拖进来。先转PNG没有任何好处,而且对有损WebP来说,还会把压缩痕迹重新编码一遍。
为什么WebP要单独说
浏览器原生解码WebP,描摹引擎直接读取。
WebP是现在大多数网站使用的图片格式:同样画质下比JPG小25–35 %,而且与JPG不同的是,它支持透明和无损压缩。麻烦在于,很多桌面软件和老一点的矢量化工具打不开它,于是大家只能先把WebP转成PNG,再把PNG转成SVG,既费事,有时还损失画质。
AnyToSVG直接使用浏览器自带的解码器,目前所有主流浏览器(Chrome、Edge、Firefox、Safari 14+)都原生支持WebP。文件在你的电脑上解码,分析颜色和渐变,再用编译为WebAssembly的Potrace描摹,流程与PNG完全相同。如果WebP是无损的,效果和PNG一样干净;如果是有损的,压缩痕迹比JPG轻,但依然存在,放大后边缘毛糙的话,可以在高级选项里勾选先降噪。
也支持WebP动图:会描摹第一帧。另一种新的网页图片格式AVIF,在能解码它的浏览器(Chrome、Firefox、Safari 16+)里用法相同。
透明背景
会保留透明通道;纯色背景一个勾选就能去掉。
WebP和PNG一样可以保存透明通道。不透明度低于50 %的像素会被当作空白、不会被描摹,所以从网页上保存下来的Logo或抠好图的商品图,转成SVG后背景同样是透明的。如果WebP被压在纯色背景上,就勾选透明背景:与图片边缘相连的那种颜色会被去掉,图稿内部被包围的同色区域则保留。
其余输出和其他输入格式完全一样:每种颜色一条<path>路径,明暗过渡区域用真正的SVG渐变,viewBox采用原图像素尺寸,文件里没有其他东西。它可以在Illustrator、Inkscape、Figma、各类刻字机软件和任何浏览器中打开。
常见来源
现在右键“图片另存为”,保存下来的经常就是WebP。
WebP转SVG最常见的原因,是从网页上保存的Logo、图标或插画:浏览器给了你一个.webp文件,而设计软件或刻字软件却不认。因为这类图片是为网页做的,通常很小,只有200到600像素,所以AnyToSVG会在计算矢量图之前,用适合描摹的滤波方式把它放大两到三倍。曲线会比直接用大图时稍圆润,但纯色块的Logo仍然能描摹成寥寥几个干净的图形。
如果网站提供了更大的版本(在新标签页中打开图片,看网址里有没有尺寸参数,或者查看有没有srcset里的2倍图),请用那个:1000像素的原图始终比放大的300像素图更好。保存成WebP的照片和其他照片一样,会被海报化成最多32种颜色加渐变,是一种风格化效果而不是更清晰的照片;具体效果见JPG转SVG。
使用方法
只有三步,第二步还可以跳过。没有繁琐的向导,不用选模型,也没有积分计数。
把图片拖到页面上、从电脑里选择,或按Ctrl+V粘贴,马上开始分析和描摹。彩色还是黑白、该用几种颜色、阈值多少,都会自动识别。
拖动原图和SVG之间的分隔线对比,放大看边缘。可以改颜色数、隐藏某种颜色、把背景变透明,每次修改都在不到一秒内重新描摹。
保存SVG文件、复制SVG代码,或导出2倍、4倍大小的PNG。坐标与原图像素一致,每种填充一条路径,文件里没有多余内容。
小技巧
直接把.webp拖进来。先转PNG没有任何好处,而且对有损WebP来说,还会把压缩痕迹重新编码一遍。
网站通常为高分屏准备了更高分辨率的版本。原图越大,曲线越平滑。
如果放大到400%时边缘毛糙,在高级选项里勾选先降噪,并把去除杂点稍微调大一点。
自动识别会从图片里读出颜色数;如果压缩多生出了过渡色,把它设成设计实际用到的数量。
使用第一帧。如果要矢量化其他帧,先用图片编辑软件把那一帧导出成PNG。
预览背景可以在棋盘格、白色和深色之间切换,这样能清楚看到哪些区域是透明的。
把WebP文件拖到本页,或者打开转换器选择它。浏览器负责解码,转换器一秒内完成描摹,然后下载SVG即可。不用账号,不上传,没有水印。
不需要。目前所有主流浏览器都原生解码WebP,转换器直接读取文件。多绕一步PNG只是多了一道手续,对有损WebP来说还会把压缩痕迹重新编码。
会。透明像素不会被描摹,所以SVG在同样的位置也是透明的。纯色背景可以用透明背景复选框去掉。
会描摹第一帧。想要其他帧,先用图片编辑软件把它导出成PNG再转换。
不会。WebP、PNG、JPG、GIF和BMP文件完全在你的浏览器里解码和描摹,不会发送到任何地方。详见隐私政策。
可以,前提是浏览器支持解码AVIF(Chrome、Firefox、Safari 16及以上)。处理方式与WebP完全相同。
更多转换器
同一个引擎、同样的隐私保护,每种输入格式一个页面,方便你收藏常用的那个。
免费、在浏览器里运行,无需安装,不上传图片。大约一秒,SVG就会和原图并排显示。