概述
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
常见问题
我应该为我的徽标使用 SVG 还是 PNG？
使用 SVG。它可以无损缩放到任何大小，文件更小，并且可以使用 CSS 进行样式化。
我可以将 PNG 转换为 SVG 吗？
简单的徽标可以很好地转换为 SVG。复杂的摄影图像无法有意义地转换为 SVG。
WebP 比 PNG 更适合徽标吗？
WebP-无损比 PNG 小 25-35%。对于徽标，如果存在矢量源，SVG 比两者都更好。
为什么有些网站仍然使用 PNG 而不是 SVG？
SVG 需要一个矢量源文件。如果徽标仅以光栅 PNG 存在，转换为 SVG 会产生较差的结果。
SVG 支持渐变和阴影吗？
是的 - SVG 支持渐变、阴影、滤镜、蒙版和许多其他视觉效果。