首页 SVG 转 WebP

SVG 转 WebP

将矢量 SVG 文件栅格化为紧凑的 WebP 图片——几秒钟完成,100% 在浏览器中运行。

源文件

将 SVG 文件拖到此处

或点击选择文件

.svg

选项

原始 (SVG)
转换后 (WebP)

什么是 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 图像格式之间的关键差异。

特性SVGWebP
图像类型矢量(基于数学)栅格(基于像素)
推出年份20012010
缩放无限缩放,无质量损失固定分辨率,放大会像素化
最适合徽标、图标、插图、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。请按以下四步操作:

  1. 上传 SVG 文件。点击上传区或将 .svg 文件拖放到此处。图像将在本地解码并显示为预览。
  2. 调整 WebP 质量。使用 10% 到 100% 的质量滑块平衡文件大小与视觉质量。85% 是大多数图形的良好默认值;数值越低文件越小。
  3. 转换为 WebP。点击"转换为 WebP"按钮。工具会将 SVG 栅格化到画布并重新编码为 WebP,并排显示原始与转换后的文件大小。
  4. 下载 WebP。点击"下载 WebP"将转换后的文件保存到设备。原始 SVG 文件不会被修改。

由于每一步都使用 JavaScript 在浏览器中本地运行,您的 SVG 图像永远不会被上传到服务器。这使得转换完全私密、快速,并适合敏感或机密的图形。

这个 SVG 转 WebP 转换器免费吗?

是的,完全免费,无需注册、无水印,除设备内存外没有任何限制。

为什么我的 SVG 文件加载失败?

引用外部资源或使用不支持的特性的 SVG 可能无法解码。请先在浏览器中打开 SVG 确认其有效。

转换后的 WebP 支持透明度吗?

支持——WebP 支持 Alpha 通道透明度,因此 SVG 中的透明区域会在输出中保留。

我的图片会被上传吗?

不会。所有处理都在本地进行,图片永远不会离开您的浏览器。