SVG 转 WebP
WebP 能给出保留透明的前提下体积最小的矢量图栅格副本——适合社交预览图、图标集缩略图,以及那些渲染 SVG 不佳或出于安全原因屏蔽它的平台。常规界面用途按 2× 渲染即可;矢量图的大块纯色压缩起来效果极佳。
相关推荐: SVG 转 PNG
使用方法
拖入 SVG——渲染器按它们声明的尺寸在本地完成栅格化。
设定倍率(1–4 倍,默认 2×)决定输出分辨率,画质留在 85 附近即可;矢量的大块纯色在这里压缩得非常漂亮。
每个 WebP 可单独取回,也可以整组打包,Alpha 透明原样保留。
SVG vs WebP
渲染成 WebP 等于交出 SVG 的全部特长——任意缩放、任何倍数下的锐利边缘、文本可编辑——只换回一样东西:在 SVG 被拒之门外的地方照常显示。社交卡片、电商平台、邮件客户端就是那些地方。您自己的网站,还是继续伺服矢量原件。
| SVG | WebP | |
|---|---|---|
| 压缩方式 | 矢量(XML 文本) | 有损或无损 |
| 透明度 | 支持(完整 Alpha) | 支持(完整 Alpha) |
| 动画 | 支持(CSS/SMIL) | 支持 |
| 兼容性 | 所有浏览器;但常被上传表单拒绝 | 所有现代浏览器(2020 年起) |
| 适合用途 | 标志、图标、插画 | 网页图片:照片、缩略图、界面素材 |
常见问题
不会。所有转换都通过 WebAssembly 在您的浏览器内完成,文件自始至终不会离开您的设备,全程没有任何服务器参与。页面加载完成后即使断网也能继续使用,文件大小也没有限制,仅取决于设备内存。
SVG 是矢量格式,本身没有固定的像素尺寸,输出分辨率由您自行决定。倍率会乘以 SVG 声明的尺寸:一个 100×100 的图标按 3× 导出,得到的就是 300×300 的图片。由于渲染直接来自矢量,任何倍率下边缘都完全清晰——建议一开始就选好实际需要的尺寸,而不是事后放大。
对您自己的网站,SVG 通常确实是最优解。栅格副本是给其余场合准备的:社交媒体卡片、电商平台、邮件客户端,以及会剥离或屏蔽 SVG 的 CMS(SVG 可以携带脚本,很多平台见到就拒)。WebP 是紧凑又安全的替身。
会——WebP 支持完整的 8 位 Alpha,矢量渲染出的柔和阴影和抗锯齿边缘都能完好保留。加上小巧的体积,它是透明矢量图最好的栅格替身。
您能控制的页面放 SVG:简单图形下它更小,任何缩放级别都锐利,还能用 CSS 调整样式。SVG 被屏蔽或有风险的地方放 WebP——用户生成内容、邮件、社交卡片、电商平台——因为 SVG 能携带脚本,许多平台一律剥离。WebP 副本就像作品的外交版本:尺寸固定、安全无害,透明照旧。
两个。作品之后还要编辑或放大的话,请改用 SVG转PNG——画质 85 的 WebP 会烙进细微的损失,后来的编辑者无法撤销。文件要去打印或办公软件的话,WebP 和 SVG 在那边都不受欢迎;那些流程要的是 JPG 或 PNG。WebP 只为将在浏览器里显示的像素服务,仅此而已。
相关工具
SVG 转 PNG
在浏览器内把 SVG 转换为 PNG——免费、私密、无需上传。1–4 倍导出倍率任选(默认 2×),图标和标志在任何输出尺寸下都清晰锐利,Alpha 透明通道完整保留。
SVG 转 AVIF
在浏览器内把 SVG 转换为 AVIF,免费、无需上传。按 1–4 倍任选导出分辨率,矢量图变成带完整透明、体积极小的位图副本,适合拒收 SVG 的平台和社交预览卡片。
PNG 转 WebP
在浏览器内将 PNG 转换为 WebP:免费、无需上传、无需注册。完整保留 Alpha 透明通道,文件体积一般可减小 60–90%,每个文件的压缩效果在下载前即可看到。
SVG 转 ICO(网站图标)
在浏览器内把 SVG 矢量图转换成 ICO 网站图标——免费、无需上传。先按 4 倍尺寸渲染再缩小,16、32、48 px 每个尺寸都锐利到像素级别,透明效果与设计稿保持一致。