svg2img

SVG 转 WebP

为网站或 CMS 生成 WebP 图片。保留透明背景，设置像素尺寸，并查看质量调整后的实际文件大小。

Advertisement

适用于网页图片流程的 WebP

保留透明背景

Logo 和插画可以保留透明度，也可以添加纯色背景后导出。

查看实际编码结果

预览显示生成的 WebP 和文件大小。降低质量可能节省空间，下载前请检查小字和边缘。

按使用场景选择格式

WebP 是位图。如果需要任意缩放，请保留 SVG；简单 SVG 转换后不一定更小。

如何使用

  1. 1

    上传 SVG 或粘贴源代码。

  2. 2

    选择尺寸、透明度和质量。

  3. 3

    检查 WebP 预览并下载。

当使用场景需要位图时，再选择 WebP

SVG 转 WebP 会将矢量形状变成像素，适合需要位图的 CMS 上传、缩略图或网页插画。如果网站已经支持体积很小的 SVG Logo，保留 SVG 可以继续任意缩放，文件也可能更小。替换前应比较实际文件。

保留 SVG，还是导出 WebP、PNG、JPG？

左右滑动可查看完整表格 →

格式适用情况取舍
SVG可控的网站中需要任意缩放的矢量 Logo接收平台须支持 SVG，仍需处理外部依赖。
WebP需要质量可调的网页位图可以保留透明度，但导出后的像素尺寸固定。
PNG需要清晰边缘或无损位图没有有损质量滑块，应在相同尺寸下比较体积。
JPG上传表单或文档要求 JPEG透明区域会被合成为纯色背景。

WebP 的尺寸和质量怎么设置？

  1. 01先确定显示尺寸

    例如缩略图显示为 320 × 180 CSS 像素，布局需要 2 倍分辨率时可导出 640 × 360。无必要地扩大画布，可能抵消降低质量带来的体积节省。

  2. 02保留透明度或添加背景

    默认透明。若 Logo 中有白字，请在实际使用背景上检查可读性。SVG 自身包含的不透明矩形不会被自动删除。

  3. 03在相同条件下比较

    从默认 90% 开始降低质量，观察编码后的预览。与 PNG、JPG 比较时使用相同尺寸和背景。页面显示的是本次生成结果的大小，并非对所有 SVG 承诺固定压缩比例。

为什么 WebP 变大了，或显示效果不对？

比原始 SVG 更大
几条矢量路径就可以描述一个 Logo，转成位图后需要编码更多像素。如果接收平台允许，可保留 SVG；必须使用位图时，先检查输出尺寸是否过大。
细字和轮廓发虚
提高质量，或按实际显示需求增加像素尺寸。细线图表可比较 PNG 输出；本工具的质量 100 不保证 WebP 无损。
浏览器无法导出 WebP
工具会检查真实编码格式，发现浏览器返回 PNG 时会报错。请改用支持 WebP 编码的浏览器或导出 PNG；只改扩展名不会转换格式。

SVG 在哪里处理？

转换在浏览器内完成，SVG 不会为了转换上传至本站服务器。跨工具携带的源文件只保存在内存中，刷新后清空。SVG 引用的外部图片或字体可能需要网络请求；文字转路径并嵌入资源，可让文件不再依赖这些外部链接。 查看隐私政策

常见问题

WebP 支持透明背景吗？

支持。保持“透明”设置即可保留透明区域，也可以选择纯色背景。

WebP 一定比 SVG 小吗？

不一定。简单的矢量 Logo 可能以 SVG 保存更小。目标平台需要位图时可用 WebP，并查看实际输出大小。

质量 100 是否等于无损？

不等于。滑块控制浏览器的编码质量，不保证无损 WebP。需要无损位图时可以选择 PNG。

浏览器不支持 WebP 编码怎么办？

工具会检查实际输出格式，并提示错误，不会把 PNG 内容保存成 .webp。请使用更新的浏览器或选择 PNG。

SVG 动画会保留为动态 WebP 吗？

不会。本工具导出一张静态位图，不保留 SVG 动画时间轴，也不生成动态 WebP。

支持 SVG 批量转 WebP 吗？

支持，请进入批量 SVG 转换工具，选择 WebP、设置统一输出参数，再下载 ZIP。本页每次处理一个文件。

技术参考: MDN：浏览器图片编码与质量参数

继续处理你的 SVG

相关使用指南

↑ 返回转换工具