SVG转WebP在线转换
把矢量文件渲染成WebP，宽度精确到版面所需的像素值。适用于这些情况：CMS不允许上传SVG，社交预览需要位图，或者插画路径太多，浏览器绘制起来很慢。
图片格式转换
或将JPG, JPEG, JPE … 文件拖放到此处 ·
单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除
文件在我们的服务器上处理，并在 30 分钟后删除。
85 可使照片在视觉上与原图无差别。只有在需要更小的文件时才调低。
JPG、BMP 和 EPS 不支持透明。透明像素会用此颜色填充。
用于透明像素底色的十六进制颜色，例如 #FFFFFF。
此格式只能保存单张图像。如需保留动画，请选择输出 GIF 或 WebP。
多尺寸图标在一个文件中包含多种分辨率，浏览器和操作系统会选用所需的尺寸。
保持原始尺寸，或输入一边的数值，自动保持宽高比。
上面所选边的像素值。
相对于原始尺寸的百分比。
屏幕和网页使用 sRGB 即可。印刷流程请保持原样；灰度会丢弃颜色。
仅写入元数据，0 表示保留原值。打印机和部分网站会读取此数值，它不会改变像素尺寸。
使用方法
- 1
上传SVG
最多添加 20 个从 Figma、Illustrator、Inkscape 或图表库导出的 .svg 文件，每个不超过 95 MB。
- 2
设置输出宽度
调整输出图片尺寸默认宽度为 1200 px；请改成图片在页面上显示宽度的两倍。音质默认为 90；如果是纯色 Logo 或图标，可在高级设置中勾选无损。
- 3
转换为WebP
点击转换为 WebP，然后下载单个文件或打包的 ZIP。透明区域会保持透明。
如何把 SVG 转换成指定尺寸的 WebP？
上传 SVG，把调整输出图片尺寸设为所需的像素宽度（默认 1200 px），然后点击转换为 WebP。矢量图会按该宽度重新绘制，不会放大，也不会变模糊。
什么时候应该把SVG转成WebP
SVG 于 2001 年成为 W3C 推荐标准，是大多数 Logo 和图标的合适格式：只有几 KB 的文本，任意缩放都清晰。问题出在文件离开你自己的代码之后。WordPress 和许多托管式建站工具拒绝上传 SVG，Facebook、LinkedIn 和 X 的链接预览会按位图抓取，设计工具导出的插图还可能嵌入栅格效果，让矢量文件变成好几 MB 的标记代码。
WebP 由 Google 于 2010 年发布，Safari 在 2020 年的 14 版才开始支持，它正是为这种场景设计的位图：同样的观感下比 PNG 更小，并带有真正的 Alpha 通道。直接按最终尺寸把 SVG 渲染成 WebP，省去了先导出大 PNG 的常见弯路。如果你还想反向操作，可以看 WebP转SVG 这一页，了解为什么那个方向需要描摹而不是转换。
常见网页位置的SVG转WebP尺寸
1200 × 630 px
Open Graph 链接预览图
页面被分享时显示的图片
1920 × 1080 px
全宽主视觉插图
1 倍下可覆盖大多数桌面屏幕
1600 × 900 px
博客栏图片（2 倍）
适用于 800 px 宽的内容栏
400 × 100 px
页眉 Logo（2 倍）
适用于 200 × 50 px 的 Logo 位置
SVG
可缩放矢量图形
SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。
- 压缩方式
- –
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 2001 · W3C
WEBP
WebP 图片
WebP 是 Google 于 2010 年发布的图片格式,目的是让网页加载更快。它在同一种格式中同时支持有损和无损压缩、Alpha 透明和动画。在视觉质量相近的情况下,有损 WebP 文件通常比 JPEG 小 25–35%,无损 WebP 通常比 PNG 更小。目前所有主流浏览器都支持它,但一些较旧的桌面软件、打印服务和上传表单仍然不接受。Windows、macOS 和大多数现代图片编辑器都可以打开 WebP 文件。
- 压缩方式
- 有损或无损
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 2010 · Google
人们把 SVG 转成 WebP，是为了得到体积小、尺寸固定的位图，用在不接受矢量文件或绘制矢量很慢的地方，例如内容管理系统、社交预览图或内容繁多的落地页；而 WebP 转 SVG 属于描摹，不是格式转换。
SVG如何栅格化以及需要检查什么
转换器会读取 SVG 自带的宽度、高度和 viewBox，然后按你设置的宽度绘制每条路径，高度按宽高比自动得出。由于是在最终尺寸下绘制，细线和小字只会在正确的比例下做一次抗锯齿。事后再放大一张小 PNG，效果永远不会这么干净。
字体是常见的意外来源。如果 SVG 指定的字体没有嵌入，也没有转成轮廓，就会使用备用字体，行长也会随之改变。导出前请在设计工具中把文字转为轮廓。SVG 内通过 URL 链接的外部图片不会被抓取，请先嵌入或拼合图稿。
SVG转WebP：该做与不该做
| 建议 | 避免 |
|---|---|
| 按页面显示的 CSS 宽度的 2 倍渲染 | 转换本来作为 SVG 体积更小的简单内联图标 |
| 颜色少的纯色 Logo 使用无损 | 为 600 px 的位置渲染 4000 px 的图 |
| 保留 SVG 源文件，以便日后生成其他尺寸 | 在邮件通讯中发送 WebP |
| 使用 WebP 时加上 width 和 height 属性，避免版面跳动 | 指望保留可编辑文字：WebP 是像素，不是可选中的文字 |
SVG转WebP常见问题
SVG转WebP时应该用多大的像素宽度？
取图片在页面中以 CSS 像素显示的宽度，再乘以 2，这样在高分屏手机和笔记本上也能保持清晰。例如显示在 800 px 栏中的插图，应以 1600 px 渲染。在网页上用到 3 倍很少划算，因为文件会变大，而肉眼可见的提升很小。
网站上用WebP比SVG更好吗？
简单的 Logo、图标和示意图不必转换：干净的 SVG 体积很小，任何尺寸都清晰，建议保留。对于带渐变、滤镜或成千上万条路径的复杂插图，以及只接受位图的地方（如社交平台预览图或不支持 SVG 的内容管理系统），转成 WebP 更合适。
转换后的WebP会保留SVG的透明背景吗？
可以。WebP 在有损和无损模式下都有完整的 Alpha 通道，因此 SVG 中没有填充的区域会保持透明。图形边缘会针对透明背景做抗锯齿处理，放在任何背景色上看起来都自然。
矢量图转WebP该选有损还是无损？
无损适合只有少量纯色的 Logo、图标和图表，这类图像压缩率很高，边缘也非常干净。质量 85 到 90 的有损模式适合带渐变、阴影或纹理的插图，这类图用无损文件会很大。可以用同一个文件两种方式都试一下，保留看起来干净且更小的结果。
为什么WordPress无法上传SVG？
WordPress 不允许上传 SVG，因为 SVG 可能带有脚本。它从 2021 年发布的 5.8 版起支持 WebP，所以转换后无需安全插件，媒体库就能接收。如果确实需要矢量图，也可以通过带净化功能的插件添加 SVG 支持。
转换后的WebP能用在电子邮件简报里吗？
不建议。包括 Windows 版桌面 Outlook 在内的多个邮件客户端不显示 WebP，Gmail 也不渲染 SVG。发邮件时请改用 SVG转PNG 来渲染图稿。
