如何从 PNG 转换为 SVG

在质量图像和站点速度之间找到适当的平衡对于用户体验 (UX) 至关重要。 您可能希望访问者欣赏高质量的照片。 尽管如此，您也不希望您的 Core Web Vitals 受到影响。

SVG 格式使用矢量而不是 PNG 和 JPEG 等光栅图形来创建图像。 因为它有角度而不是像素，所以 SVG 图像可以缩放到任何大小而不会看起来模糊。 使用这种格式是一种很好的方式，可以为您的访问者保持出色的图像质量，而不管他们的设备是什么，而且文件不会很大。

在本文中，我们将比较常见的图像格式并讨论为什么您应该考虑为您的网站使用 SVG 图像。 此外，我们还将向您展示将 PNG 图像转换为 SVG 文件的最佳方式。 让我们开始吧！

什么是 PNG 文件？

您之前可能听说过 PNG 图像，但它与 JPEG 或其他图像类型有何不同？ PNG 格式专门用于将图像传输到互联网，同时保持图像质量。

PNG 或便携式网络图形。 与 JPEG 一样，PNG 图像使用光栅图形。 简而言之，这是一个定义为创建图像的像素网格：

图片来源：Pinterest

光栅图形的固有问题之一是当您放大它们时它们会失去质量。 原因是像素在数学上增加并且经常被迫四舍五入，这导致它们看起来模糊。 不幸的是，低质量的图像会影响您网站的用户体验甚至搜索引擎优化 (SEO)。

PNG 图像的主要优点是您可以从压缩格式重建它们而不会损失保真度。 这种特性使它们成为网站的常见选择。

默认情况下，大多数图像查看器还支持 PNG 格式。 但是，它们的文件大小往往大于 JPEG 文件。

什么是 SVG 文件？

SVG 代表可缩放矢量图形。 这种图像格式不如 PNG 或 JPEG 常见，但它有一些显着的优势。

SVG 文件利用矢量（本质上是角度和距离）来创建图像。 这种格式不同于使用彩色像素网格的光栅图形。 SVG 转换器将采用像素网格并将其转换为 SVG 矢量以供不同用途。

这种区别很重要，因为它改变了计算机处理图像的方式。 SVG 图像的主要优势在于它们可以在不损失质量的情况下进行缩放。 这意味着您可以放大或调整图像大小而不会丢失任何分辨率或导致任何模糊。

由于尺寸改变时角度不会改变，因此 SVG 图像在微型手机上和在巨大的电视屏幕上一样清晰。 这种质量对于使您的网站在移动设备上响应非常有利，甚至可以改善您的搜索引擎优化。

PNG 和 SVG 有什么区别？

PNG 图像是光栅图形（像素），而 SVG 使用矢量。 这些文件格式之间还有一些关键差异。 让我们来看看！

支持

与 JPEG 格式一样，PNG 格式非常普遍，大多数程序都默认支持它。 因此，PNG 是图像质量比文件大小更重要的应用程序的常见选择。 因此，您可能会在摄影或视频作品集网站上看到 PNG 图像。

虽然 SVG 文件格式选项可以在基于矢量的图形编辑器（例如 Adob​​e Illustrator）中找到，但其他程序可能不支持它。 特别是对于某些电子邮件平台等较旧或较简单的应用程序，可能不支持或识别矢量图形。 因此，SVG 可能不适合您的电子邮件营销信息。

展示

与使用光栅图形在网格上显示彩色像素的 PNG 格式相比，另一方面，SVG 格式使用矢量来定义图像中不同图形元素的边界。

因此，当您放大或调整 PNG 图像大小时，它们会失去保真度。 它们可能不适合用于让客户更仔细地查看您的电子商务项目的产品图片。 但是，SVG 照片永远不会因为调整大小而失去清晰度。

文件大小

文件大小通常会决定您在哪里决定是使用 PNG 还是 SVG 图像。 但是，这两种格式在每个用例中都不是天生就更好。

对于较小或质量较低的图像，PNG 格式通常就足够了，更易于使用，并且文件大小合理。 如果图形不是您网站的主要焦点，那么如果您压缩和优化它们，通常可以不用使用 PNG。

对于基于矢量图的图形，较小的图像仍然可以包含多个角度和元素，从而使文件更大。 事实上，SVG 文件的尺寸并不重要，因为您可以无限地调整它们的大小。

随着 PNG 图像尺寸和质量的增加，文件大小也会增加。 但是，尺寸对 SVG 图像文件大小的影响较小。 这使得 SVG 文件成为大多数人更有效的选择。

换句话说，随着图像大小和质量的提高，SVG 格式将取代 PNG 格式成为更好的选择。 如果您的网站侧重于大型、高质量的照片，SVG 可能是理想的格式。

为什么我可能需要将 PNG 格式转换为 SVG 格式？

SVG 图形在用户可能会放大图像、在不同屏幕上查看图像或调整图像大小的网站上以较小的文件大小提供一致的清晰度。 因此，访问者不必因模糊或小屏幕而费力查看图像：

图片来源：维基共享资源

SVG 格式常用于图形设计和印刷，以确保各种场景下的图像质量。 虽然这种格式不如 PNG 和 JPEG 广泛使用，但您会在矢量图形编辑器（例如 Adob​​e Illustrator）中找到它。

如果您的网站或营销材料上的图像质量必须保持一致，SVG 是一个不错的选择。 总的来说，您可以使用更少的服务器资源在您的网站上托管更高质量的图像，并且对网站性能的影响更小。

如何从 PNG 转换为 SVG？ (3种方法)

Adobe Illustrator 专为编辑矢量图形而设计。 但是，此软件可能比您需要的更复杂。

将 PNG 转换为 SVG 文件绝对可以节省您的时间并减小高质量图像的文件大小。 这里有一些免费且简单的在线解决方案，可将 PNG 图像快速转换为 SVG 文件格式！

1. Adob​​e Express

我们已经提到 Adob​​e Illustrator 作为市场上最流行的矢量图形编辑器之一。 但是，Adobe 有一个更简单的将图像转换为矢量格式的解决方案。

Adobe Express 是一个免费的在线 Web 应用程序，它使用与 Adob​​e Illustrator 相同的技术将 JPEG 和 PNG 文件转换为 SVG。 Adobe Express 是一个很好的选择，因为它来自一家信誉良好的公司，并且具有其他有用的功能。 除了转换图像之外，您还可以使用 Adob​​e Express 添加或删除背景、应用滤镜，甚至创建动画。

要使用 Adob​​e Express 转换器，只需单击上传您的照片按钮即可开始：

这会将您带到转换屏幕，您可以在其中拖放图像或从设备上传文件。 当您的图像转换为矢量时，该过程将自动开始：

这个过程只需要几秒钟。 但是，免费版 Adob​​e Express 的文件大小限制仅为 10MB，这对于更高质量的图像来说可能不够。

2.自由转换

一个不太强大但同样简单的解决方案是 FreeConvert。 该网站提供的图像编辑工具较少，专注于转换和压缩不同格式的图像和其他媒体。 但是，FreeConvert 最多可以处理 1GB 的文件大小，这对于大多数情况来说应该绰绰有余：

要将 PNG 转换为 SVG，您只需将图像拖到界面上或从您的设备上传。 上传图像后，选择SVG作为输出，然后单击“转换”按钮：

该过程需要几秒钟来上传和转换文件。 该过程完成后，您可以下载新格式化的图像。

3.转换

Convertio 的工作原理与 FreeConvert 类似。 此外，它还提供各种格式化工具。 其中包括图像、音频、视频和文档转换器。 免费版的文件大小限制为 100MB，对于大多数中小型项目来说应该足够了。

您可以使用为预选转换路径提供的链接或上传您的图像并选择所需的输出：

单击“转换”按钮后，该过程会自动开始并更新状态。 完成后，选择“下载”按钮以接收新的 SVG！

结论

既然您知道如何将 PNG 格式转换为 SVG 格式，您就不必再担心低质量的图像。 基于矢量的图形可以在不损失分辨率的情况下调整大小、缩放和拉伸。

要将 PNG 文件转换为 SVG，请使用以下最佳选项之一：

1. Adobe Express ：来自一家知名公司的强大解决方案，由 Adob​​e Illustrator 中使用的相同技术提供支持。
2. FreeConvert ：一个易于使用的 Web 应用程序，可以转换最大 1GB 的各种图像文件。
3. Convertio ：另一个易于使用的网络应用程序，可以转换和压缩最大 100MB 的各种文件类型。

选择图像格式只是优化网站性能的一部分。 您选择的 WordPress 托管服务提供商也会影响您的加载速度。 在 WP Engine，我们提供以性能为中心的功能，例如可扩展的服务器架构、全球数据中心、免费的内容交付网络 (CDN) 等等！