SVG 与 PNG：Logo、图标和 UI 该用哪种格式？
两种不可或缺的网页图片格式，各有所长。选错格式意味着 Logo 模糊或文件体积臃肿。
将 PNG 转换为 SVGSVG 和 PNG 是网页中使用最广泛的两种图片格式，但它们解决的是截然不同的问题。SVG 以数学形状的方式存储图形，可以缩放到任意尺寸而不损失画质。PNG 以固定的像素网格存储图形，能够捕捉照片或截图的每一个细节，但放大到超出原始分辨率时会变得模糊。
选对格式比大多数开发者意识到的更重要。一个保存为 PNG 的 Logo 在 4K 显示器上会出现锯齿。一张复杂的照片保存为 SVG 则会膨胀成一个巨大、加载缓慢的文件。本指南将 SVG 和 PNG 放在一起对比，让你每次都能做出正确的选择。如果你需要先了解基本概念，可以阅读我们的位图与矢量图详解。
什么是 SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图片格式。它不是为每个像素存储颜色值，而是用数学坐标来描述形状、路径和文本。圆形由圆心和半径定义，直线由两个端点定义。浏览器读取这些指令，然后以所需的任意尺寸渲染图形。
因为没有像素需要拉伸，SVG 图片在 320 像素的手机屏幕和 5K Retina 显示器上都同样清晰锐利。文件本身是纯文本，这意味着你可以在代码编辑器中打开它，用 CSS 调整颜色，用 JavaScript 添加动画效果，并用 gzip 进行压缩。搜索引擎甚至可以读取 SVG 内嵌的文本，这使它在无障碍访问方面优于位图格式。
SVG 最适合由几何形状、清晰边缘和纯色区域构成的图形：Logo、图标、插图、图表和 UI 元素。它不适用于照片类内容。如需深入了解，请阅读什么是 SVG？
什么是 PNG？
PNG（Portable Network Graphics，便携式网络图形）是一种采用无损压缩的位图格式，以像素网格的方式存储图形。每个像素都保留其精确的颜色值，因此不会出现 JPEG 那样的压缩伪影。PNG 还支持完整的 Alpha 通道透明度，当你需要带透明背景的照片或精细图形时，它就是首选格式。
由于 PNG 依赖分辨率，图片在原始尺寸下显示效果最佳。放大会出现像素化；缩小则浪费带宽，传输了超出显示需求的数据。对于照片来说，PNG 文件比 JPEG 更大，但其无损画质使它非常适合截图、软件 UI 原型，以及任何清晰度和色彩准确性比下载速度更重要的图片。
PNG 擅长捕捉矢量格式无法高效再现的复杂视觉细节：带透明度的照片、含有抗锯齿文本的截图，以及包含数千种独特颜色和细微渐变的艺术作品。
逐项对比
下表从网页图形最重要的特性出发，对 SVG 和 PNG 进行了对比。
| 特性 | SVG | PNG |
|---|---|---|
| 可缩放性 | 无限缩放——任何尺寸都清晰 | 固定分辨率——放大后出现像素化 |
| 文件大小（简单图形） | 非常小（图标通常不到 5 KB） | 较大（即使是简单形状也包含像素数据） |
| 文件大小（复杂图像） | 可能非常大（数千条路径） | 中等到大，但可预测 |
| 透明度 | 完全支持（矢量模型固有特性） | 完整的 Alpha 通道透明度 |
| 动画 | 支持——CSS 和 SMIL 动画 | 不支持（APNG 支持有限） |
| 可编辑性 | 基于文本的 XML——可在代码中编辑 | 二进制像素数据——需要图像编辑器 |
| 浏览器支持 | 所有现代浏览器 | 所有浏览器 |
| 无障碍访问 | 支持 title、desc 和 ARIA 属性 | 仅依赖 alt 文本 |
| 最适合 | Logo、图标、UI、插图、图表 | 带透明度的照片、截图 |
对于 Logo、图标和响应式 UI 组件，SVG 是明确的赢家：更小的文件、无限的缩放性，以及内置的动画和无障碍支持。当你需要对照片或复杂位图作品进行像素级完美还原时（尤其是需要透明度时），PNG 更胜一筹。如需三方对比（含 JPEG），请查看我们的 SVG vs PNG vs JPG 对比。
何时选择 SVG
当图形由形状、线条和纯色组成，而非照片级细节时，请选择 SVG。以下是最常见的使用场景：
- Logo 和品牌标识——一个 SVG Logo 文件在名片、广告牌和 Retina 屏幕上都完美呈现，无需生成多个分辨率的版本。了解如何将 Logo 创建为 SVG。
- 图标和 UI 元素——SVG 图标轻量、可通过 CSS 设置样式，且不依赖分辨率。一个文件即可替代整套 PNG 雪碧图。
- 插图和信息图——扁平化插图和数据可视化天然适合转化为矢量路径，保持小文件和高画质。
- 图表和示意图——SVG 图表在任何缩放级别下都清晰可辨，还可以用 JavaScript 添加交互功能。
- 响应式网页图形——SVG 能自适应任意容器尺寸，无需 media query 或 srcset 的复杂操作。
如果你有一张简单的 PNG 图形，更适合用矢量格式呈现，你可以使用 Any2SVG 在几秒钟内将 PNG 转换为 SVG。基于浏览器的描摹工具完全在你的设备上完成转换。
何时选择 PNG
当图像包含照片级细节或数千种独特颜色，无法高效地用矢量路径表示时，请选择 PNG：
- 带透明背景的照片——产品图、头像照和合成图像，既需要照片级画质又需要透明度。
- 截图和软件原型——截图包含抗锯齿文本、界面元素和渐变，这些内容描摹为 SVG 效果很差。
- 复杂的数字艺术作品——绘画、纹理和含有大量渐变的图像，保存为 PNG 比 SVG 更小且更精确。
- 像素画——按像素逐个设计的艺术作品应保持位图格式，以保留其有意为之的网格结构。
即使在这些场景下，PNG 也不一定是最终答案。如果下载速度比无损画质更重要，可以考虑 WebP 或 AVIF 作为更高效的位图替代方案。
总结
SVG 和 PNG 不是竞争对手——它们是互补的。SVG 适合一切由形状和线条构成的内容：Logo、图标、UI 元素、插图和图表。PNG 适合一切由像素构成的内容：带透明度的照片、截图和复杂的位图作品。
最简单的经验法则：如果图片需要缩放，用 SVG；如果需要捕捉照片级细节，用 PNG。如果你有一张位图图片本应是矢量格式，转换只需几次点击。