PNG 和 SVG 什么时候用哪个
一句话结论
图标、Logo、插画、任何需要缩放或变色的图形用 SVG；照片、截图、复杂渐变用 PNG。SVG 是矢量，任意放大都不糊、体积通常更小、还能用 CSS 改颜色；PNG 是位图，放大到超过原始像素就会失真。
核心区别对照
| 本质 | PNG | SVG |
|---|---|---|
| 放大后 | 会模糊、出现锯齿 | 始终清晰 |
| 体积 | 随尺寸平方增长 | 与显示尺寸无关，通常很小 |
| 能否用 CSS 改色 | 不能 | 能，可直接改 fill / stroke |
| 能否加动画交互 | 不能 | 能，可配合 CSS / JS |
| 适合内容 | 照片、截图、复杂光影 | 图标、Logo、图表、插画 |
| 浏览器支持 | 全部 | 全部 |
PNG
PNG 逐像素记录颜色信息，能精确表达照片、渐变、阴影这类复杂视觉，支持无损和透明通道。但它的体积随尺寸平方增长：一张 200×200 的图放大到 400×400，像素数变成 4 倍，文件也大致变成 4 倍，且放大后必然失真。
SVG
SVG 用 XML 描述"怎么画"，本质是一段文本。放大十倍仍然锐利，文件通常只有几 KB，还能直接用 CSS 改颜色、加动画、响应 hover。图标系统（Icon Font 的现代替代）、Logo、数据图表几乎都该用它。限制是不适合表达照片级的复杂图像——那种内容硬转 SVG 会让文件爆炸。
怎么选
- 图标、Logo、图表、简单插画 → SVG
- 照片、截图、带复杂光影的图像 → PNG
- 需要随主题变色的图标 → SVG（可用 currentColor）
相关工具
常见问题
SVG 能直接放在 img 标签里吗
可以，<img src="a.svg"> 完全可用。但这样加载的 SVG 无法被页面 CSS 控制内部颜色，需要变色时应内联到 HTML 或用 <svg> 标签引入。
SVG 有安全风险吗
有。SVG 是 XML，可以内嵌脚本。绝对不要把来源不可信的 SVG 直接内联进页面，先做净化处理。
为什么有人把 PNG 转 SVG 后文件更大
这是把位图硬描成矢量路径的结果。照片类内容不适合矢量表达，转换后路径数量爆炸，体积反而远超原图。