Icon Font vs. SVG caching and networking

Question

Customization

SVG vs. Theme Icon Font is well lit on the Internet. But even after a long search, I did not find advice on my particular situation.

I have a website hosted by CMS. On one page, I have elements containing several icons. These elements are repeated on the page. Therefore, each icon appears on the page many times. Now it’s hard for me to figure out how best to implement these icons.

Built-in SVG

Overall, I fully see the benefits of using Inline SVG. It is very simple and simple, and you can do everything with it. In other, non-duplicate places on my website, I already use it, and I like it.

But: Repeating the same svg markup over and over seems redundant.

SVG Link

I could use SVG with the <img> , <object> or <embed> . In doing so, the SVG will be referenced, and therefore the only data that is unique is transmitted over the Internet.

But: In addition, things like using third-party CSS for SVG are not possible, I have some additional HTTP requests.

Font icon

I could use a font icon. Only one HTTP request and content are specified.

But: Bad markup, a larger file than SVG.

SVG Sprites

I could use an SVG sprite. Only one HTTP request and link.

But: It is quite sophisticated and feels the same as hacking as with Icon Font. Plus, I got the impression that background-SVG is not so easy to use.

Conlusion

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

• Is SVG markup repetition so bad compared to other solutions? This is what I do with HTML markup anyway. The SVG icon is about 30 lines / 1.6 Kbytes of code.
• Networkwise: are they asking for a few small HTTP requests (SVG link) or one large (larger than small font icon)?
• What are the benefits of using SVG sprites compared to using Icon Font? I assume this is at least CSS-fiddeling as a font icon.

Please note: I use AJAX, so only content is transferred. The icon font will load with the first request of my website (and then will be cached), the associated SVGs will be loaded with the first call to this special page and then cached. Embedded SVG will be transmitted every time this page is called, because the content is not cached in the browser.

My feeling is the icon font or the built-in SVG. But I am grateful for every contribution and aspect of this topic.

Answer 1

Why are you repeating the exact same markup when you can use the <use> elements to link and display multiple instances of this markup? Here is a link to an example .

As for <img> <object> , etc., browsers can cache them if you set the appropriate responses to your http for Expires and Cache-Control.

Using iconic fonts will look like you are playing something inappropriate for your use case.

For all your requirements, the <use> elements look the most suitable.

Answer 2

Perhaps not the best answer to this situation, not missing the pros and cons of each.

I personally prefer to use the built-in approach, especially if the combined file size is smaller than the font or one huge svg.

using <img> is great if the browser can cache them (especially if you have a lot of repeat visitors) ... but you eventually abandoned the options for style and interaction. you also need to add a little extra marking for some older browsers to work with a png file in case svg is not supported.

If you're interested, here is the hack I use to service pngs vs. svg, it basically fixes IE:

 <!--[if lte IE 8]><img src="img/youricon.png" /><![endif]--> <!--[if gt IE 8]><img src="img/youricon.svg" /><![endif]--> <!--[if !IE]> --><img src="img/youricon.svg" /><!-- <![endif]-->