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