SVG 转 WebP
将矢量 SVG 文件栅格化为紧凑的 WebP 图片——几秒钟完成,100% 在浏览器中运行。
源文件
将 SVG 文件拖到此处
或点击选择文件
选项
什么是 SVG?
SVG 即可缩放矢量图形(Scalable Vector Graphics),是一种基于 XML 的矢量图像格式,由万维网联盟(W3C)于 2001 年标准化。与 JPG、PNG 或 WebP 等栅格格式不同,SVG 文件以数学描述的形式存储形状、路径、文字和渐变,而不是像素网格。这意味着 SVG 可以缩放到任意尺寸——从一个小图标到一块广告牌——都不会失去清晰度或出现像素化。SVG 也是可读的文本,因此可被搜索、可用 CSS 设置样式、可用 JavaScript 制作动画,并且对于简单的徽标和图标来说极为紧凑。
由于 SVG 基于矢量,它是徽标、图标、插图、图表、示意图以及任何需要在每种分辨率下都保持清晰的图形的理想格式。所有现代浏览器都能原生渲染 SVG。然而,SVG 不适合复杂的照片,而且许多图像编辑器、社交平台、内容管理系统和邮件客户端要么以不一致的方式栅格化 SVG,要么拒绝将其作为上传内容。这正是将 SVG 转换为 WebP 等栅格格式往往是分享或嵌入图形的最实用方式的原因。
什么是 WebP?
WebP 是由 Google 开发并于 2010 年发布的现代栅格图像格式。它使用源自 VP8 视频编解码器的压缩技术,生成的图像文件在同等视觉质量下通常比 JPG 和 PNG 小 25%–35%。WebP 同时支持有损和无损压缩、Alpha 通道透明度、动画以及 ICC 颜色配置文件,是功能最全面的栅格格式之一。所有主流浏览器都支持它,包括 Chrome、Edge、Firefox、Safari 和 Opera,并被广泛用于对性能要求较高的网页图像。
由于 WebP 兼顾小文件体积、透明度和广泛的兼容性,它已成为现代 Web 开发的默认格式之一。将 SVG 转换为 WebP 后,您将获得一个独立的栅格文件,可在任何地方嵌入——包括不接受 SVG 的平台——同时文件体积远小于等价的 PNG 或 JPG 导出。
SVG 与 WebP 对比
SVG 和 WebP 的设计目的根本不同:SVG 是一种以数学形式存储形状的矢量格式,而 WebP 是一种存储像素的栅格格式。下表总结了 SVG 与 WebP 图像格式之间的关键差异。
| 特性 | SVG | WebP |
|---|---|---|
| 图像类型 | 矢量(基于数学) | 栅格(基于像素) |
| 推出年份 | 2001 | 2010 |
| 缩放 | 无限缩放,无质量损失 | 固定分辨率,放大会像素化 |
| 最适合 | 徽标、图标、插图、UI 图形 | 照片、复杂栅格图像 |
| 透明度 | 支持(固有) | 支持(Alpha 通道) |
| 动画 | 支持(通过 SMIL/CSS/JS) | 支持(动画帧) |
| 文件大小(简单图形) | 非常小(基于文本) | 较小,但比 SVG 大 |
| 文件大小(照片) | 不适合 | 优秀(有损或无损) |
| 代码可编辑 | 可以(XML 文本) | 不可以(二进制) |
| 浏览器支持 | 所有现代浏览器 | 所有现代浏览器 |
| 平台上传支持 | 不一致(常被拒绝) | 广泛接受 |
简而言之,SVG 在可缩放性、可编辑性和简单图形体积方面胜出,而 WebP 在照片压缩和平台接受度方面胜出。将 SVG 转换为 WebP 会将矢量图形栅格化为固定分辨率的像素图像,可在任何地方嵌入、上传和分享。
何时使用 SVG 转 WebP
尽管 SVG 是一种出色的格式,但在许多实际场景中将它栅格化为 WebP 是更好的选择。每当平台、服务或工作流期望的是栅格图像而非矢量图形时,将 SVG 转换为 WebP 可以让您兼得 SVG 的设计质量和 WebP 的广泛兼容性:
- 平台上传。许多社交网络、市场、表单构建器和 CMS 平台出于安全原因拒绝 .svg 上传。WebP 几乎在所有平台都被接受。
- 邮件嵌入。大多数邮件客户端无法内联渲染 SVG。WebP 图像可在 Outlook、Apple Mail、Gmail 等客户端中可靠显示。
- 照片内容。如果您的 SVG 包含嵌入的栅格照片或复杂渐变,导出为 WebP 可能比保留为 SVG 产生更小的文件。
- 缓存与分发。CDN 和图像 CDN 处理单个 WebP 文件比处理 SVG 更可预测,尤其是在提供响应式图像变体时。
- 较旧的应用程序。一些旧版图像查看器和编辑器无法打开 SVG。WebP 在现代图像编辑器和查看器中得到广泛支持。
- Favicon 和应用图标。当需要固定分辨率的栅格图标时,WebP 提供了小巧且高质量的文件。
请将原始 SVG 保留为可编辑的主文件——它可以随时以任意分辨率重新导出。当您需要紧凑、固定尺寸的栅格图像用于分享、嵌入或上传时,再使用 WebP 导出。
如何将 SVG 转换为 WebP
使用此工具将 SVG 图像转换为 WebP 只需几秒钟,并且完全在浏览器中完成。无需上传、无需注册、无需安装。工具通过 data URL 加载您的 SVG,按 SVG 的固有尺寸将其栅格化到画布上,再通过 Canvas API 将画布重新编码为 WebP。请按以下四步操作:
- 上传 SVG 文件。点击上传区或将 .svg 文件拖放到此处。图像将在本地解码并显示为预览。
- 调整 WebP 质量。使用 10% 到 100% 的质量滑块平衡文件大小与视觉质量。85% 是大多数图形的良好默认值;数值越低文件越小。
- 转换为 WebP。点击"转换为 WebP"按钮。工具会将 SVG 栅格化到画布并重新编码为 WebP,并排显示原始与转换后的文件大小。
- 下载 WebP。点击"下载 WebP"将转换后的文件保存到设备。原始 SVG 文件不会被修改。
由于每一步都使用 JavaScript 在浏览器中本地运行,您的 SVG 图像永远不会被上传到服务器。这使得转换完全私密、快速,并适合敏感或机密的图形。
这个 SVG 转 WebP 转换器免费吗?
是的,完全免费,无需注册、无水印,除设备内存外没有任何限制。
为什么我的 SVG 文件加载失败?
引用外部资源或使用不支持的特性的 SVG 可能无法解码。请先在浏览器中打开 SVG 确认其有效。
转换后的 WebP 支持透明度吗?
支持——WebP 支持 Alpha 通道透明度,因此 SVG 中的透明区域会在输出中保留。
我的图片会被上传吗?
不会。所有处理都在本地进行,图片永远不会离开您的浏览器。