格式与压缩
PNG vs SVG：透明、无损与像素的选择指南
通过像素放大、透明通道、无损压缩和浏览器解码成本等维度对比 PNG 与 SVG，帮助你在不同场景下做出合适的选择。
#formats #comparison #guide #web-dev
PNG 和 SVG 都是常用图片格式，但工作原理完全不同。PNG 存储像素，SVG 用代码存储形状。选哪一种，取决于图片类型、使用方式，以及是否需要无损缩放。
两种格式的工作原理
PNG 是位图格式，存储像素网格，支持透明背景。它适合截图、带文字的图片，以及每个像素都很重要的图形。
SVG 是矢量格式，用路径、形状和文字指令描述图片。它可以缩放到任意尺寸而不模糊，也可以用代码编辑。
对比
| 特性 | PNG | SVG |
|---|---|---|
| 结构 | 像素 | 矢量形状 |
| 缩放 | 放大可能模糊 | 任意尺寸都清晰 |
| 透明 | 支持 | 支持 |
| 文字 | 渲染为像素 | 可编辑文字 |
| 文件大小 | 取决于分辨率 | 取决于复杂度 |
| 动画 | 不原生支持 | 可以 |
什么时候使用 PNG
适合使用 PNG：
- 截图或扫描文档
- 包含复杂纹理或照片
- 需要兼容性好的位图文件
- 图片包含不能改变的像素级细节
什么时候使用 SVG
适合使用 SVG：
- Logo、图标或简单插画
- 需要在不同屏幕尺寸下缩放
- 希望用 CSS 控制颜色
- 简单图形需要小体积
PNG 与 SVG 互转
SVG 转 PNG 很简单：把矢量图按目标分辨率渲染成位图即可。PNG 转 SVG 更难，需要把像素追踪成矢量路径。简单 Logo 和形状可以成功转换，照片无法有效转换。
PictKit 的 SVG 转换工具 可以把 SVG 导出为不同尺寸的 PNG 或 WebP，适合邮件、文档等不支持 SVG 的场景。
选择清单
- 图片是照片或复杂纹理？使用 PNG 或位图格式。
- 需要在任意尺寸下保持清晰？使用 SVG。
- 需要透明背景？两种格式都支持。
- 需要作为代码编辑或用 CSS 控制？使用 SVG。
- 目标平台要求位图文件？使用 PNG。
没有适合所有场景的最佳格式。根据图片类型和用途选择，可以避免无谓的文件体积和画质问题。
常见问题
SVG 总是比 PNG 好吗？ 不是。SVG 更适合简单矢量图形，PNG 更适合照片、截图和复杂纹理。
SVG 可以在 HTML 中使用吗？ 可以。SVG 可以直接嵌入 HTML，并用 CSS 设置样式。
为什么我的 PNG 很大？ PNG 不使用有损压缩存储像素，高分辨率图片会很大。当体积重要时，可以转换为 WebP，照片使用 JPEG。
SVG 可以做网站图标吗？ 可以。现代浏览器支持 SVG 图标，也可以为旧浏览器提供 PNG 或 ICO 回退。