SVG 还是 PNG:Logo、图标和截图该用哪种文件格式

每个设计工具在导出时都会问同一个问题:SVG 还是 PNG?在你工作的尺寸下,两者看起来一模一样,所以大家随手选了默认勾选的那个。差别要到后面才显现:在更大的屏幕上,在变慢的页面里,或者在必须更换的品牌色上。下面是同一个图标的两种格式、各自的代价,以及一张覆盖每个项目都会遇到的情况的表格。

真正的区别:路径还是像素

SVG 存的是指令:画这条曲线,用这种颜色填充。PNG 存的是一格格彩色像素,每个点一个值。就这一个差别,解释了其余的一切。

指令可以在任意尺寸下执行,所以曲线每次都会被重新画得平滑。像素网格的点数是固定的,屏幕更大就只能拉伸它们。SVG 是矢量格式,PNG 是位图格式。两者都是 W3C 的开放标准,Figma 的导出面板也把它们并排列出。

同一颗爱心,放大再放大

在正常尺寸下,两颗爱心完全一样。放大之后,它们就不再是同一个文件了。

SVG,放大后

PNG,放大后

左边的爱心按新尺寸从路径重新绘制,所以边缘依然是干净的曲线。右边的爱心是同一图标 12 x 12 像素的渲染图,用最近邻缩放放大,所以每个像素都看得见。真实屏幕会处理得柔和一些,用模糊代替方块,但原因相同:文件里从来就没有那些细节。

PNG 的解决办法是导出更大的尺寸,而这也正是它的代价。

用代码改色:一个文件,任意颜色

SVG 是文本。颜色只是一个属性,所以样式表无需重新导出就能改它。

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

悬停状态、深色模式和品牌主题,各只需一行。PNG 则要为每种颜色、每种尺寸各准备一个新文件。

文件大小:取决于图像里有什么

我们测量了上面的爱心。SVG 是 290 字节。同样视觉尺寸的 PNG 则随像素增长。

对于简单形状,SVG 保持不变,而 PNG 每多发布一种尺寸就成倍增加。换成精细图像,结果就反过来了。我们导出了一张 1200 x 800、带渐变背景和柔和阴影的卡片:PNG 为 55,365 字节,质量 80 的 JPG 为 15,248 字节,质量 80 的 WebP 为 4,970 字节。平滑的渐变和阴影包含大量色阶,SVG 要模仿它们,得靠滤镜或海量形状。

什么时候 PNG 才是对的选择

当图片不是由干净的形状构成时,PNG 才是正确之选:

• 截图。 带柔和阴影和真实文字渲染的浏览器窗口或完整应用界面,本质上就是像素。PNG 能原样保留。
• 精细插画。 细腻的纹理、颗粒和绘制的明暗,无法简化成路径。
• 不简单的透明图像。 PNG 支持透明,所以边缘柔和的抠图在任何背景上都能用。

一个提醒:由 Logo 生成的 PNG 就是一张尺寸固定的 PNG。请把 SVG 当作母版,只在某些场景无法读取 SVG 时,再从它导出 PNG。

什么时候 SVG 才是对的选择

• Logo。 一个文件同时用于网站页头、favicon 和户外广告牌。完整的格式清单(包括 PDF、AI 和 EPS)见 Logo 文件格式详解。
• 图标。 标签栏或工具栏图标集,用 CSS 按状态改色。最常用的开源图标集之一 Lucide,所有图标都以 SVG 提供。
• 简单形状和插画。 纯色形状、分隔线、徽章和图表。

SVG 的短板:包含数千个形状的文件会变重,而且邮件客户端、社交分享预览和老旧应用等一些地方可能无法显示。这些地方请用 PNG。

那照片呢?

都不适合。2026 年手机拍的照片有连续的色调,这正是矢量不擅长、PNG 体积又很大的类型。请用 JPG 或 WebP,它们压缩照片的效果远好于 PNG。当前的浏览器都支持 WebP。

SVG 或 PNG:一张决策表

常见问题

SVG 比 PNG 更好吗?

对于 Logo、图标和简单形状,是的:任何尺寸下都更锐利,通常也更小。对于截图和精细插画,PNG 是更好的格式。没有哪一个能通吃。

Logo 该用 SVG 还是 PNG?

SVG。把它当作母版文件,再为无法显示 SVG 的地方(比如某些邮件和社交工具)从它导出 PNG。

SVG 比 PNG 小吗?

简单形状是的,正如上面的爱心所示:290 字节对比 393 到 10,400 字节,取决于尺寸。精细图像则相反,因为 SVG 需要大量形状来描述它们。

能像 SVG 一样给 PNG 改色吗?

很难改得干净。SVG 的填充色是可以在 CSS 里修改的文本属性。PNG 的颜色已经烘焙进像素,换色就得重新导出。

为什么我的 PNG 放大后看起来很模糊?

PNG 保存的是固定的像素网格。当它显示得比自身尺寸大时,屏幕会拉伸这些像素,边缘就会模糊或出现方块。请导出更大的尺寸,如果图像是简单形状,就改用 SVG。

对于照片,JPG 或 WebP 比 PNG 更好吗?

是的。它们压缩照片的效果好得多,页面加载更快。PNG 留给截图、锐利的文字和图形。

来源

• Scalable Vector Graphics (SVG) 2,W3C。
• Portable Network Graphics (PNG) Specification,W3C。
• Image file type and format guide,MDN Web Docs。
• 文件大小由我们使用 sharp 实测:一个 24 x 24 的爱心路径,分别导出 SVG 和五种尺寸的 PNG;以及一张 1200 x 800 的渐变加阴影卡片,分别导出 PNG、质量 80 的 JPG 和质量 80 的 WebP。
• 最初作为轮播图发布于 UX Brainy。