更大的 SVG 比更小的 SVG 质量更好？答案

【问题标题】：Bigger SVGs better quality than smaller SVGs?更大的 SVG 比更小的 SVG 质量更好？
【发布时间】：2014-07-13 03:42:18
【问题描述】：

较大的 svg 是否比较小的 svg 包含更多细节？我的意思是，为网络导出更大的 svg 还是小型 svg 更好？我知道小型的加载速度更快，并且在调整大小时不会丢失任何质量，但我只是想知道与更大的版本相比是否有任何缺点。

【问题讨论】：

标签： image css svg

【解决方案1】：

SVG 是矢量数据，您导出的大小根本不会影响质量。您可以稍后调整它的大小，您将始终拥有您的输出媒体（屏幕）可以提供的最佳质量。

【讨论】：

【解决方案2】：

在质量上没有区别......大小......您可能谈论的唯一区别是细节的数量，这会增加实际文件大小，从而增加浏览器的加载时间。但无论大小，质量总是好的。

【讨论】：

【解决方案3】：

这取决于我想说的。如here所述：

本规范定义了 Scalable Vector 的特性和语法图形 (SVG) 版本 1.1，一种用于描述的模块化语言 XML 中的二维矢量和混合矢量/光栅图形。

如果您的导出程序压缩包含/引用的光栅图像，那么您的质量当然会有所下降。
仅对于矢量图形，可能仅会减少小数位，这可能会减少到某个点，而不会出现“可见”的质量损失/细节变化。
如果您只有矢量图形并且不更改小数位，那么较小的 svg 图形导出应该只删除冗余并压缩代码。

最后一种情况的优化示例可以在here 和一些更具体的信息here 中找到。

【讨论】：

有多小才算太小？有经验法则吗？
我不知道，我不是 SVG 专家。如果您包含光栅图像，那么您需要自己决定质量。这个问题的答案是主观的。如果您只有矢量图形，那么我想您可以安全地减少到 3 位甚至 2 位小数（如果用于 Web 内容）。如果您有只减少冗余并压缩代码的导出器，那么无论您选择什么大小，我认为都没有损失。 See here 或 here 这些“优化器”做了什么。

【解决方案4】：

一些因素会影响 SVG 的文件大小，但它们都与其中描述的信息的数量、复杂性、精度和冗余度有关。例如， rect x="100" y="200" width="200" height="300" 和 rect x="10" y="20" width="20" height="30" 取决于在显示大小上，即使后者需要少四个字节（如果说 ascii）来指定。描述中国和蒙古之间边界的 SVG 路径，其中包含 4000 个坐标（定义这些区域的条约可能会指定）将比只有 400 个点的路径更庞大，尽管后者不太精确.如果 SVG 是在 Illustrator 或 Inkscape 等程序中手动创建的，那么输出中可能经常存在冗余：已定义但从未使用过的渐变，在 d=" 0 0 0 0 等路径中多次指定的点100 100 100 100 ...”——Inkscape 有一种简化输出的方法，因此它的杂物少了一点，并且有一个已经存在了十年左右的免费软件可以帮助消除这种杂物。此外，程序输出的精度往往比大多数人或软件所需要的小数点多得多，因此使视觉障碍者更难以接近底层几何图形：以飞米为单位绘制一个精确的矩形可能有点矫枉过正并且占用空间在输出中。基本上，虽然其他回答的人是对的，但通常一个正方形就是一个正方形，占用 50 字节的存储空间比占用 50 KB 的存储空间要好！

【讨论】：

然而，我正在考虑放弃 SVG，因为它在我们的浏览器中过于不一致（支持和渲染）......尤其是作为背景图像。我认为人们最好使用更大尺寸的PNG并相应地缩小它。质量本身将与 SVG 本身相同或更好（firefox 19-30、chrome、opera、safari 5-7）。优化文件大小（如果图像不复杂）不值得一提。一个 8000 像素分辨率的简单图像只有 200-300 kb 左右，这在 2014 年应该不是问题。