Icon Font Vs. Svg Caching And Network Concern

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. O

Solution 1:

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.

Solution 2:

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]> --><imgsrc="img/youricon.svg" /><!-- <![endif]-->