PNG和SVG的区别：什么时候用哪个？

一、本质区别：像素点阵 vs 数学路径

PNG 是位图：它把图像切成一个个像素，逐点记录颜色。放大 PNG，本质是把像素拉大，所以会出现锯齿和模糊。SVG 是矢量图：它用坐标和贝塞尔曲线等数学指令描述图形，放大时浏览器按新尺寸重新绘制一遍，因此任意缩放都清晰。这是两者一切差异的根源。

透明度方面，PNG 支持 Alpha 透明通道，可以保存透明底；SVG 天生就是透明底——只要不绘制背景矩形，图形之外就是透明的。顺带一提，JPG 不支持透明，它的白底是真实画上去的颜色。

二、文件体积与加载表现

对图标、Logo 这类简单图形，SVG 往往只有几 KB，而且一套文件适配所有屏幕密度；PNG 为了在 Retina 屏上清晰，常要准备 @2x、@3x 多套图，体积成倍增加。但对照片，情况正好相反：照片色彩过渡极其丰富，强行矢量化会生成海量路径，SVG 反而比 JPG/WEBP 大得多，得不偿失。

从压缩原理看，PNG 用无损压缩记录像素，图像越复杂体积越大；SVG 是纯文本，重复的路径指令与坐标非常利于压缩。这也是为什么同样号称无损，两者的体积表现却截然不同的原因。

使用场景	推荐格式	原因
网站图标 / Logo	SVG	一套文件适配所有分辨率，可用 CSS 改色
照片	JPG / WEBP	体积小，照片级还原
截图	PNG	像素级精确，无损压缩
数据图表	SVG	缩放清晰，可编程交互
社交平台头像	PNG / JPG	平台大多只接受位图

三、什么时候用 PNG

• 照片、复杂光影与细腻渐变的图像；
• 需要像素级精确的截图、界面快照；
• 平台只接受位图的场景，如部分后台的头像上传；
• 兼容性兜底：极老旧的环境不支持 SVG 时。

四、什么时候用 SVG

• 网站图标与 Logo：一套文件适配所有分辨率，Retina 屏依旧锐利；
• 需要用 CSS/JS 改色、做描边动画的图形；
• 数据图表：ECharts 等可视化库默认输出 SVG；
• 印刷、激光雕刻、刻字：设备识别的是矢量路径。

五、PNG 和 SVG 能互相转换吗

可以。PNG 转 SVG：用 PolySVG PNG转SVG工具 或 图片转SVG工具，上传后点击生成即可矢量化，图标、Logo 类效果很好，照片则会呈现插画化风格。转换免费，透明 PNG 的透明底也会完整保留。转换所得的 SVG 仍可进入编辑器继续改色、去背景，形成完整工作流。SVG 转 PNG：用 在线SVG编辑器 打开后导出 PNG，分辨率自定义，适合插入文档或做预览图。

需要提醒的是，PNG 转 SVG 不是简单的格式另存为，而是重新描绘轮廓的矢量化过程：图形类素材能得到干净的路径，照片则会被归纳成色块。建议转换前先在工具里预览效果，确认风格符合预期再下载采用。

一句话决策：图标、Logo、图表选 SVG；照片、截图选 PNG/JPG/WEBP。拿不准时，图形类内容优先 SVG。想深入了解，可读 SVG是什么格式 与 图片转SVG的三种方法。