内联 SVG 与 SVG 文件性能的比较

我目前正在建立一个针对现代浏览器和移动设备的网站。就性能而言，是使用 <svg>直接在 HTML 中内联 SVG 更好，还是使用 <img>和/或背景图像更好。我在服务器上运行 gzip 来进一步压缩我的内容，并且不喜欢依赖 Javascript。

42728 次浏览
小开

内联 SVG 可以减少 HTTP 请求的数量，因此它可以使首次访问时页面加载更快。但缺点是 SVG 不会缓存在浏览器中，因此每次都必须加载它。我想说，如果您只使用少量 SVG (比如10个左右) ，那么可以内联它们; 但是如果您有很多 SVG，那么可以使用 img + back-image。

您可能还需要考虑使用 SVG 定义和使用 SVGuse标记来引用 SVG 定义。这种方法非常好，特别是当您需要在页面中多次重复 SVG 时。关于这项技术的更多信息: http://css-tricks.com/svg-sprites-use-better-icon-fonts/

我的 web 应用程序 也可以帮助您轻松地创建这些 SVG 定义和使用对。

小开

内联的优点:

  • 更少的 http 请求;
  • 您可以使用 css 填充属性和更改颜色;
  • Svg 是内容的一部分，因此可以单击它并插入文本;

独立文件的优点:

  • 可以缓存 Svg 文件;
  • 您不会在文件中看到多行相关的代码;
  • 如果以后需要更改它，那么只需更改一个文件;
小开

克劳迪奥 · 克里安加，你在大多数问题上是正确的，但在最后一个问题上却不是:)

关于文件 SRC: “如果你以后需要更改它，那么你只需要更改一个文件;

这个文件也可以是一个单独的 SVG 内联，只需要包含通过 PHP 实现的 XML/text 源代码，例如:

<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/img/icon-home.svg'); ?>

我使用这种策略，因为我在我的图标上做 CSS3动画。这样你就可以在一个向量程序中修改原始的参考文件，并且简单的上传就可以修复所有的内联代码。如果只是重新排列或操纵 SVG 中的对象和路径 ID，它们不会改变。

小开

没有通用的方法。它确实取决于很多东西，但这里有一些基本的策略，可以单独使用或结合使用。

如果有:

  • 每个文件大小小于5k 的少量 SVG-使用 HTML 内联它们。压缩后的 gzip/brotli 每个大约是1k。无论是否缓存，任何小数乘以1k 都比相同数量的额外请求要好。

  • 大量小 SVG (s) < 5k-制作 SVG 精灵

  • 任何大于5k 的 SVG，假设我们不需要通过 CSS 或 JS 访问 SVG 属性。然后是 <img src="name.svg">

  • 任意数量的 SVG，但是我们确实需要使用 CSS 来更改 SVG 属性，或者让一些 SVG 属性具有动画效果。唯一可行的选择是内联 svg。

  • 如果我们需要 SVG (s)作为背景，但它们每个都小于5k:

    .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); }

  • 如果我们需要 SVG (s)作为背景，但它们每个都大于5k:

    .bg { background: url('images/file.svg'); }

  • 我从来没有机会尝试 SVG 精灵作为背景，但它也是一个选项

小开

能够缓存 SVG 是将它们包含为图像的一个重要原因。我喜欢做的是包括他们使用 CSS 掩码-这对我来说是一个完美的交叉之间的一个真实的图像和能力，改变图标的颜色，就像我会，如果它是内联 SVG。这样产生的图标可以通过 CSS 类轻松控制，可以自定义，而且根本不会使代码膨胀。

此方法的参考文献: https://equinusocio.dev/blog/accessible-icon-buttons-with-masks-and-svg/


提交答案