我应该以正确的尺寸提供 SVG，还是应该缩小它们并让浏览器调整它们的大小？
Should I serve SVGs at the correct size or should I shrink them and let the browser resize them?
SVG 是矢量，因此它们可以在不损失任何质量的情况下调整大小。
知道这一点，我的想法是，我为什么要使用正确尺寸的 SVG。在我看来，相同尺寸的 SVG 在 100px x 100px 时的尺寸远大于 10px x 10px 时的尺寸。
那么问题是我应该选择较小的文件大小并让浏览器调整图像大小，还是以正确的大小提供图像更好以便浏览器不必进行任何重新缩放（接受在许多情况下，由于响应性，它必须以任何一种方式执行此操作）。
我知道这可能属于微优化的范畴，但我的许多 SVG 似乎可以小得多，这可能有助于 Google 页面速度得分。
正如您所说，SVG 是矢量。
should I go for a smaller file size
您不能缩小 SVG 的文件大小。即使您降低 SVG 规定的 DPI 或像素大小，SVG 的 XML 代码仍保持不变。
如果 viewBox 改变，SVG 的文件大小会改变吗？
通常不会，或者至少不会太多。这是一个复杂的例子，它会改变。
这是原始（“小”）版本：
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect y="5" x="5" width="2" height="2"></rect>
<circle cx="5" cy="5" r="20%" fill="white"></circle>
</svg>
现在让我们调大 viewBox 大小。我们需要按比例增加所有元素的绝对坐标。
<svg viewBox="0 0 10000000 10000000" xmlns="http://www.w3.org/2000/svg">
<rect y="5000000" x="5000000" width="2000000" height="2000000"></rect>
<circle cx="5000000" cy="5000000" r="20%" fill="white"></circle>
</svg>
结果是相同的图像，但大了 48 个字节 (28%!)。大 48 个字节 没有充分的理由 - 表示的图像完全相同，精度水平相同。
这个例子很复杂，因为大多数 SVG 不会像这样 - 它们将使用浮点数，即使小数（文字 .）position 移位，位数不会 - 因此大小差异很小或没有。
如果您正在更改viewBox大小并重新缩放所有值并且确实看到差异，那么它要么像上面那个令人费解的例子，要么你实际上失去了精度，因为重新缩放正在减少浮点值中的位数——这 会 降低最终图像的质量。
当您的 SVG“大小”很重要时
SVG 的大小非常随意，因为它是矢量格式，布局是通过数学完成的，因此不依赖于您指定的大小。
但是，如果 SVG 在页面上呈现然后调整大小，它可能会在呈现阶段产生影响。
这是因为所有 SVG 都是构建后转换为光栅图像进行显示。因此，如果您有一个巨大的图像，因为您使用 cm 设置了尺寸，而浏览器尚未计算出它的最终宽度，那么您最终可能会遇到大量浪费渲染工作的情况。
这是一个边缘案例，因此它不太可能影响大多数网站，特别是如果它们的关键 CSS 是内联等
唯一重要的其他时间是如果您的 CSS 由于任何原因未能正确应用。但是在大多数网站上，如果 CSS 由于任何原因再次失败，那么巨大的 SVG 不会成为最大的问题，超级小问题。
总结：不用担心，在 99.9% 的情况下都是不值得的，而且表现同样出色。
优化 SVG 以提高性能。
SVG 优化更多是关于删除不需要的节点（因此，如果您显示 10px x 10px 大小的 SVG，可能值得删除一些节点并简化 SVG 以节省字节数和以细节为代价的渲染复杂性。）以及通过简化复杂路径和消除膨胀来优化 SVG。
A great tool for minimising an SVG is SVG OMG，that 是您将看到更少字节和简化路径等带来的性能提升的地方。
最后的想法
I have a site that is very heavy on SVG，除了 DOM 的复杂性之外，它的大小很小，压缩后只有 80kb（因为 SVG 可以缩小和压缩，因为它们只是文本），我想你的时间会更好除非您已经在 Page Speed Insights 中获得 95+ 分，否则在其他地方进行优化。
SVG 是矢量，因此它们可以在不损失任何质量的情况下调整大小。
知道这一点，我的想法是，我为什么要使用正确尺寸的 SVG。在我看来，相同尺寸的 SVG 在 100px x 100px 时的尺寸远大于 10px x 10px 时的尺寸。
那么问题是我应该选择较小的文件大小并让浏览器调整图像大小，还是以正确的大小提供图像更好以便浏览器不必进行任何重新缩放（接受在许多情况下，由于响应性，它必须以任何一种方式执行此操作）。
我知道这可能属于微优化的范畴，但我的许多 SVG 似乎可以小得多，这可能有助于 Google 页面速度得分。
正如您所说，SVG 是矢量。
should I go for a smaller file size
您不能缩小 SVG 的文件大小。即使您降低 SVG 规定的 DPI 或像素大小，SVG 的 XML 代码仍保持不变。
如果 viewBox 改变，SVG 的文件大小会改变吗？
通常不会，或者至少不会太多。这是一个复杂的例子，它会改变。
这是原始（“小”）版本：
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect y="5" x="5" width="2" height="2"></rect>
<circle cx="5" cy="5" r="20%" fill="white"></circle>
</svg>
现在让我们调大 viewBox 大小。我们需要按比例增加所有元素的绝对坐标。
<svg viewBox="0 0 10000000 10000000" xmlns="http://www.w3.org/2000/svg">
<rect y="5000000" x="5000000" width="2000000" height="2000000"></rect>
<circle cx="5000000" cy="5000000" r="20%" fill="white"></circle>
</svg>
结果是相同的图像，但大了 48 个字节 (28%!)。大 48 个字节 没有充分的理由 - 表示的图像完全相同，精度水平相同。
这个例子很复杂，因为大多数 SVG 不会像这样 - 它们将使用浮点数，即使小数（文字 .）position 移位，位数不会 - 因此大小差异很小或没有。
如果您正在更改viewBox大小并重新缩放所有值并且确实看到差异，那么它要么像上面那个令人费解的例子，要么你实际上失去了精度，因为重新缩放正在减少浮点值中的位数——这 会 降低最终图像的质量。
当您的 SVG“大小”很重要时
SVG 的大小非常随意，因为它是矢量格式，布局是通过数学完成的，因此不依赖于您指定的大小。
但是，如果 SVG 在页面上呈现然后调整大小，它可能会在呈现阶段产生影响。
这是因为所有 SVG 都是构建后转换为光栅图像进行显示。因此，如果您有一个巨大的图像，因为您使用 cm 设置了尺寸，而浏览器尚未计算出它的最终宽度，那么您最终可能会遇到大量浪费渲染工作的情况。
这是一个边缘案例，因此它不太可能影响大多数网站，特别是如果它们的关键 CSS 是内联等
唯一重要的其他时间是如果您的 CSS 由于任何原因未能正确应用。但是在大多数网站上，如果 CSS 由于任何原因再次失败，那么巨大的 SVG 不会成为最大的问题，超级小问题。
总结：不用担心，在 99.9% 的情况下都是不值得的，而且表现同样出色。
优化 SVG 以提高性能。
SVG 优化更多是关于删除不需要的节点（因此，如果您显示 10px x 10px 大小的 SVG，可能值得删除一些节点并简化 SVG 以节省字节数和以细节为代价的渲染复杂性。）以及通过简化复杂路径和消除膨胀来优化 SVG。
A great tool for minimising an SVG is SVG OMG，that 是您将看到更少字节和简化路径等带来的性能提升的地方。
最后的想法
I have a site that is very heavy on SVG，除了 DOM 的复杂性之外，它的大小很小，压缩后只有 80kb（因为 SVG 可以缩小和压缩，因为它们只是文本），我想你的时间会更好除非您已经在 Page Speed Insights 中获得 95+ 分，否则在其他地方进行优化。