PNG、SVG 与 WebP 怎么选？前端图标资源判断表
格式选择不是“越新越好”，而是看视觉是否需要无限缩放、能否被代码改色、是否包含透明细节，以及最终运行在哪种页面和设备上。
快速结论
可缩放、可改色的简单图标优先 SVG；固定外观的透明图标和插画优先 PNG；大尺寸内容图片和营销视觉再评估 WebP。
一张表看懂三种格式
| 格式 | 最适合 | 优势 | 注意事项 |
|---|---|---|---|
| SVG | 线性图标、单色标识、需要缩放或改色的矢量图形 | 清晰、体积小、可用 CSS 控制 | 必须是真实矢量路径；截图无法凭空恢复矢量信息。 |
| PNG | 固定尺寸的透明图标、插画、阴影和纹理 | 还原像素细节，开发引用直接 | 放大可能模糊，文件体积通常高于 WebP。 |
| WebP | 封面、海报、大图和需要优化传输体积的内容图片 | 通常更省流量，适合网页分发 | 要验证透明边缘、压缩损失和项目兼容性。 |
从 UI 截图提取时，为什么通常导出 PNG？
因为截图已经是像素。即使原设计中的图标来自 SVG，进入截图后也已经被栅格化；此时导出干净的透明 PNG，最能保留真实颜色、阴影和边缘。如果开发必须使用 SVG，应回到原始设计文件或图标库获取，而不是把 PNG 文件改名成 SVG。
一个实用的选择顺序
- 先问“这个元素会不会随尺寸或颜色变化？”会变化，优先 SVG。
- 再问“它是否依赖透明阴影、纹理或复杂笔触？”依赖这些细节，优先 PNG。
- 最后问“传输体积是否是主要矛盾？”如果是大图或营销视觉，再用真实样张比较 WebP。
交付时别忘了命名和展示尺寸
格式正确只是第一步。建议同时写清用途、状态、画布尺寸和预期 CSS 尺寸，例如 nav-home-active.png。文件画布可以比展示尺寸大，但不应让开发者猜测是否允许拉伸或压缩。
只讨论格式
容易陷入“PNG 一定大”“WebP 一定快”的抽象结论，忽略真实视觉和运行环境。
结合场景验证
拿同一张样张比较清晰度、透明边缘、体积和加载链路，再做可追溯的选择。
常见问题
PNG、SVG、WebP 哪个最适合 UI 图标？
简单可缩放图标优先 SVG；固定透明细节优先 PNG；大图和营销视觉再评估 WebP。
从截图提取时为什么通常导出 PNG？
截图是像素数据，透明 PNG 能保留真实颜色、阴影和边缘。
WebP 可以完全替代 PNG 吗？
不能，需结合透明边缘、压缩损失、兼容性和项目管线验证。
先把视觉资产提取出来
上传一张 UI 截图，校对元素后导出透明 PNG，再按项目场景选择最终格式。