SVG 转 AVIF
想要一份保留透明、体积又最小的矢量图位图副本，AVIF 是答案——纯色和干净渐变的压缩效果格外好。按需要的分辨率选择 1–4 倍导出。这里默认画质 70 而不是 60，因为矢量图的锐利边缘比照片更早暴露压缩痕迹。
相关推荐： SVG 转 WebP
使用方法
拖入 SVG 文件并选择 1–4 倍导出倍率——它会乘在 SVG 自己声明的尺寸上。
矢量先渲染成像素，再以画质 70 编码为 AVIF——比照片默认值高一档，专门保护锐利边缘。
导出前把预览放大，检查细线和小字是否清晰，然后逐个保存或整批打包。
SVG vs AVIF
矢量对上位图编码器，比的其实是去处：在您自己的网站上，SVG 无条件胜出；而在所有拒收矢量的地方，AVIF 就是那份透明完整、体积最小的替身。画质 70 把它唯一的短板——细线发软——基本挡在了视线之外。
| SVG | AVIF | |
|---|---|---|
| 压缩方式 | 矢量（XML 文本） | 有损或无损 |
| 透明度 | 支持（完整 Alpha） | 支持（完整 Alpha） |
| 动画 | 支持（CSS/SMIL） | 支持（较少使用） |
| 兼容性 | 所有浏览器；但常被上传表单拒绝 | 所有现代浏览器（Safari 16.4 起，2023 年） |
| 适合用途 | 标志、图标、插画 | 大图横幅和图片密集的页面 |
常见问题
不会。所有转换都通过 WebAssembly 在您的浏览器内完成，文件自始至终不会离开您的设备，全程没有任何服务器参与。页面加载完成后即使断网也能继续使用，文件大小也没有限制，仅取决于设备内存。
SVG 是矢量格式，本身没有固定的像素尺寸，输出分辨率由您自行决定。倍率会乘以 SVG 声明的尺寸：一个 100×100 的图标按 3× 导出，得到的就是 300×300 的图片。由于渲染直接来自矢量，任何倍率下边缘都完全清晰——建议一开始就选好实际需要的尺寸，而不是事后放大。
目的地是网页而且在意字节的时候——图标集缩略图、社交卡片、屏蔽 SVG 的平台预览。若要不计代价保住每一条像素级边缘，PNG 仍是最稳的导出；其余面向网页的场景，AVIF 通常只有 PNG 体积的零头。
能——AVIF 带完整 Alpha 通道，SVG 中未着色的区域保持真正的透明，抗锯齿边缘也一并保留。标志和图标放到任何背景上都不会出现白边。
自己的网站请直接放 SVG：无限清晰、通常极小、还能用 CSS 控制。AVIF 位图是给拒收矢量的地方准备的——社交预览卡、电商平台、徽章托管、邮件。所以这不是二选一：SVG 是正本，按各个目的地的尺寸导出 AVIF 副本即可。
画面以发丝线条和小号文字为主的时候——有损编码最先软化的就是它们，画质 70 下可能看得出来。SVG 转 PNG 能把每条边保持数学级锐利，而且对简单的纯色图标来说体积往往只比 AVIF 大一点。图越大、渐变越多，AVIF 的优势才越明显。
相关工具
SVG 转 WebP
在浏览器内把 SVG 转换为 WebP——免费、私密、无需上传。为矢量图生成体积最小的栅格副本，Alpha 透明完整保留，默认画质 85，尺寸由 1–4 倍倍率决定。
SVG 转 PNG
在浏览器内把 SVG 转换为 PNG——免费、私密、无需上传。1–4 倍导出倍率任选（默认 2×），图标和标志在任何输出尺寸下都清晰锐利，Alpha 透明通道完整保留。
PNG 转 AVIF
在浏览器内把 PNG 转换为 AVIF，免费、无需上传。透明通道完整保留，体积通常比原 PNG 小 80–95%，比 WebP 更小，特别适合在意加载速度的网站。
SVG 转 ICO（网站图标）
在浏览器内把 SVG 矢量图转换成 ICO 网站图标——免费、无需上传。先按 4 倍尺寸渲染再缩小，16、32、48 px 每个尺寸都锐利到像素级别，透明效果与设计稿保持一致。