PNG、SVG 与 WebP：前端图标资源如何选择？
格式没有绝对的优劣。关键是看图形是否需要无限缩放、是否需要代码改色、是否包含复杂细节，以及它会在什么设备和页面中使用。
SVG：适合可控的矢量图标
SVG 最适合简单线性图标、单色图形和需要随界面缩放的标识。它可以被 CSS 改色、配合动效，也能在不同分辨率下保持清晰。前提是源文件本身是规范的矢量路径，而不是把位图嵌入 SVG 容器。
PNG：适合固定视觉与透明细节
PNG 适合带透明背景的复杂图标、插图、纹理和带细节的 UI 资产。切图大师导出的就是透明 PNG：它不依赖运行环境，开发可以直接作为图片资源引用。对于不需要动态改色、尺寸相对固定的视觉资产，PNG 是稳妥的交付格式。
WebP：适合内容图片与体积优化
WebP 常用于图片内容、封面、海报或需要压缩体积的插画。它通常比 PNG 或 JPG 更省流量，但并不天然替代 SVG；对于需要透明边缘且对视觉损失敏感的小图标，也要实际比较效果再决定。
快速选择
可缩放、可改色的简单图标优先 SVG；固定外观的透明图标和插图优先 PNG；大尺寸内容图片和营销视觉可优先评估 WebP。
为什么切图后通常导出 PNG？
从一张扁平的设计截图中提取元素，本质上是在处理像素信息。即使原设计中的图标可能来源于 SVG，截图中的它已经是位图。此时导出干净的透明 PNG，能保证视觉还原；如果项目需要 SVG，应回到原始设计源文件或图标库中取得矢量资源。
交付给开发时再补充两件事
- 命名与分组：例如
nav-home-active.png、nav-home-default.png，让状态关系可读。 - 使用尺寸：文件画布尺寸与页面展示尺寸可以不同；说明预期的 CSS 尺寸，有助于避免模糊或不必要的拉伸。
导出透明 PNG 资源
从 UI 截图中筛出开发真正需要的图标与插图。