svg 文件大小大于 png 图像

平面设计 svg PNG 文件大小
2022-02-11 16:12:43

我有两个尺寸相同的文件,我想将我的矢量文件保存到 web SVG。问题是这个文件大小不仅仅是为 web 生成相同的 PNG 文件。

我认为我正在正确导出 SVG 的设置。

在此处输入图像描述

PNG文件具有以下尺寸:700x500px: 在此处输入图像描述

SVG 文件具有相似的尺寸:755,245x485,663px: 在此处输入图像描述

我正在使用此设置保存 SVG 文件(仅限西班牙语,抱歉): 在此处输入图像描述

为什么 SVG 文件大小大于 PNG 文件大小?

PNG文件的链接:https ://www.dropbox.com/s/wmncderyprnablk/sample.png?dl=0

链接到 SVG 文件:https ://www.dropbox.com/s/bfp5mpjgyuwibf7/sample.svg?dl=0

4个回答

您可以发布原始 SVG 图像并在此处链接吗?真的,您似乎在 SVG 中做的一切都是正确的,您的所有形状都有锚点。

PNG不一定比SVG大!

也可能是 PNG 导出文件的文件大小实际上比 SVG 小。它真的不是那么罕见!

这里的例子-> https://en.wikipedia.org/wiki/File:India-locator-map-blank.svg

SVG 文件= 421KB

PNG 文件= 51 KB

SVG 文件大小取决于路径/点。

当路径/锚点的数量增加时,存储它们的数学信息也会增加!在这些情况下,文件的位图版本可能更适合较小的文件大小。

例如,尝试实时跟踪照片并将其导出为 JPEG,然后导出为 SVG。SVG 将远远大于 JPEG。

话说回来...

确保您的 SVG 中没有位图,并且复杂路径的大小已减小。如果您可以链接原始文件,并且导出选项存在问题,我将编辑此答案。

编辑

看了你的文件后,

这确实是一个复杂的 SVG 指令的例子。通过查看形状及其性质,您似乎使用了 Adob​​e Illustrator 的实时跟踪来创建这些矢量。实时跟踪可能效率低下,调整控件可以提供更好的结果。

r例如:比较您的一个徽标中的锚点和r我自己制作的锚点。

锚点模式

虽然字体不一样,但你可以比上面的需要构建的锚点数量要少得多。

也有某些角色在真正放大时会出现曲折的线条,而实际上它们应该是笔直的!

如果你想减小文件大小

您有 2 个选项:

  1. 浏览整个文档,删除您不需要的锚点并修改您所做的锚点,以便您可以删除其他点。

  2. 重新矢量化您使用的位图。手动跟踪它(推荐)或调整实时跟踪选项。

当然,您可以使用 PNG :)

哼。大小是相对的。您实际上并没有与 png 大小相同的 SVG 文件。实际上,您有一个在此特定条件下与 PNG 的尺寸相匹配的矢量文件。

检查这个图表。

您可以使您的 SVG 尺寸变小或变大。如果数据相同,则文件大小(重量)相同。

如果它很小,您可以导出 png(或任何位图文件格式)。如果不是,文件会更大。

可能比例不是线性的,但这是基本思想。

因此,如果优先考虑文件重量,那么在某些尺寸上,PNG 会更好,但在某些时候,SVG 可能是更好的选择。

除了文件大小之外,在文件格式选择中还需要考虑另一个因素。

SVG图形处理器必须计算 SVG 文件的路径。路径越多,需要的计算能力就越大。

另一方面,位图取决于文件大小。大多数屏幕图像已经是位图(每个像素分配到的颜色的映射)SVG 文件必须转换为位图数据。

权衡

所以,还有一个进一步的权衡……大简单的 SVG 文件比即使是相对较小的 Bitmpas 文件效率更高,但是以 SVG 文件表示的复杂矢量艺术将在客户端占用大量计算能力……

请记住这一点。选择图像清晰(品牌)和文件相对简单的 SVG 图像。

您在问题中显示的多个徽标的图像非常复杂。PNG/位图格式不仅文件大小更小,而且加载速度更快、更一致。

SVG 是一种出色的格式——但它并不是对每张图像都是最好的——它们更适合具有硬边的较大且不太复杂的元素。

SVG 文件比 PNG 文件大一点也不奇怪。让我们看看格式的特点。

  • PNG是:
    • 二进制格式。
    • PNG使用运行长度压缩进行压缩
  • SVG是:
    • 一种文本格式
    • XML 标记
    • 可以压缩也可以不压缩 (SVGZ)

即使是一个非常简单的 SVG 文件也因为它的构造方式而变得非常大。实际上,您可能应该将 SVGZ 文件的大小与 PNG 进行比较,以获得更多的苹果对苹果的压缩。

如果将 PNG 文件构建为 SVG 文件,它将比大多数未压缩的图像格式大得多。一种颜色在文本格式中至少有 4-7 个字节长,而在二进制中需要 3 个字节,在这些条件下用文本文件制作全彩色图像,如果是二进制,则 1024*1024 图像将是 3 兆字节,而它会在文本符号中为 7 兆字节。因此,即使在压缩之前,您也会看到 SVG 损失了很多。

现在,svg 的大小只有 2.5 倍这一事实证明了它包含的数据少了多少。尝试 gzip 压缩 svg 并将结尾更改为 SVGZ,然后查看结果与这之后的接近程度。然后你有更多的苹果与苹果的比较。无论如何,您的服务器可能会这样做。