SVG vs PNG：有什么区别以及何时使用它们

已发表: 2021-12-15

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

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

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

什么是 SVG？

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

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

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

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

将 png 转换为 svg
Convertio 是一个 PNG 到 SVG 的转换器。

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

放大的svg
放大的 SVG 示例。

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

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

想知道 SVG 文件与 PNG 文件有何不同？ 本指南旨在帮助点击推文

SVG 的优缺点

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

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

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

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

何时使用 SVG 而不是 PNG

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

SVG 图像特别适用于装饰性网站图形、徽标、图标、图形和图表以及其他简单图像。 请参阅我们的主页，了解一个很好的矢量艺术作品示例。

Kinsta 主页上的 svg 动画
Kinsta 主页。

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

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

如果你有详细的图像，一定要坚持使用 PNG。

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

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

什么是 PNG？

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

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

因此，如果您放大或缩小光栅图像的大小，质量会受到影响。 有时损害可以忽略不计，尤其是在按比例缩小时，有时它会使图像变得模糊且完全无法使用。

放大.png
放大的 PNG 示例。

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

PNG的优点和缺点

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

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

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

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

何时在 SVG 上使用 PNG

PNG 是最常见的文件类型是有原因的； 它用途广泛，几乎适合任何情况。 使用它时需要考虑一些缺陷，例如它们的大文件大小和缺乏可扩展性。

PNG 适用于显示详细的图像、艺术品和摄影——矢量图像无法处理的所有内容。 任何具有数百种颜色和高分辨率的东西都应该是 PNG。

这并不是说您不能将 PNG 用于更直接的图像，例如徽标和装饰图形，但 SVG 会更适合这项任务。

需要一个可以为您提供竞争优势的托管解决方案？ Kinsta 为您提供令人难以置信的速度、最先进的安全性和自动缩放功能。 查看我们的计划

当您不确定平台是否会处理更新的、受支持较少的 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 可能听起来很相似，但这两种流行的文件类型适用于特定情况。 在这里了解更多️ 点击推特

概括

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

您更有可能使用 PNG，因为它是一种更简单、更易于访问且用途更广泛的文件格式。 屏幕截图和详细插图等复杂图像应使用 PNG。

虽然 SVG 更难创建和编辑，但与 PNG 相比，它们具有多种优势。 只要适合使用矢量图像，例如装饰性图形和徽标，就一定要使用 SVG。

您不太可能将网站上的每张图片都换成 SVG，但它们的响应能力和较小的文件大小使它们成为某些情况下的理想选择。

你是 SVG 还是 PNG 帮派？ 请在下面的评论中与我们的社区分享您的观点！