SVG与PNG有何区别及应何时使用它们

有几十种图像文件类型，每一种都因压缩类型、格式和浏览器支持而异。但最常用的两种格式是SVG和PNG格式。

这两种文件类型完全不同——每一种都更适合特定情况。它们当然不是在每个方面都可以互换的，但是您可能会发现SVG可以比标准的PNG图像更好地执行特定任务。

了解SVG和PNG之间的区别以及它们在您网站上的最佳应用。

1. 什么是SVG？
2. 什么是 PNG？
3. 哪个更好：SVG还是PNG？

什么是SVG？

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

• 可扩展： SVG可以在不损害图像质量的情况下向上或向下调整大小。无论大小，它都会非常清晰和清晰。
• 矢量：大多数图像文件类型都包含像素。矢量本质上是实时渲染图像的代码片段，将其转换为您在屏幕上看到的像素。虽然它们显示相同的图像，但背景中发生的事情却大不相同。
• 图形：虽然可能不太为人所知，但SVG是一种图像文件类型，如PNG、JPEG或GIF。它只是处理事情有点不同。

矢量是用XML编写的代码片段，用于表示形状、线条和颜色，以详细说明其工作原理。

虽然只用代码创建图像是完全可能的，但大多数人使用矢量图形编辑器，如Inkscape或Adob​​e Illustrator。您还可以将PNG或其他光栅图像转换为SVG，但结果并不总是很好。

Convertio是一个PNG到SVG转换器。

当页面加载时，此代码会转换为图形，因此您无法立即将SVG与PNG区分开来。但是因为SVG只是转换为像素的代码行，这意味着它们可以缩放到任何分辨率——无论大小——而不会降低质量。

放大的SVG示例。

SVG还支持动画和透明度，使其成为一种通用的文件格式。

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

SVG的优缺点

虽然仍然没有像PNG这样的光栅文件类型那样广泛使用，但矢量图形正在迅速流行。它们可以完成一些光栅图像无法完成的基本任务。这就是人们喜欢SVG的原因。

• SVG图像是可缩放的。您可以以任何分辨率设计它，并且它可以放大或缩小尺寸而不会损坏质量或变得像素化。对于光栅图像，您需要从一开始就知道您想要什么尺寸，否则您可能会冒使图像过大或过小的风险。
• 由于从未经历过质量损失，SVG始终看起来清晰漂亮。即使稍微调整大小，光栅图像也会开始看起来模糊。
• 由于SVG只是代码，它们的文件大小很小并且经过了良好的优化。还存在SVG优化器，使它们更易于管理。如果您改用它们，您的网站可能会加载得更快一些。
• 与 PNG 不同，SVG 支持动画。

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

• 虽然SVG受到所有主要现代浏览器的支持，但在旧浏览器和设备上呈现它们时可能会遇到兼容性问题。如果您的大量访问者使用这些，切换可能是一个坏主意。
• SVG更难使用，需要特殊的程序来创建和编辑。虽然您可以只用XML设计它们，但这并不总是可行的。Adobe Illustrator等高级工具可能很昂贵。
• SVG不像PNG那样容易嵌入。如果您使用的是WordPress，则默认媒体库不支持它，因此您根本需要一个插件来上传它们。
• SVG必须在页面加载时由浏览器呈现，因此使用过多的SVG或包含许多矢量的大文件会给设备带来负担。

何时才考虑将PNG转换为SVG

虽然您绝对不应该将所有PNG转换为SVG，但矢量图形可以很好地替代某些图像。

SVG图像特别适用于装饰性网站图形、Logo、图标、图形和图表以及其他简单图像。

应用SVG的网站

但是，它们不适用于涉及多种颜色和形状的复杂图像，例如屏幕截图、摄影，甚至是详细的艺术品。虽然可以将任何图像转换为SVG，但浏览器并不总是能很好地处理具有数百种颜色的复杂矢量，因为它们必须在页面加载时呈现。

此外，SVG艺术作品可以很漂亮，但设计复杂的图像需要大量的时间、精力和对高级编辑工具的熟练程度。如果您想创建矢量图像，请保持简单。

如果您有详细的图像，请务必坚持使用PNG。

然而，SVG更适合响应式和视网膜就绪的网页设计，因为它们的可扩展性和质量不会下降。此外，它们支持动画而PNG不支持，支持动画的光栅文件类型（如GIF、APNG和WebP）都有其问题。

对于可能需要动画并保证在任何屏幕尺寸上都能很好缩放的简单图形，请使用SVG。

什么是PNG？

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

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

因此，如果您按比例放大或缩小光栅图像，质量将受到影响。有时损坏可以忽略不计，特别是在缩小时，有时它会使图像模糊并完全无法使用。

放大的PNG示例

尽管如此，PNG的流行使其成为通用用途的理想选择。此文件类型支持透明度，但不支持动画。

PNG的优缺点

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

• PNG文件可轻松编辑并在任何常见的图像编辑工具中打开。无需为创建或更改 PNG 图像的高级程序付费；最多，您可能需要下载像GIMP这样的免费编辑器。
• 无论您是从头开始编码还是使用WordPress媒体管理器，在您的网站上显示PNG图像都是一项简单的任务。
• PNG使用无损压缩，使其看起来比有损压缩JPEG更清晰。但是，这确实会带来更大的文件大小成本，并且无法与矢量图像相比。

另一方面，PNG格式是在几十年前创建的，并且有几个显着的缺陷，这些缺陷在现代还没有更新。

• 您无法在不降低质量的情况下调整PNG文件的大小。在设计光栅图形时需要仔细计划并确保它的大小正确，否则最终可能会浪费时间制作无法使用的图像。
• 由于其无损压缩，PNG非常大。因此，他们可以减慢您的网站速度。解决这个问题需要进一步压缩它并破坏质量。
• 使图像“视网膜就绪”对于PNG来说更加乏味，并且更容易导致模糊。
• PNG不支持动画。其他动画光栅文件类型（如GIF）可能存在严重问题；例如，GIF质量极低，仅支持256色。

何时使用PNG而不是SVG

出于某种原因，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，但它们的响应能力和较小的文件大小使它们在​​某些情况下成为不错的选择。