内联 SVG 与 SVG 文件性能答案

【问题标题】：Inline SVG vs SVG File Performance内联 SVG 与 SVG 文件性能
【发布时间】：2014-06-06 06:27:30
【问题描述】：

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

【问题讨论】：

标签： html web svg

【解决方案1】：

内联的优点：

单独文件的优点：

【讨论】：

因此，如果我只需要更改 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 类轻松控制，可以自定义，并且完全不会使代码臃肿。

【讨论】：