SVG 将图像存储为 数学形状 可以缩放到任意大小而不会模糊，而 PNG 存储固定的像素网格。这个单一的差异决定了选择：SVG 用于徽标、图标和必须缩放的平面图形，PNG 用于照片和复杂的细节。 SVG（可缩放矢量图形）是一种基于 XML 的格式，由 W3C 于 2001 年标准化； PNG（便携式网络图形）是 1996 年推出的一种栅格格式。此比较解释了矢量与栅格、每种格式如何处理缩放和文件大小、透明度、编辑、浏览器支持以及使用位置的明确规则。

总体而言，这两种格式都不是更好，因为它们解决了不同的问题。 SVG 对于以多种尺寸出现的图形来说是无与伦比的； PNG 是照片和详细图像的唯一明智选择。在打开转换器之前就知道您的图像属于哪个系列就可以回答这个问题。

矢量与光栅

这两种格式以相反的方式描述图像。 SVG 列出了一些指令，例如在此处画一个圆，用该颜色填充该路径，以便浏览器以任何尺寸呈现它。 PNG存储实际颜色 每个像素 在网格中，就像马赛克一样。矢量适合边缘干净的形状；光栅适合照片，其中数百万个独特的像素没有形状可描述。这是它们之间所有实际差异的根源。

一个类比会有所帮助。向量就是一个菜谱：在任何规模上遵循它，你都会得到同样的菜。光栅是成品盘子的照片：将其放大，您只会看到更大、更模糊的像素。配方在任何尺寸下都保持完美；照片没有。

缩放：SVG 获胜

缩放是SVG 的决定性优势。 SVG 徽标保留 从 16 像素网站图标到广告牌，锐利无比，因为数学会在每个尺寸下重新计算。当您将 PNG 放大到超过其分辨率时，它就会变得模糊，因为软件必须发明从未捕获过的像素。对于以多种尺寸显示的任何内容，SVG 提供一个文件，而 PNG 需要以不同的分辨率导出多个文件。

这比听起来更重要。现代屏幕多种多样，从小手机到大型 4K 显示器，设计必须在所有屏幕上看起来清晰。 SVG 处理单个文件中的每个屏幕。 PNG 需要小版本、大版本，通常还需要视网膜版本，这会成倍增加您管理的资源。

文件大小

文件大小取决于复杂性，而不是尺寸，这与 PNG 相反。 SVG 可以衡量的简单双色徽标 几千字节 并在任何比例下保持该尺寸，通常小于 PNG。但 SVG 的大小会随着形状数量的增加而增加，因此描画的照片会比 PNG 大很多倍，并且渲染速度会很慢。 PNG 尺寸随着像素数的增加而增加，因此无论如何，大照片都很重。

本课的目的是使格式与内容相匹配。对于平面图标来说，SVG 更小并且可以无限扩展。对于详细的照片，SVG 会膨胀成数千条路径，而 PNG 则保持可预测的大小。决定权重的是复杂性，而不是格式名称。

透明度

两种格式都支持透明度，因此两者都没有获胜。 SVG 本身可以处理它，因为形状后面可以没有填充，而 PNG 带有 全阿尔法通道 实现平滑、部分透明。无论哪种格式，徽标在任何背景上都保持透明。区别仅在于 SVG 的透明度是其形状描述的一部分，而 PNG 为每个像素存储一个不透明度值。

编辑和灵活性

图形编辑更倾向于 SVG。因为 SVG 是描述形状的文本，所以它的路径 使用 CSS 重新着色和制作动画，并且其中的任何文本都是屏幕阅读器可以阅读并且搜索引擎可以索引的真实文本。 PNG 是固定像素，因此更改颜色意味着从源重新导出。对于要重新设计样式、主题或动画的徽标，SVG 更加灵活。

浏览器支持

两者的支持都是普遍的，因此它并不决定选择。每个浏览器都可以在没有插件的情况下读取 SVG 和 PNG，而且这两种浏览器都已经使用了很多年。实际的区别在于上下文：SVG 属于网页和应用程序界面，而 PNG 也适用于电子邮件、文档和可能不接受 SVG 的旧软件。对于网站来说，要么是安全的，要么是安全的。对于电子邮件徽标，PNG 是更可靠的选择。

何时使用每个

规则很简单，值得记住：

使用SVG 适用于必须缩放并保持清晰的徽标、图标、图表、图表和线条艺术。
使用PNG 用于屏幕截图、详细图形以及任何具有柔和边缘或多种颜色的图像。
两者都不用于照片 从长远来看：JPG 或 WebP 压缩的照片远小于 PNG。

保留品牌资产的主矢量文件，并在不接受 SVG 的情况下导出 PNG 副本，例如电子邮件或某些应用程序上传。

SVG 和响应式设计

响应式设计是 SVG 赖以生存的地方。现代网站必须在手机、笔记本电脑和 4K 显示器上看起来清晰，而 SVG 可以处理所有这三者 任意像素密度的一个文件。不需要单独的小、大和视网膜导出，并且当浏览器将图像放大到高分辨率屏幕时也不会出现模糊。该矢量只是以布局所需的任何尺寸重新清晰地重新绘制自己。

PNG 无法与此匹配。为了在视网膜显示屏上保持清晰，PNG 必须以双倍分辨率导出，这会使其文件大小加倍，即使如此，如果拉伸超过该分辨率，它也会变得模糊。管理响应式布局的多个 PNG 尺寸是单个 SVG 消除的真正维护成本。

当 PNG 在实践中击败 SVG 时

巴布亚新几内亚赢得的案件比其声誉所暗示的要多。任何图像 摄影细节、渐变、纹理或柔和阴影 属于 PNG，因为将其追踪到 SVG 会产生臃肿、丑陋的混乱。屏幕截图属于 PNG 领域，因为它们将文本与未矢量化的界面细节混合在一起。与包含数千条路径的巨型 SVG 相比，具有数百种颜色的复杂插图作为 PNG 更小、更清晰。

人们犯的错误是假设 SVG 始终是现代的、优越的选择。它只适用于平面、硬边图形。将详细图像推入 SVG 中，您会得到一个较大的文件，该文件渲染缓慢，与您想要的相反。

关于 SVG 和安全性的说明

SVG 具有 PNG 所没有的考虑：因为它是代码，是 SVG 文件 可以包含脚本。理论上，上传到网站的恶意 SVG 在显示时可以运行 JavaScript。这就是为什么许多平台会清理或拒绝用户上传的 SVG，以及为什么您应该只信任来自已知来源的 SVG。 PNG 是纯像素数据，不存在此类风险。对于您自己的徽标和图标来说，这不是问题，但它解释了为什么某些上传表单接受 PNG 而不是 SVG。

转换为 SVG 时的常见错误

两个错误会破坏大多数 PNG 到 SVG 的转换。第一个是 尝试对照片进行矢量化，它会生成数千个路径和一个比原始文件更大的文件。第二种是在自动跟踪后将原始位图嵌入到 SVG 中，因此该文件实际上是 SVG 包装器中的 PNG，没有任何收获。仅跟踪平面图形，对于品牌徽标，请在矢量编辑器中重新绘制它，而不是信任自动跟踪，这会提供干净的几何图形和最小的文件。

如何将 PNG 转换为 SVG

将 PNG 转换为 SVG 意味着矢量化：将像素追踪到路径中。这适用于 平面徽标、图标和线条艺术，并且对于没有清晰形状可追踪的照片来说失败。我们的 PNG 到 SVG 转换器在浏览器中跟踪简单的图形，因此不会上传任何内容。对于您拥有的品牌徽标，在矢量编辑器中重新绘制它会产生比任何自动跟踪更清晰的结果。对于照片，请使用我们的 PNG 到 JPG 转换器相反。

常见问题

SVG 适合响应式设计吗？

是的，理想。 一个 SVG 在每个屏幕和像素密度上都保持清晰，无需单独导出小型、大型和视网膜 PNG。

为什么有些网站拒绝 SVG 上传？

因为 SVG 可以包含脚本，与 PNG 不同。为了安全起见，平台会清理或阻止用户 SVG，这就是为什么某些表单仅接受 PNG 的原因。

为什么我转换后的 SVG 比 PNG 大？

你可能 描出照片或保留嵌入的位图。仅矢量化平面图形，并在跟踪后删除原始图像，以便 SVG 保存路径，而不是像素。

SVG 比 PNG 更好吗？

对于图形来说，是的。 SVG 在很小的尺寸下可以缩放而不会模糊。对于照片来说，PNG 胜出，因为照片没有干净的形状可以存储为矢量。

SVG 和 PNG 有什么区别？

SVG 是 可扩展的数学； PNG 是固定的像素网格。 SVG 在任何尺寸下都保持清晰，而 PNG 在放大超过其分辨率时会变得模糊。

我可以将 SVG 用于照片吗？

不，没有用。 照片有数百万种颜色和柔和的边缘 由于没有可追踪的形状，因此 SVG 照片又大又乱。使用 PNG 或 JPG。

SVG 和 PNG 哪个更小？

对于简单图形，SVG。 双色徽标与 SVG 一样只有几千字节 任何尺寸。对于照片，PNG 较小，因为有追踪照片气球。

SVG 是否保持透明度？

是的。 SVG 本身支持透明度，就像 PNG 的 Alpha 通道一样，因此徽标在任何背景上都保持透明。

所有浏览器都支持 SVG 吗？

是的。 每个现代浏览器都可以读取 SVG 和 PNG 没有插件。 SVG 适合网页，而 PNG 也适用于电子邮件和旧软件。

如何将 PNG 转换为 SVG？

追踪它。 矢量化器将平面 PNG 追踪到 SVG 路径，适用于徽标和图标，但不适用于照片。

创建 SVG 后可以对其进行编辑吗？

是的。 SVG 路径在任何矢量编辑器中打开 并使用 CSS 重新着色或制作动画，因为该文件是描述形状的文本，而不是固定像素。

我应该使用哪种格式的网站徽标？

SVG。 它可以在一个文件的每个屏幕上锐利缩放，并且其文本对搜索引擎保持可读。为不接受 SVG 的电子邮件保留 PNG。

对于图标来说，PNG 还是 SVG 更好？

SVG，用于缩放。 SVG 图标在任何尺寸下都保持清晰，而 PNG 图标需要多次导出，放大后会变得模糊。

SVG 和 PNG 解决不同的问题：SVG 存储可扩展的数学，在任何尺寸下都保持清晰，而 PNG 存储固定的像素网格，放大时会模糊。 SVG 在徽标、图标和线条艺术方面胜出，这些徽标、图标和线条艺术必须使用 CSS 进行缩放、编辑和动画，并通过一个文件为每个屏幕提供服务。 PNG 在照片、屏幕截图和详细图像方面胜出，并且适用于不接受 SVG 的情况。将格式与内容相匹配，并使用上面的转换器对简单图形进行矢量化或处理光栅照片，所有这些都可以在您的浏览器中完成。

快速参考：SVG 或 PNG

伸手去拿 静止无功发生器 当图像是必须缩放的徽标、图标、图表或线条图时，当您想要使用 CSS 对其进行重新着色或设置动画时，或者当一个文件应服务于每种屏幕尺寸时。伸手去拿 巴布亚新几内亚 当图像是屏幕截图、详细图形或任何具有渐变、纹理或软边缘的图像时，以及当您需要它在电子邮件或拒绝 SVG 的旧软件中工作时。分界线很简单：平面、硬边图形变成矢量，所有细节变成光栅。

保持矢量大师

对于任何品牌资产，请将原始资产保留为矢量母版，并根据需要导出光栅副本。单个 SVG 徽标可以生成网站图标、社交头像和打印文件，每个文件都可以根据需要导出为正确的格式和大小。以另一种方式工作，从光栅 PNG 回到矢量，意味着跟踪，这永远不会完全恢复干净的几何图形。因此，尽可能将母版存储为 SVG，并将 PNG 导出视为可随时重新生成的一次性副本。

底线

SVG 和 PNG 与其说是竞争对手，不如说是专家。矢量永远描述形状和比例，因此徽标和图标属于 SVG。像素捕获细节，因此照片和屏幕截图属于 PNG。通过问一个问题来进行选择：这张图像是否具有干净、平坦的形状或精美的摄影细节？这个答案决定了每次的格式，而保留矢量母版意味着您始终可以导出所需的光栅副本。