要理解图片格式，首先要明白图像在计算机里的两种基本记录方式：
1. 矢量图（以 SVG 为代表）——“算”出来的图像
你可以把矢量图理解为“类似标签形式的代码”。它不记录每个像素的颜色，而是记录数学公式。比如，它会在代码里写：“在这里画一个半径 50 的圆，填充红色”。
- 最大优势： 无限放大不失真。无论放大 1000 倍，边缘依然像刀切一样锐利。
- 可编辑性： 极高。用记事本打开 SVG 文件，直接修改里面的文字、颜色或坐标，图片就会随之改变。还可以通过 CSS 和 JavaScript 控制它。
- 适用场景： Logo、UI 图标、数据图表，以及雷达/海图界面中的线条、文字和电子方位线（EBL）。
2. 位图（以 PNG、JPEG 为代表）——“画”出来的图像
位图是由无数个像素点拼成的“马赛克”。它记录的是“第 1 行第 1 列的像素是红色，第 1 行第 2 列是深红色……”
- 最大优势： 能够表现极其丰富的色彩和复杂的细节（如照片）。
- 缺点： 放大后会模糊、出现锯齿或马赛克；文件大小通常随分辨率增加而急剧增大。
二、 主流图片格式大比拼
在了解了矢量与位图的区别后，我们来看看具体的格式，它们其实是在文件大小、画质、透明度和编辑性之间做出的不同妥协。
1. JPEG / JPG：照片的王者
- 原理： 有损压缩（舍弃人眼不易察觉的细节）。
- 优点： 兼容性无敌，色彩丰富，压缩率高，文件体积小。
- 缺点： 有损压缩（多次保存画质会下降），不支持透明背景，不适合边缘锐利的图形（文字容易发虚）。
- 适用： 摄影照片、网页大背景图、不需要透明的复杂插画。
2. PNG：透明与无损的守护者
- 原理： 无损压缩。
- 优点： 画质完美，支持 Alpha 透明通道（边缘可以平滑渐变），适合线条锐利、大色块的图形。
- 缺点： 文件体积通常比 JPEG 大。
- 适用： 带透明背景的 Logo/图标、UI 设计稿、包含文字的截图、需要反复修改的设计图。
3. SVG：无限放大的代码艺术
- 原理： XML 代码描述的矢量图形。
- 优点： 无限放大不失真，纯文本可用代码修改，文件极小（针对简单图形），支持交互。
- 缺点： 无法表现照片级复杂细节，图形过于复杂时代码庞大。
- 适用： 网页图标、Logo、图表、雷达/海图线条（如 EBL）。
4. WebP：现代网页的宠儿
- 原理： 谷歌开发的格式，结合了有损和无损压缩。
- 优点： 同画质下，体积比 JPEG 和 PNG 小 25%~35%，支持透明和动态图。
- 缺点： 相对较新，部分老旧系统或专业软件支持不佳。
- 适用： 现代网站的所有图片、移动端 App 图片（追求加载速度）。
5. TIFF：专业印刷的巨无霸
- 原理： 无损压缩（或不压缩）。
- 优点： 画质极高，支持多图层，保留极多图像信息。
- 缺点： 文件体积极其巨大，网页和普通设备不支持直接浏览。
- 适用： 专业印刷、出版业、医学影像、档案级保存。
6. GIF：曾经的动态图霸主
- 原理： 最多 256 种颜色的无损压缩。
- 优点： 支持简单的逐帧动画，文件极小，兼容性极好。
- 缺点： 色彩极其贫乏，不支持半透明，边缘容易有锯齿。
- 适用： 简单的动态表情包（正逐渐被 WebP 或视频格式替代）。
三、 快速选型指南（总结表）
| 格式 | 压缩类型 | 透明背景 | 动画 | 推荐使用场景 |
|---|---|---|---|---|
| SVG | 矢量(代码) | ✅ | ✅ (代码) | 图标、Logo、图表、雷达/海图线条 |
| PNG | 无损 | ✅ (完美) | ❌ | 透明Logo、截图、UI设计、文字图 |
| JPEG | 有损 | ❌ | ❌ | 照片、网页大图、日常分享 |
| WebP | 有损/无损 | ✅ | ✅ | 现代网页图片（追求加载速度） |
| TIFF | 无损/无压缩 | ✅ | ❌ | 专业印刷、档案保存 |
| GIF | 无损(8位) | 仅全透明 | ✅ | 简单动态表情包 |