概述
PNG 是需要透明度的图形的传统格式。WebP 是具有更好压缩的现代替代方案。SVG 是一种矢量格式，可以无限缩放而不会损失质量。
对于徽标和图标，SVG 几乎总是正确的选择。对于复杂的光栅图形，PNG 和 WebP 更好。
正面比较
可扩展性
PNG: PNG 是光栅 - 放大时会导致像素化。您需要为每个分辨率提供单独的文件。
WebP: WebP 也是光栅 - 与 PNG 相同的缩放限制。
Winner: SVG（无限缩放，无质量损失）
文件大小
PNG: PNG 是无损的，文件较大。一个复杂的徽标可能为 50-200KB。
WebP: WebP-无损比 PNG 小 25-35%。相同的徽标可能为 35-150KB。
Winner: SVG（通常仅为 1-20KB）
透明度
PNG: PNG 完全支持 alpha 通道透明度。
WebP: WebP 完全支持 alpha 通道透明度，并且压缩效果优于 PNG。
Winner: SVG / WebP
动画
PNG: PNG 支持带有完全透明度的动画 APNG 格式。
WebP: WebP 支持动画，文件大小比动画 GIF 或 APNG 更小。
Winner: SVG（CSS/JS 动画）
浏览器支持
PNG: PNG 在 100% 的浏览器和设备中得到支持。
WebP: WebP 在 97% 以上的浏览器中得到支持。
Winner: PNG
两种光栅格式和一种矢量格式
PNG和WebP都是存储像素网格的光栅格式,而SVG是用数学方式描述形状的矢量格式。PNG使用DEFLATE和预测滤波器进行无损压缩,并支持完整的alpha通道。[1][2]WebP使用基于VP8的预测,同时支持有损和无损模式以及透明度,通常对于相同的图像能生成比PNG更小的文件。[3][4]SVG存储XML绘图指令而非像素,因此没有固定分辨率。[5]
分辨率和缩放
SVG可以以完美的清晰度缩放到任何尺寸,因为形状在渲染时被重新计算,这使其成为徽标和图标的理想选择,但它无法有效地表现摄影细节。[6]PNG和WebP有固定的像素尺寸,超过这些尺寸放大时会出现质量下降。因此选择这两种光栅格式还是SVG首先取决于图稿是可缩放图形还是固定分辨率图像。
文件大小和压缩
对于基于像素的图稿,WebP的现代编码通常在保持透明度的同时在文件大小上优于PNG,而PNG保证完全无损的像素和最广泛的兼容性。[4][2]SVG的大小取决于形状的数量而非显示尺寸,所以一个简单的图标在任何比例下都保持很小;然而一个有数千条路径的复杂插图可能会超过等效光栅图像的大小。[5]
可编辑性和标准化
因为SVG是基于文本的XML,它可以在代码编辑器中编辑、用CSS样式化、动画化和搜索;PNG和WebP是不透明的像素数组,只能作为图像进行编辑。[5]PNG由W3C和IETF(RFC 2083)以及ISO/IEC 15948定义;WebP由IETF RFC 9649定义;SVG由W3C定义。[1][2][3]所有三种格式都受当前主要浏览器支持。
Applications
SVG用于分辨率无关的图形、徽标、图表和图标,可以用CSS进行样式化和动画化。[5]WebP用于在网络上传送需要小文件的摄影或详细光栅图像。PNG用于保证无损再现、透明度和通用支持比文件大小更重要的情况。[1]
参考资料
常见问题
我应该为我的徽标使用 SVG 还是 PNG？
使用 SVG。它可以无损缩放到任何大小，文件更小，并且可以使用 CSS 进行样式化。
我可以将 PNG 转换为 SVG 吗？
简单的徽标可以很好地转换为 SVG。复杂的摄影图像无法有意义地转换为 SVG。
WebP 比 PNG 更适合徽标吗？
WebP-无损比 PNG 小 25-35%。对于徽标，如果存在矢量源，SVG 比两者都更好。
为什么有些网站仍然使用 PNG 而不是 SVG？
SVG 需要一个矢量源文件。如果徽标仅以光栅 PNG 存在，转换为 SVG 会产生较差的结果。
SVG 支持渐变和阴影吗？
是的 - SVG 支持渐变、阴影、滤镜、蒙版和许多其他视觉效果。