内联 SVG 与 SVG 文件性能

Posted 2023-03-05

【中文标题】内联 SVG 与 SVG 文件性能

【英文标题】：Inline SVG vs SVG File Performance

【发布时间】：2014-06-06 06:27:30

【问题描述】：

我目前正在构建一个针对现代浏览器和移动设备的网站。在性能方面，使用<svg> 直接在html 内内联SVG 更好还是使用<img> 和/或背景图像更好。我在服务器上运行 gzip 以进一步压缩我的内容，并且不想依赖 javascript。

【问题讨论】：

我认为您没有标记元素的 html 源代码，因为它们在您的问题中是空白的。

你是对的，谢谢你注意到这一点。

【参考方案1】：

内联的优点：

更少的 http 请求； 您可以使用 css 填充属性并更改颜色； Svg是内容的一部分，所以可以点击，也可以插入文字；

单独文件的优点：

可以缓存Svg文件； 您没有在文件中看到多行不相关的代码； 如果以后需要更改，只需更改一个文件；

【讨论】：

因此，如果我只需要更改 svg 的高度，我可以使用源自 svg 文件的 并更改 img 的高度，还是我做错了？

可以缓存Svg文件； >> HTML 也可以被缓存。您不会在文件中看到多行不相关的代码； >> 你可以让一个文件分离文件给它一个名字，就像你给 svg 一样，并使用 include for php 将它导入你想要的地方。如果您稍后需要更改它，那么您只需更改一个文件； >> 见上文。

@RoyvanWensen html 比图像更频繁地更改，因此最好单独缓存图像。此外，您在不同的 html 页面中使用相同的 svg 图标，因此您只需要缓存一次。

另外，如果您内联您的 SVG，则需要在浏览器获取后续内容之前下载它。而如果它是外部资源，浏览器可以并行下载它并控制优先级。对于微型 SVG，这种区别并不重要。

@JaffaTheCake - 你的意思是类似于 CSS 或 JS，内联 SVG 是阻塞资源吗？

【参考方案2】：

没有通用的方法。这实际上取决于很多事情，但这里有一些可以单独使用或组合使用的基本策略。

如果我们有：

少量 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 sprite 作为背景，但这也是一种选择

【讨论】：

关于 .css 文件中的 SVG，即 ... background: url('data:image/svg ... — 是您建议对 > 5k SVG 不这样做的原因，然后，如果 CSS 更改，所有 > 5k SVG 都将被下载再次与修改后的CSS一起？还是您也有其他原因？ — 感谢您的详细回答：-)

15 是不是很小的数字？此外，“任何小数乘以 1k 都比相同数量的附加请求要好，无论是否缓存。”这是否意味着 15 * 1k 比一个 15k 的请求更好？非常感谢。

除非您处于几乎为 0 延迟的实验室网络中，否则即使一个 100K 请求也比 10 个 10K 请求好得多。存在用于 Apache Http 代理和其他模块的模块，它们基本上“内联”源服务器上大量的 href 资源，然后将组合响应传输到用户代理。除非您可以依赖这样的网络设备，否则上面推荐的策略是一个不错的策略。干杯！

【参考方案3】：

内联 SVG 会减少 HTTP 请求的数量，因此它应该会在有人第一次访问时加快页面加载速度。但缺点是您的 SVG 不会缓存在浏览器中，因此每次都必须加载它。我会说如果你只使用几个 SVG（比如 10 个左右），内联它们；但如果你有很多，请使用 img+background-image。

您可能还想考虑使用 SVG 定义并使用 SVG use 标签来引用 SVG 定义。这个方法很不错；特别是如果您需要在页面中多次重复 SVG。有关此技术的更多信息：http://css-tricks.com/svg-sprites-use-better-icon-fonts/

My web app 还可以帮助您轻松制作这些 SVG 定义和使用对。

【参考方案4】：

Claudiu Creanga，您在大多数方面是正确的，但在最后一个方面不是：)

关于文件SRC：“如果您以后需要更改它，则只需更改一个文件；”

该文件也可以是单独的 SVG，也可以是内联文件。例如，只需通过 PHP 包含 XML/文本源：

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

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

【参考方案5】：

能够缓存 SVG 是将它们作为图像包含的一个重要原因。我喜欢做的是使用 CSS 掩码将它们包括在内 - 对我来说，这是真实图像和更改图标颜色的能力之间的完美结合，就像它是内联 SVG 一样。这导致图标可以通过 CSS 类轻松控制，可以自定义，并且完全不会使代码臃肿。

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