使用 SVG 防止网络（xhr）调用？答案

【问题标题】：Preventing Network(xhr) call with SVG?使用 SVG 防止网络（xhr）调用？
【发布时间】：2016-11-01 14:16:27
【问题描述】：

我想在我的 HTML 文件中包含一些 SVG 图像。我正在使用 ReactJS 并通过使用<img> 标签来包含它们。

<img src="path_to_svg"></img>

现在，正如预期的那样，这些图像中的每一个都导致了 XHR 网络请求。我想阻止出于性能和安全问题的 XHR 请求。

实现这一目标的最佳方法是什么？我是否应该考虑将 SVG 代码转换为 Base64，并将 CSS 作为背景包含在内？

【问题讨论】：

【解决方案1】：

我认为您的两个选择是使用data URIs 来作为您的图像或使用sprite sheets。

数据 URI 的问题是除非它们所在的文档被缓存（HTML 文件或 CSS 文件），否则您的图像不会被缓存。但是有些事情你可以做to help with that。

sprite sheet 解决方案不会阻止您的所有网络调用，但如果这是一个可行的选项，它会将其限制为仅一个。

【讨论】：