0

My requirements:

  1. Icons will be used "above the fold", including the site-wide navigation header/menu
  2. Page should initially render without waiting for icons to load (i.e. icons are not added to the HTML nor are they part of critical CSS). In other words icons are considered as progressive enhancement, not core functionality.
  3. Icons should be able to be cached, as many will be used on every page
  4. Do not cause too many extra HTTP requests

Possible solutions (and why they may not work):

Webfont

As it's applied using CSS, it will become part of the critical CSS and cause extra roundtrips before the page can render = violation of requirement 2

One SVG file per icon

Causes one HTTP request per icon = violation of requirement 4

Embed SVG sprite and <use> it

Will be embedded on every single page and hence non-cacheable = violation of requirement 3

External SVG sprite

This is the only solution I can think of that provides efficient HTTP requests (only one!), will support caching, and won't be required before the initial content can be painted by the browser. The sprite could be generated easily using something grunt-svgstore but I'm not sure exactly how the rest would work, particularly CSS. Using <object> with an external link sounds plausible for the HTML (assuming a polyfill for IE is used) but then what about icon backgrounds for CSS - reference them by URL?

rgareth
  • 3,377
  • 5
  • 23
  • 35
  • What is the target of the requirements tho? You do understand that SVG is partially supported, do you !? – Alen Saqe Nov 09 '14 at 14:48
  • 2
    Support for SVG is excellent these days, example: http://caniuse.com/#feat=svg-css – rgareth Nov 09 '14 at 20:08
  • I see that the green boxes are there all the time. But i build an SVG city map (app) a couple of weeks ago. The css transform caused a lot of performance issues as well as lastest mozilla stable build had problems rendering the svg all the time and lastest chrome has a problem that you need to render the svg at the top of the page. I can give you this article to refer to if you find some help http://css-tricks.com/svg-sprites-use-better-icon-fonts/ – Alen Saqe Nov 09 '14 at 20:22

0 Answers0