由于其可扩展性，SVG 已经存在多年，众所周知，内联 SVG 的好处是可以使用 CSS 和 JS 对其进行操作，当我们想在 html 文档上重复相同的 SVG 时，那么我们可以使用 <use>标记以引用原始元素。此外，内联 SVG 还可以减少 HTTP 请求的数量。
然而，许多文章建议(没有解释细节)当我们使用内联 SVG 来保存 HTTP 请求时，它不再作为一个单独的主题被浏览器缓存，这意味着它不能跨页面重用。
因为我碰巧在一个元素中广泛使用内联 SVG，所以我想确切地知道内联 SVG(著名的 html5 元素，这是 w3c 推荐)如何在浏览器中缓存，同时将 SVG 与 <img> 一起使用。标签或 background-image是可缓存的。
如果 DOM 是可缓存的，那么为什么 SVG DOM 不能？ (它建立在 DOM 级别 2 之上并与其兼容。引用:https://www.w3.org/TR/SVG/svgdom.html)
到目前为止，我提出的可缓存性解决方案是使用 Data URI scheme (另请参阅:Optimizing svgs in data uris) 但这样做会失去处理 CSS 和 JS 的样式和操作能力。
网络上的一些示例建议使用 JS 来加载可缓存资源或通过替换占位符元素，例如 <object>标记，以及使用 localStorage，CacheStorage和 Service Worker .但我仍然需要一些指导方针来开始实现理想的解决方案。
有人可以给我一些启发吗？
-
-
-
最佳答案
基本 HTTP 缓存基于 URL 工作，它是“全有或全无”——您可以指示客户端从缓存中获取整个资源，或者完全重新加载它。
现在，通过“内联”您的 SVG，您使它们成为 HTML 文档的一部分 - 它们不再是外部资源，可以单独检查它们是否可以从缓存中获取或需要重新加载。
因此，如果您有三个 HTML 文档，它们都具有相同的内联 SVG 图像，图像代码将被加载三次 - 因为它是三个 HTML 文档的一部分。
然而，如果图像作为外部资源嵌入(如 img、背景图像、对象等)，它只会被加载一次，在浏览器加载的这三个 HTML 页面中的第一个页面上。在其他页面上，它会识别出“嘿，具有此特定 URL 的外部资源已经在我的缓存中 - 无需再次加载它。”
关于javascript - 我们如何在浏览器中缓存内联 SVG？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37832422/