这里的简单答案是两者都使用。

您已将 SVG 命名为一个选项，这意味着我们可以排除照片图形作为预期用例 - 因为 SVG 仅适用于线条艺术图形，例如徽标、图标和类似剪贴画的插图。

如果您正在考虑为照片图形选择此选项，则别无选择；PNG可能总是会更好。对于 SVG 是可行选项的图形，SVG 是带有 PNG/JPEG 后备的最佳选项。PNG 有很多优势，但在可扩展性和文件大小方面，它通常无法与 SVG 相提并论。

仅使用一种或另一种意味着您将不得不牺牲向后兼容性或渐进增强。

相互权衡，在当前时间点，PNG 肯定会得到比 SVG 更多的浏览器支持，但新发布设备的分辨率永远在增加，这意味着 PNG 要么需要基于各种不同的分辨率提供服务^{（通过媒体查询、JavaScript 或用户代理嗅探）}或由浏览器缩放，这可能会产生一些不完美的结果。

着眼于我们所知道的未来；在互联网上永远更高的分辨率、更广泛的支持和更广泛的 SVG 使用；为即将发生的事情而构建是有意义的。

一般而言，网站应建立持续多年；在 5 年内，对于 2% 仍在使用旧浏览器的互联网用户来说，你漂亮的向后兼容网站可能看起来很棒，但在具有疯狂分辨率的最新浏览器上却相当糟糕 - 所以在哪种方式上，这是一堆艰难的选择妥协。

您在 2014 年 11 月的选择

1. 仅限 PNG

   • 为了质量起见，您需要根据屏幕尺寸和分辨率提供至少五个不同的版本 - 这是一个非常保守的估计，如果您想要非常彻底，您最终可能会得到 10 到 15 个相同图像的版本. 这也需要一些时间来实现。

   • 如果您选择提供单个图形并让浏览器对其进行缩放，则结果可能会不够完美，甚至可能很难看，具体取决于缩放量。

   • 大量的媒体查询可能会不必要地使 CSS 膨胀并对页面加载速度产生负面影响。

   • 在较旧的浏览器和设备上看起来很棒，但在较新的浏览器和设备上就不那么好了。

2. 具有单个 PNG/JPEG/GIF 后备的 SVG

   • 您可以在任何地方使用 SVG，然后将其回退到不支持 SVG 的浏览器的另一种格式。主要优点是您只需要一个文件即可处理所有不同的分辨率。

   • 如果您妥协并接受用户在过时的浏览器上可以忍受不完美缩放的图形，那么您只需要 PNG、JPEG 或 GIF 格式的每个文件的另一个版本。

   • 这将花费与仅 PNG 媒体查询相似的时间来实现 - 可能甚至更少，这意味着它可能会花费相同的价格。

   • 在所有新设备上看起来都很棒，而在旧技术上做出了牺牲。

3. 具有多个 PNG/JPEG/GIF 后备的 SVG，取决于分辨率和屏幕尺寸

   • 您可以先提供 SVG，然后为不支持 SVG 的浏览器提供与分辨率相关的 PNG。这将是最彻底、最向后和向前兼容、最一致和最耗时的选项。

   • 这可能需要 1 和 2 加起来的时间，加上一些额外的时间来解决问题。

   • ^在几乎所有设备上看起来都很棒。

总之，我认为这取决于您是在寻找更多的向后兼容性还是更渐进的增强，以及您需要花费多少时间。

SVG 是可扩展的，如果您有一个明显优势的矢量图形。对于像素图形，PNG 更好。一个缺点是，Internet Explorer 仅在即将到来的版本 9 中支持 SVG（之前带有插件）。移动浏览器对 SVG 的支持也可能有限。

编辑：正如 ClemDesm 指出的那样，较旧的 IE 版本不支持完全透明的 PNG，因为支持 IE8。不透明的 PNG 可以正常工作。Computerish 的答案目前有一个很好的处理矢量图像的解决方案：将它们保留为 SVG，但将它们导出为 PNG 以供 Web 使用。我完全同意这个解决方案。

我会说 PNG 只是因为它似乎是比 SVG 更容易接受的格式。

绝对使用PNG作为网站。SVG 根本没有得到足够广泛的支持，并且对于扁平化导出，它比 PNG 几乎没有（如果有的话）显着优势。也就是说，将所有工作副本保存在 SVG 中。