UltKit

WebP转SVG转换器

WebP由像素组成,SVG由图形组成,两者之间无法无损切换。本页会把你的WebP描摹成真正的矢量路径,可以任意缩放、改色和切割,最适合Logo、图标和扁平插画。

图片转 SVG

或将JPG, JPEG, JFIF … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出
12

文件在我们的服务器上处理,并在 30 分钟后删除。

使用方法

  1. 1

    上传WebP

    添加从网站保存的徽标、图标或贴纸,最多 20 个文件,每个不超过 95 MB。源图越大、越清晰,矢量化效果越好。

  2. 2

    设置颜色数量

    颜色数量默认为 12,适合大多数徽标。双色标志可以调低,需要单色切割文件时,把颜色模式设为黑白。

  3. 3

    矢量化为SVG

    点击矢量化为 SVG并下载文件。可在 Inkscape、Illustrator、Figma 或 Cricut Design Space 中打开,检查图形效果。

答案

WebP 真的能转成 SVG 吗?

只能通过矢量化。WebP 存储的是像素,SVG 存储的是图形。本工具会把 WebP 的颜色重新绘制为矢量路径;只改文件名或嵌入位图的做法,得到的 SVG 放大后依然会模糊。

WebP转SVG:描摹与嵌入的区别

WebP 由 Google 于 2010 年推出,是一种位图格式:由彩色像素组成的网格,经压缩以便在网页上快速加载。SVG 自 2001 年起成为 W3C 标准,用文本描述线条、曲线和填充。把前者变成后者有两种截然不同的方式,而大多数免费转换器选的是对你没有帮助的那一种。

嵌入是生成一个 SVG,里面以 base64 文本包含 WebP。base64 会让图片体积增大约三分之一,结果仍是位图,只是套了个矢量的外壳。矢量化(本工具和 Inkscape 的“描摹位图”功能采用的方法,后者基于 Potrace 算法)则读取色块并将其写成路径。结果真正可缩放、可编辑,代价是损失细节。我们的图片转 SVG指南详细说明了每项矢量化设置。

描摹的SVG与嵌入WebP的SVG:各自能做什么

矢量化的 SVG嵌入 WebP 的 SVG原始 WebP
任意缩放都清晰yesnono
可在 Illustrator 或 Inkscape 中编辑图形yesnono
可用作 Cricut 或激光切割路径yesnono
保留照片细节noyesyes
典型文件大小随细节增加而变大比 WebP 大约大 ⅓最小
  1. 解码 WebP

    读取像素和 Alpha 通道,透明区域会被单独放置。

  2. 合并颜色

    相近的像素会合并为你设定的颜色数量。

  3. 绘制路径

    每个颜色区域变成平滑的曲线,并写入经过优化的 SVG。

WEBP

WebP 图片

WebP 是 Google 于 2010 年发布的图片格式,目的是让网页加载更快。它在同一种格式中同时支持有损和无损压缩、Alpha 透明和动画。在视觉质量相近的情况下,有损 WebP 文件通常比 JPEG 小 25–35%,无损 WebP 通常比 PNG 更小。目前所有主流浏览器都支持它,但一些较旧的桌面软件、打印服务和上传表单仍然不接受。Windows、macOS 和大多数现代图片编辑器都可以打开 WebP 文件。

压缩方式
有损或无损
透明度
支持
动画
支持
发布年份
2010 · Google
WEBP 转换器

SVG

可缩放矢量图形

SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。

压缩方式
–
透明度
支持
动画
支持
发布年份
2001 · W3C
SVG 转换器

当从网站保存的徽标或图标需要可缩放、可编辑或可切割时,人们就会搜索 WebP 转 SVG,这只有矢量化才能做到;反方向则只是简单的栅格化,用于网页。

从网站保存的WebP如何得到干净的SVG

大多数人想转成矢量图的 WebP 文件都是从网站下载的,这意味着它们已按页面缩放并经过有损压缩。边缘周围的压缩噪点会变成细小的杂散图形,而小图片又让矢量化程序缺少足够的像素来找出平滑曲线。请从能找到的最大副本开始;网站自己的媒体或品牌页面通常提供更大的版本或原始 SVG。

带曲线的徽标请让平滑保持默认值附近;边缘平直的几何标志,请把曲线设为直线。矢量化后,在编辑器中删除残留的杂点。如果你只是需要图片能在某处打开,不需要缩放,WebP 转 PNG更快,而且画面不变。

WebP转SVG常见问题

为什么其他WebP转SVG工具转出来的文件是模糊的?

很多工具只是把 WebP 作为嵌入图片放进 SVG,再改一下扩展名。文件能以 SVG 打开,但本质上仍是像素,放大会模糊,也没有可编辑的图形。用文本编辑器打开文件:如果里面有很长的 data:image 字符串,说明根本没有做矢量化。

WebP照片能转成SVG吗?

可以,但结果像海报:平滑的渐变和肤色会变成一块块平整的色带。照片本来就适合用位图格式保存。请把照片保留为 WebP、JPG 或 PNG,只对真正需要的徽标、轮廓或插画做矢量化。

WebP的透明背景转成SVG后还是透明的吗?

可以。透明像素不会生成任何图形,所以 SVG 中矢量化图案后面没有背景。这通常正是贴纸或放在彩色背景上的徽标所需要的。

描摹WebP Logo应该用多少种颜色?

数一数能看到的纯色数量,再加上两三种用于抗锯齿边缘的颜色。双色徽标设为 4 就能清晰矢量化;吉祥物插画可能需要 16 到 24。颜色过多会在每条边缘产生细碎的薄片图形。

转换后的SVG可以直接用于Cricut或激光切割吗?

可以,这正是做矢量化的主要原因之一。Cricut Design Space 导入 SVG 时会按颜色分成不同图层,激光软件会把路径读取为切割线或雕刻线。需要单一切割线时,请使用黑白并选择仅轮廓。

为什么描摹出的SVG和原Logo相比边缘坑坑洼洼?

网站上的低分辨率 WebP 往往只有 100 到 200 px 宽,矢量化程序只能根据寥寥几个像素去猜测曲线。请找一张更大的徽标,或先用增大图片大小放大,再重新矢量化。