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

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

核心差别：矢量 vs 位图

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

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

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

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

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

重视体积的简单图形。 比较实际 SVG 和 PNG 导出。路径复杂度、嵌入图片、尺寸与优化方式影响大小，SVG 不一定更小。

照片和复杂图像。 摄影画面包含数以百万计的色彩和连续渐变，用矢量路径来表达不切实际。用 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 倍尺寸），结果就清晰了。

来源核对日期：2026-10-30。格式能力及应用支持不等于本站输出能力，请同时查看工具当前的选项与限制。