对比
SVG 与 WebP
SVG 描述矢量形状；WebP 主要是栅格图像格式。徽标和示意图通常从矢量内容开始，照片和像素绘图则是栅格内容。应按素材类型选择并测试目标浏览器。
应该选择哪种格式？
可缩放徽标、图标和示意图用 SVG；照片和栅格作品在网页分发及浏览器支持合适时用 WebP。
适用于 SVG
徽标、图标和图表 · 需要缩放的界面图形
- 跨屏缩放的插图
- 可编辑图形
适用于 WebP
网页图像交付 · 照片 · 透明网页资源
- 减少网页图像传输量
- 需要透明度或动画的资源
基本信息
| 项目 | SVG | WebP |
|---|---|---|
| 扩展名 | .svg | .webp |
| MIME 类型 | image/svg+xml | image/webp |
| 常见用途 | 徽标、图标和图表 · 需要缩放的界面图形 | 网页图像交付 · 照片 · 透明网页资源 |
| 打开方式 | 用浏览器、矢量编辑器或兼容查看器打开。 | 请使用兼容的浏览器、图像查看器或图像编辑器打开 WebP 文件。 |
| 导出或转换 | 需要位图时导出PNG，并检查尺寸、字体、颜色和透明度。 | 将 WebP 导出为 JPEG 时不会保留透明度，且输出为有损格式。导出为 PNG 时，请决定静态图像是否足够，并在需要时单独处理动画。 |
按用途选择
跨屏缩放的插图
徽标、图标和图表 · 需要缩放的界面图形
SVG可编辑图形
徽标、图标和图表 · 需要缩放的界面图形
SVG减少网页图像传输量
网页图像交付 · 照片 · 透明网页资源
WebP需要透明度或动画的资源
网页图像交付 · 照片 · 透明网页资源
WebP关键点 1
SVG 可在没有固定像素网格的情况下缩放矢量形状。
进一步了解差异关键点 2
WebP 保存栅格图像，可采用有损或无损压缩。
进一步了解差异进一步了解差异
按实际显示尺寸预览，并检查目标浏览器中的颜色、透明度和渲染效果。不要期待将照片转为 SVG 后得到紧凑的矢量表示。
- SVG 适合需要缩放仍保持清晰的几何图形。
- WebP 面向栅格图片分发，可能减小资源体积。
- 格式转换会改变表示方式，也可能影响外观或可编辑性。
常见问题
SVG 能替代照片用的 WebP 吗？
通常不能高效替代。SVG 可以嵌入栅格数据，但 WebP 通常更适合分发照片。