图标字体与SVG缓存和网络问题 [英] Icon Font vs. SVG caching and network concern

问题描述

设置

网页上涵盖了SVG与图标字体的主题。但即使经过长时间的搜索，我也没有找到有关我的特殊情况的建议。

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

内联SVG

一般情况下，我完全看到使用Inline SVG的好处。它最简单直接，你可以用它做最多的事情。在我的网站上的其他非重复的地方，我已经使用它，我喜欢它。

但是：重复完全相同的svg标记而且似乎不必要地炸毁文件。

参考SVG

我可以通过< img> <使用SVG / code>，< object> 或< embed> 标记。这样做，SVG将被引用，因此只有通过网络传输的唯一数据。

但是：除了使用SVG的副CSS是不可能的，我有几个额外的HTTP请求。

图标字体

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

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

SVG Sprites

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

但是：它非常复杂，感觉就像使用Icon Font一样。另外我的印象是背景-SVG不是那么容易使用。

Conlusion

要上来使用最佳解决方案，我认为以下问题是相关的：

• 与其他解决方案相比，重复SVG标记是否如此糟糕？这就是我对HTML标记的处理方式。一个SVG-Icon约30行/1.6kB代码


• Networkwise：是几个小的HTTP请求（引用的SVG）还是一个大的（大于小的组合，图标字体）请求更快？


• 与使用Icon字体相比，我使用SVG精灵有哪些优势？我想它至少和Icon字体一样多。我们会在这里使用AJAX，所以只传输内容。 。图标字体将加载我的网站的第一个请求（然后被缓存），引用的SVG将加载该特殊页面的第一次调用然后被缓存。内联SVG将在此页面的每次调用时传输，因为内容未在浏览器中缓存。
  
  
  

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

  解决方案

  为什么在使用< use> 引用和显示该标记的多个实例的元素？这是示例链接。

  
  
  

  至于< img> < object> 等等，如果设置过期，浏览器可以缓存这些内容在你的http响应中适当地使用和Cache-Control。

  
  
  

  使用Icon字体看起来好像是你的用例不合适的东西。

  
  
  

  在所有给定的要求中，< use> 元素似乎最合适。

  
  

  Setup

  The topic SVG vs. Icon Font is well covered in the web. But even after long searches, I did not find advice concerning my special situation.

  I have a site served by a CMS. On one page, I have elements containing several icons. These elements are repeated over the page. So each icon shows up a lot of times on the page. Now I have a hard time to figure out how to realize those icons best.

  Inline SVG

  In general, I totally see the benefits of using Inline SVG. It's most simple and straightforward, and you can do the most with it. On other, non-repeated places on my website I already use it and I love it.

  But: Repeating the exact same svg markup over and over again seems like blowing up the document unnecessarily.

  Referenced SVG

  I could use the SVG via the <img>, <object> or <embed> tag. Doing this, the SVG would be referenced and therefore only data that is unique is transfered via the web.

  But: Besides things like using the side CSS for the SVG ist not possible, I have several extra HTTP requests.

  Icon Font

  I could use an Icon Font. Only one HTTP request and content is referenced.

  But: Bad markup, bigger file than the SVGs.

  SVG Sprites

  I could use a SVG sprite. Only one HTTP request and reference.

  But: It's quite comlicated and feels as much as a hack as using the Icon Font does. Plus I have the impression that background-SVG ist not so easy to use.

  Conlusion

  To come up with the best solution, I think the following questions are relevant:

  • Is repeating the SVG markup so bad compared to the other solutions? It's what I do with the HTML markup anyway. A SVG-Icon are about 30 lines / 1.6kB of code
  • Networkwise: Are several small HTTP requests (referenced SVG) or one big (bigger than the small ones combined, icon font) request faster?
  • Which advantages do I really have using SVG sprites compared to using an Icon Font? I guess it's at least as much CSS-fiddeling as an Icon Font.

  Please note: I use AJAX, so only content is transferred. The icon font would load with the first request of my website (and then be cached), the referenced SVGs would load with the first call of this special page and then be cached. Inline SVG would be transferred on each call of this page, as content is not cached in the browser.

  My feeling is an icon font or inline SVG would be best. But I am thankful for every contribution and aspect of this topic.

  解决方案

  Why would you repeat exactly the same markup when you could use <use> elements to reference and display multiple instances of that markup? Here's a link to an example.

  As for <img> <object> etc browsers can cache these if you set Expires and Cache-Control appropriately in your http responses.

  Using Icon fonts would seem like you're shoehorning into something inappropriate for your use case.

  In all given your requirements, <use> elements would seem most appropriate.

  这篇关于图标字体与SVG缓存和网络问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！