SVG vs PNG：矢量与位图的差别和选择

Logo、图标、网页图形里，SVG 和 PNG 都是常客，且都支持透明背景。但它们工作原理完全不同，选错了就可能出现 Logo 模糊、文件无谓变大、或者在高分屏上发糊的问题。

核心差别：矢量 vs 位图

PNG 是位图格式。 它把图像存为固定的像素网格——一定数量的点，每个点有自己的颜色。一旦放大超过原始尺寸，就会发糊，因为没有更多像素可填充细节。

SVG 是矢量格式。 它把图像存为一组数学指令——「在这里画个圆，填这个颜色，从 A 点到 B 点画一条线」。无论缩放到什么尺寸都会重新渲染，永远清晰。

Logo。 一个公司 Logo 既要在名片上清晰，也要在网页、巨幅广告、手机屏幕上清晰——尺寸完全不同。SVG 一个文件全搞定。

图标和 UI 元素。 导航图标、按钮、界面图形几乎都更适合用 SVG。文件极小、视网膜屏和 HiDPI 屏上都锐利，还能用 CSS 调样式和颜色。

单色或渐变插画。 图表、示意图、信息图、几何插画，都是 SVG 的主场。

对体积敏感的简单图形。 一个简单的 SVG Logo 可能只有 2–5 KB，同样内容做成高分辨率 PNG 可能 50–200 KB。

照片和复杂图像。 摄影画面包含数以百万计的色彩和连续渐变，用矢量路径来表达不切实际。用 PNG（或者 JPG / WebP）。

截图。 截图天然就是按像素抓取的位图，PNG 能精确保留每一个像素。

包含半透明像素的图。 PNG 支持包括部分透明在内的完整 alpha 通道，复杂图像里用 PNG 比 SVG 自然。

SVG 不被支持时。 一些邮件客户端和老应用对 SVG 渲染不稳，PNG 是最稳的兜底方案。

有时候你需要把 SVG 转成 PNG——发邮件、给不接受 SVG 的平台、或者输出某个固定像素尺寸的 App 图标 / 社交媒体配图：

SVG 能像普通图像那样编辑吗？ SVG 文件本质是 XML 文本，可以用文本编辑器或 Figma、Illustrator、免费的 Inkscape 等矢量工具打开，也能直接用 CSS 在网页上控制样式。

网站 Logo 用 SVG 还是 PNG？ 基本上都该用 SVG。任何分辨率下都锐利，文件通常小得多，还能用 CSS 直接改颜色而不用动文件。

SVG 看着没问题，但导出的 PNG 是糊的，为什么？ SVG 转 PNG 时，输出的像素尺寸很关键。100×100 px 的导出在 2 倍视网膜屏上会显得模糊。给 100×100 的显示位置导出 200×200 px（2 倍尺寸），结果就清晰了。