SVG 转 WebP - 小得多，依然透明
当 SVG 必须变成像素、而结果要用在网页上时，WebP 就是该选的格式。它保留了 PNG 提供的完整 alpha 通道，而体积只是后者的一小部分 - 在我们的三个测试文件上，WebP 比完全相同尺寸的 PNG 小了 81% 到 97%。这些数字是通过本工具实测的，而不是从规范里抄来的，完整表格在本页下方，还附带解释：为什么最大的节省来自你最想不到的那个文件。转换完全在你自己的设备上进行，所以不上传任何东西，不会排在别人的任务后面，文件也永远不会离开你的机器。选一个倍数或一个精确的像素宽度，决定是否保留透明，图形就会按那个尺寸从矢量重新绘制。
如何使用此工具
放入你的 SVG
把 SVG 拖到上方方框里或点击选择。单个文件最大 5 MB，可以一次多个。在渲染任何东西之前，每个文件都会按内容而非扩展名进行校验。
设定输出尺寸
选择 1×、2×、4× 或你输入的倍数，也可以切换到精确尺寸，指定像素宽度并锁定纵横比。图稿会按该尺寸从矢量重新绘制，而不是从更小的渲染结果拉伸而来，所以细节是真正增加的。
保留或替换背景
透明默认开启，WebP 会完整保留它，未绘制的区域保持透明。如果你更想合成到某个实色上，取消勾选即可，旁边会出现一个取色器。
设定质量
滑块默认 85，这是 WebP 的体积优势最大且不产生可见损伤的位置。我们的渐变测试文件在质量 90 时是 3,998 字节，50 时是 1,872 字节，20 时是 1,394 字节，可见继续往下调已经没什么可赚的了。
转换并下载
点击「转换为 WebP」。每个文件显示各自的进度。可以逐个下载，也可以把整批打包成一个 ZIP 压缩包取走。
常见问题
WebP 到底比 PNG 小多少？
我们以默认设置、512 像素宽实测了三个文件。一个描边图标从 PNG 的 20.8 KB 降到 WebP 的 3.8 KB，节省 81%。一个密集的像素风标记从 44.6 KB 降到 7.0 KB，节省 84%。一张渐变插画从 152.3 KB 降到 4.2 KB，节省 97%。
为什么渐变文件的节省幅度大得多？
因为平滑渐变正是 PNG 最不擅长的情形。PNG 靠寻找重复的像素模式来做无损压缩，而渐变几乎不重复任何东西，于是它几乎逐个像素单独存储。WebP 的有损模式用少数几个系数就描述了同一条平滑过渡，这就是 152 KB 塌缩成 4 KB 的原因。
WebP 会保留透明度吗？
会，完整保留。WebP 带有 8 位 alpha 通道，透明和半透明区域与在 PNG 中完全一样地保存下来 - 我们对每一份输出都会验证这一点。柔和阴影和部分不透明度都会原样传递。这正是选 WebP 而不选 JPG 的主要理由，因为 JPG 根本没有 alpha。
这个 WebP 是有损还是无损？
有损，质量由你用滑块设定。这是刻意的选择：无损 WebP 确实胜过 PNG，但通常只有 20–30%，而质量 85 的有损 WebP 能领先 80% 以上，在正常观看尺寸下看不出差别。无论哪种情况，alpha 通道始终是无损的。
WebP 在我需要的地方都能用吗？
在网页上没问题。所有现役浏览器支持 WebP 已有多年，Safari 从 2020 年起也支持。浏览器之外情况就参差了：部分老旧桌面软件、印刷流程和上传表单至今仍会拒收。决定之前先确认目的地，遇到不接受 WebP 的地方就退回 PNG。
我的 SVG 是动画的 - WebP 也会动吗？
不会。WebP 确实支持动画，但 SVG 里的动画存在于 SMIL 标签或 CSS 中，只有当文件被当作文档而非图片时才会运行。渲染只会捕获起始状态的一帧静态画面。想要会动的版本，请从设计工具里导出视频或动画 GIF。
什么时候该选 PNG 而不是 WebP？
当文件要送去不接受 WebP 的地方时，或者你需要逐像素无损的输出时 - 比如用于文档的截图，或是后续还要多次编辑和另存的图稿。反复的有损编码会累积，所以请把编辑用的母版保留为 PNG 或原始 SVG。
我该用什么质量设置？
没有特别理由就保持 85。在中等设置下 WebP 的表现远比 JPEG 稳健，而推到 100 通常会让文件翻倍，换来的差别你根本看不出。只有在绝对锐利度无关紧要的大幅装饰性背景图上，才往 60 的方向调。
我是不是干脆直接在站点上用 SVG 就好？
很多时候确实如此。对于徽标、图标或任何平涂插画，SVG 本身通常比它的任何栅格版本都小，在每个缩放级别都保持锐利，还能用 CSS 重新设定样式。只有在需要固定尺寸的栅格图时才转成 WebP：Open Graph 图片、邮件，或画布与游戏贴图。
您可能还需要
有问题吗？ 报告问题