哪种格式最适合保存用于网站的图像；PNG或SVG？

当导出/保存用于网站的具有透明背景的图像时，是否应将其另存为PNG或SVG？为什么？

我想说PNG仅仅是因为它似乎比SVG更受人们接受。

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

您已将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. SVG具有多个PNG / JPEG / GIF后备，具体取决于分辨率和屏幕尺寸

   • 您可以先提供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仍未被许多大型互联网公司和浏览器完全接受。尽管SVG具有可伸缩性并且是向量，但它们通常是不必要的，占用更多空间并使网站过于复杂。

我希望能回答您的问题:)

即使SVG在全球范围内不被接受，并且某些人在缩放PNG上的时间令人沮丧，但我始终发现，在Adobe Illustrator中创建图标最适合放大或缩小“合理”的数量。