有几十种图像文件类型，每种都根据压缩类型、格式和浏览器支持而变化。但最常用的两种格式是SVG和PNG格式。这两种文件类型的区别再大不过了——每一种都更适合特定的情况。它们当然不是在各个方面都可以互换，但您可能会发现SVG可以比标准PNG图像更好地执行特定任务。了解SVG和PNG之间的区别以及它们在您网站上的最佳应用位置。

什么是SVG？

SVG代表ScalableVectorGraphics，它是网络上使用最广泛的矢量文件格式。让我们分解一下：

矢量是用XML编写的代码片段，表示形状、线条和颜色，以详细说明其工作原理。虽然完全可以用代码创建图像，但大多数人使用矢量图形编辑器，如Inkscape或AdobeIllustrator。您还可以将PNG或其他光栅图像转换为SVG，但结果并不总是很好。

当页面加载时，此代码将转换为图形，因此您无法立即将SVG与PNG区分开来。但是因为SVG只是转换为像素的代码行，这意味着它们可以缩放到任何分辨率——无论大小——而不会损失质量。SVG还支持动画和透明度，使其成为一种通用的文件格式。

唯一的问题是它不像PNG等更标准的格式那样广泛使用，因此它在较旧的浏览器和设备上的支持较少，而且将其上传到您的站点并使其正确显示并不总是最容易的。

SVG的优缺点

尽管仍不如PNG等光栅文件类型广泛使用，但矢量图形的流行度正在迅速增长。他们完成了一些光栅图像无法完成的基本任务。这就是人们喜欢SVG的原因。

SVG在PNG上有相当多的优势，从可扩展到更小的尺寸，但并非在每种情况下都更好。这是矢量文件类型的缺点。

何时使用SVG而不是PNG

虽然您绝对不应该将所有PNG转换为SVG，但矢量图形可以很好地替代某些图像。SVG图像特别适用于装饰性网站图形、徽标、图标、图形和图表以及其他简单图像。请参阅我们的主页，了解一个很好的矢量艺术作品示例。

它们不适用于涉及许多颜色和形状的复杂图像，例如屏幕截图、摄影，甚至是详细的艺术品。虽然可以将任何图像转换为SVG，但浏览器并不总是能很好地处理具有数百种颜色的复杂矢量，因为它们必须在页面加载时呈现。此外，SVG艺术品可以很漂亮，但设计复杂的图像需要大量的时间、精力和熟练的高级编辑工具。如果您想创建矢量图像，请保持简单。

什么是PNG？

PNG代表便携式网络图形，这个名称反映在这种文件类型的广泛性上。任何使用过计算机的人都可能使用过PNG，因为它是Internet上仅次于JPEG的最常见的文件类型。

PNG是一种光栅图像文件类型，类似于最常见的图像格式。这意味着它由像素组成，即在您的显示器或屏幕上显示的相同小点。虽然这使它易于显示，但也意味着图像质量取决于分辨率——图像中有多少像素。

因此，如果您放大或缩小光栅图像的大小，质量会受到影响。有时损害可以忽略不计，尤其是在按比例缩小时，有时它会使图像变得模糊且完全无法使用。尽管如此，PNG的流行使其成为通用用途的良好候选者。此文件类型支持透明度，但不支持动画。

PNG的优点和缺点

是什么让PNG成为在线使用最广泛的图像文件格式？以下是优点：

另一方面，PNG格式是几十年前创建的，并且有几个尚未更新到现代的显着缺陷。

何时在SVG上使用PNG

PNG是最常见的文件类型是有原因的；它用途广泛，几乎适合任何情况。使用它时需要考虑一些缺陷，例如它们的大文件大小和缺乏可扩展性。PNG适用于显示详细的图像、艺术品和摄影——矢量图像无法处理的所有内容。任何具有数百种颜色和高分辨率的东西都应该是PNG。这并不是说您不能将PNG用于更直接的图像，例如徽标和装饰图形，但SVG会更适合这项任务。

当您不确定平台是否会处理更新的、受支持较少的SVG文件类型时，PNG是您的最佳选择——如果只是为了安全的话。例如，您不能将SVG上传到大多数社交媒体。由于某些电子邮件客户端可能会遇到矢量问题，因此通常建议在电子邮件模板中坚持使用PNG。一般来说，PNG可以很好地处理任何复杂的非动画图像，尤其是那些需要透明度的图像。您几乎可以在任何地方使用它；只是有时SVG会更合适。请记住，如果您的SVG无法加载，您始终可以使用PNG后备，因此即使您的大部分用户群坚持使用旧设备或浏览器，使用矢量通常也是安全的。

哪个是最好的：SVG还是PNG？

两种文件类型都不比另一种更好或更差；每个都有其局限性。尽管SVG在某些方面优于PNG，但PNG在处理某些事情方面要好得多。一般来说，您应该在适当的情况下坚持使用SVG，并在矢量无法处理的所有其他情况下使用PNG。在这些情况下，您可能在技术上可以使用其中任何一种，但SVG在某些特定领域更可取。

虽然SVG支持动画，但PNG不支持。像GIF和APNG这样的光栅文件类型可以被认为是替代品。尽管如此，仍然没有完美的动画光栅格式得到广泛支持、广为人知、质量高、文件大小小。SVG满足所有这些利基。

SVG还可以完美地缩放到任何屏幕尺寸，使其在默认情况下具有响应性和视网膜就绪。PNG在调整大小时会降低质量，并且让它们很好地缩放是一件麻烦事——尤其是当您只有在大屏幕上无法很好显示的小图像时。SVG通常比PNG小，因此尽管需要在加载时渲染，但它们对您的服务器的负担更少。将它们用于您网站上的简单、纯色艺术品、徽标和装饰图形。

另一方面，PNG适合以高分辨率显示复杂的图形，或具有数千种颜色的图片。SVG目前无法处理那么多颜色和形状。这些复杂的图像通常会构成您网站上的大部分图片，所以现在还不是扔掉PNG的时候。并且PNG在浏览器和特定平台（如电子邮件客户端）上得到更广泛的支持。如果您不确定SVG是否会正确渲染，请谨慎行事并使用PNG。

SVG和PNG是两种截然不同的文件格式。在非常小众的用例之外，在您的网站上使用PNG还是JPEG并不是什么大问题，但在SVG和PNG之间进行选择是一个更重要的选择。

您更有可能使用PNG，因为它是一种更简单、更易于访问且用途更广泛的文件格式。屏幕截图和详细插图等复杂图像应使用PNG。虽然SVG更难创建和编辑，但与PNG相比，它们具有多种优势。只要适合使用矢量图像，例如装饰性图形和徽标，就一定要使用SVG。您不太可能将网站上的每张图片都换成SVG，但它们的响应能力和较小的文件大小使它们成为某些情况下的理想选择。