SVG、PNG、JPG 各自适合什么场景？

网页上 90% 的图片都是 SVG、PNG 或 JPG 三种之一。它们看起来差不多，但各自适合的场景差别很大，选错了要么浪费体积，要么牺牲画质。

一句话判断法

先问自己一个问题：原图是由形状组成的，还是由像素组成的？

• 形状（图标、Logo、图示、图表）→ SVG
• 像素 + 锐利边缘（截图、UI 样稿、像素画）→ PNG
• 像素 + 渐变（照片、渲染图）→ JPG

这条规则能覆盖九成情况，剩下的一成再细调即可。

SVG — 可缩放、小体积、可编辑

SVG 存的是矢量路径，所以在任何尺寸下都是锐利的。对平面图形来说，它通常是三者中体积最小的，而且可以用文本编辑器改，用 CSS 改样式，用 JS 或 SMIL 做动画。

适合： 图标、Logo、插画、数据可视化，任何需要缩放的东西。

注意： 复杂渐变和滤镜可能让文件变大；不同浏览器对 SVG 滤镜的支持也不一致。

PNG — 无损的位图格式

PNG 是基于像素的无损压缩格式，支持透明通道。你放进去的每个像素都原样输出，所以特别适合截图、像素画、UI 样稿这类需要锐利边缘的图片。

适合： 截图、像素画、含文字的图片、任何在有损压缩下会出现锯齿的场景。

注意： 在照片上 PNG 会急剧膨胀。一张 1920×1080 的照片，PNG 可能是同质量 JPG 的十倍大。

JPG — 适合照片的有损格式

JPG 通过丢弃人眼不容易察觉的信息来实现更小的体积。在质量 80–90 下，它和原图几乎无法区分，但体积可以缩小 5–10 倍。

适合： 照片、渲染场景、任何有平滑渐变的图。

注意： 锐利边缘（UI 截图、文字）会出现肉眼可见的光晕。

它们之间的转换

• SVG → PNG / JPG： 目标平台不支持 SVG 时，用我们的 SVG 转 PNG 或 SVG 转 JPG。
• PNG → SVG： 矢量化（Trace）在平面图形上能用，但在照片上效果很差。PNG 转 SVG 工具适合图标和 Logo。
• JPG → PNG： 用得少，但当你需要透明通道时就得转，因为 JPG 没有 alpha 通道。

拿不准时，先用那条一句话规则，再按需要微调。