2

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.

Joshua Gleitze
  • 807
  • 1
  • 9
  • 12

2 Answers2

2

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Could you please provide a link with reference for the `` element? I cannot find it on the web ("use" is a horrible keyword for any search) and never heard about it. I heard that there are plans to make it possible to define custom elements in html markup, but I didn't know this was widely supported yet. – Joshua Gleitze May 30 '14 at 11:44
  • [Here](http://tutorials.jenkov.com/svg/use-element.html) is one. Nice to know, though it says ` element can reuse an SVG shape from elsewhere in the SVG document` so I'm afraid you could only reuse it in one big svg document, and not replicate it in another SVG doc? – webketje May 30 '14 at 11:49
  • Now I get it! You were talking about the SVG element! @RobertLongson: Is there a way to use both svg and html in the same document? To have one HTML+SVG document instead of a HTML document with lots of embedded SVG documents? Because otherwise I would not now how to make proper use of `` in this case. – Joshua Gleitze May 30 '14 at 12:34
  • the `use` tag can only reference an element from within the same svg. It does'not appear that you can create a new svg in a different section by referring to a separate one. – Grapho May 30 '14 at 13:36
  • That's not true @GraphicO. `` can reference elements from other SVG documents but some UAs may not implement that, Firefox certainly does implement external `` references though. – Robert Longson May 30 '14 at 17:44
  • Here's an example from the SVG testsuite showing external `` http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/struct-use-05-b.html – Robert Longson May 30 '14 at 17:51
  • @RobertLongson I stand corrected, i just read an article at CSS tricks, but there is some compatability issues with IE that need a JS fix. – Grapho May 30 '14 at 18:08
  • I just read about that as well. I will try it soon, but I guess `` is the right, best and cleanest way to do it. – Joshua Gleitze Jun 04 '14 at 06:06
0

There might not be a best fit answer to this situation beyond weighting out the pros and cons of each.

I personally tend to go on the all inline approach, especially if the combined file footprint is smaller than a font or one huge svg.

using <img> is great if the browser can cache them (especially if you have lots of repeat visitors)...but you end up giving up on the styling and interaction options. you also need to add a bit extra mark up for some older browsers to serve a png file in the case that svg is not supported.

If you are interested, here is a hack I use for serving pngs vs. svg basically it 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]-->
Grapho
  • 1,654
  • 15
  • 33