结论先行：决策表

网页/App UI 内的图形元素 → SVG（矢量、可换色、可用 CSS 控制）。

社交平台头像/分享图 → PNG（平台压缩后表现稳定）。

App 商店/启动图标 → PNG（iOS）与自适应 PNG（Android）。

需要照片级色彩与复杂纹理 → WEBP/AVIF 位图，而不是 SVG。

印刷/大幅物料 → SVG 或 PDF（矢量无限放大）。

TIP同一个图标要跨多端交付时，先导 SVG 母版，再按场景派生，别为每个端单独找素材。

为什么 UI 里首选 SVG

体积小：一枚线性图标的 SVG 通常 0.5-2KB，同视觉的 2x PNG 要 3-8KB；内联后还省一次网络请求。

可控性强：fill/stroke 跟随 CSS 变量，暗色模式一行代码搞定；PNG 做不到运行时换色。

清晰度无关屏幕密度：从 1x 老屏到 3x Retina 再到 4K 大屏都是同一份文件，不需要 @2x/@3x 多套。

宿主环境不支持 SVG（老版 Office、部分邮件客户端、某些小程序容器）→ PNG。

平台强制要求（App 商店截图、微信卡片封面）→ 按平台规范导出固定尺寸 PNG。

图标本身是照片/复杂渐变插画 → SVG 会比位图更大更慢，选 WEBP。

设计师导出的 SVG 常带编辑器元数据（注释、隐藏图层、冗余精度），SVGO 一遍普遍减 30-60%。本站 SVG 工具箱的压缩面板就是浏览器内跑 SVGO，文件不出本机，拖进去即可。

PNG 侧优先 8-bit 调色板（图标类纯色图形无损且更小）；照片类再用有损 WEBP。