html - 图标字体与 SVG 缓存和网络问题

Question

设置

网络上广泛讨论了 SVG 与图标字体这一主题。但即使经过长时间的寻找，我也没有找到针对我的特殊情况的建议。

我有一个由 CMS 提供服务的网站。在一页上，我有包含多个图标的元素。这些元素在页面上重复出现。所以每个图标都会在页面上出现很多次。现在我很难弄清楚如何最好地实现这些图标。

内嵌 SVG

总的来说，我完全看到了使用内联 SVG 的好处。它最简单、最直接，而且您可以用它做最多的事情。在我网站上其他不重复的地方，我已经使用了它并且我喜欢它。

但是:一遍又一遍地重复完全相同的 svg 标记似乎不必要地毁掉了文档。

引用的 SVG

我可以通过 <img> 使用 SVG , <object>或<embed>标签。这样做时，将引用 SVG，因此只有唯一的数据才会通过网络传输。

但是:除了不可能使用 SVG 的侧 CSS 之类的事情之外，我还有几个额外的 HTTP 请求。

图标字体

我可以使用图标字体。仅引用了一个 HTTP 请求和内容。

但是: 标记错误，文件比 SVG 更大。

SVG Sprite

我可以使用 SVG Sprite 。只有一个 HTTP 请求和引用。

但是:它相当复杂，感觉就像使用图标字体一样。另外，我的印象是，background-SVG 不太好用。

结论

为了提出最佳解决方案，我认为以下问题是相关的:

• 与其他解决方案相比，重复 SVG 标记是否如此糟糕？无论如何，这就是我对 HTML 标记所做的事情。一个 SVG 图标大约有 30 行/1.6kB 代码
• 网络方面:多个小型 HTTP 请求(引用 SVG)还是一个大型请求(大于小型请求的总和，图标字体)请求速度更快？
• 与使用图标字体相比，使用 SVG Sprite 确实有哪些优势？我猜它至少和图标字体一样需要 CSS 改动。

请注意:我使用 AJAX，因此仅传输内容。图标字体将在我的网站的第一个请求时加载(然后被缓存)，引用的 SVG 将在第一次调用此特殊页面时加载，然后被缓存。内联 SVG 将在此页面的每次调用时传输，因为内容不会缓存在浏览器中。

我的感觉是图标字体或内联 SVG 最好。但我感谢这个主题的每一个贡献和方面。

Answer 1

当您可以使用 <use> 时，为什么要重复完全相同的标记？引用和显示该标记的多个实例的元素？这是a link to an example .

至于<img> <object>如果您在 http 响应中适当设置 Expires 和 Cache-Control，等浏览器可以缓存这些内容。

使用图标字体看起来像是硬塞进不适合您的用例的东西。

根据您的所有要求，<use>元素似乎是最合适的。