SVG 转 WebP
把 SVG 文件或代码按任意尺寸或缩放比例转换为 WebP,并保留透明度。徽标用无损,插画用有损。在浏览器中运行。
WebP 是一种紧凑的位图格式,适用于不接受 SVG 的网页、应用和商店,比如某些构建工具里的应用图标、电商商品页、社交预览和邮件。本转换器会按您选择的精确像素尺寸绘制 SVG,所以在 2 倍或 4 倍下曲线和文字依然清晰,并连同透明度一起保存为 WebP。由于徽标和图标有纯色和锐利边缘,默认使用无损模式;细节丰富的插画则适合有损。
使用方法
- 拖入 .svg 文件或粘贴 SVG 代码。
- 选择尺寸:1 倍、2 倍、4 倍、自定义缩放,或精确宽度。
- 保持背景透明,或选择一种颜色。
- 徽标和图标保持无损;插画则设置画质,然后下载。
计算公式
输出宽度 = SVG 宽度 × 缩放(或指定的精确宽度);高度 = 宽度 × SVG 高度 ÷ SVG 宽度。无损 WebP(VP8L)保留每个像素;有损(VP8)使用画质 q。
SVG 尺寸取自其 width 和 height(CSS 单位,每英寸 96 px)或 viewBox;矢量按输出尺寸直接渲染,而不是把小位图放大。WebP 每边最多允许 16,383 px。SVG 图片内部不会加载通过 URL 引用的图片、字体和样式表,所以请将它们嵌入,或把文字转为轮廓。
示例
一个只有 viewBox="0 0 24 24" 而没有 width 和 height 的图标按 24 × 24 px 计算;在 4 倍 下变成 96 × 96 px 的 WebP,在精确宽度 512 下则是 512 × 512 px。那个 120 × 80 的测试 SVG 在 2 倍下是 240 × 160 px。
常见问题
该选无损还是有损?
徽标、图标、示意图和文字选无损:边缘保持锐利,对纯色区域往往比有损更小。细节丰富、偏绘画风格的插画则使用画质 80–90 的有损。
透明背景会保留吗?
会。WebP 有 Alpha 通道;只有当目标需要不透明图片时才选择背景色。
为什么文字看起来不一样?
通过 URL 引用的网络字体不会在 SVG 图片内部加载。请把文字转为路径,或把字体作为 data: URI 嵌入。
我的 SVG 会被上传吗?
不会,它在您的浏览器中渲染和编码。
最后更新:
包含这些输入的页面地址: https://kakao.mobile/zh/tools/svg-to-webp-converter/
引用此工具
kakaoCalc. (2026, November 8). SVG 转 WebP. https://kakao.mobile/zh/tools/svg-to-webp-converter/
“SVG 转 WebP.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/svg-to-webp-converter/.