Safari can only use symbols above the use in the DOM

[dfmcphee]

In Safari, all SVG symbols must be added to the DOM before the <use /> tag referencing them. All other browsers seem to be fine having the symbols added to the end of the body.

One work around is to modify the symbol content once the page has finished loading. For example adding a loaded class to the SVG will force Safari to re-render the symbol.

[sdras]

So, mobile safari also does a crazy FOUC (flash of unstyled content) where the icons are enormous, because of their continuing 3 second reload bug, you may think the workaround is putting the symbol at the end of the body, but then gradients break. Here's the solution I came up with- no mobile safari problems, no gradient issues, tests well with all browsers.

http://codepen.io/sdras/pen/bdjzwr

[fvsch]

Test case that shows the bug in Safari: http://fvsch.com/code/svg-sprite/