Using an external SVG sprite from HTML

For the inline sprite, the first two icons are in an SVG element at the start of the page, and the last two in a SVG element at the end of the page.

External sprite, default styles

External sprite, styled

Inline sprite, default styles

Inline sprite, styled

Some test results

External sprite Inline sprite Other notes
Chrome 43 OK OK
Firefox 38 OK OK Firefox lets you select elements “inside” the <use> element, so be careful with your CSS selectors! In particular, svg {} will apply to a “shadow” SVG element inside the use element.
Edge 13 OK OK
IE 9-11
Edge 12
No support OK One can use a small polyfill that fetches the SVG sprite, e.g. svg4everybody (make sure you use 2.0+ for Edge 12 support).
Safari 9.1 (OS X) OK OK
Safari 8.0 (OS X) OK Partial
Ignores the symbols defined at the end of the document
Warning: padding on SVG element doesn’t scale down the content. It’s probably better to apply “box” styles to a wrapper element, and not to the <svg> element directly.
Opera Mini (8.0, Android) OK OK Using fill:transparent doesn’t work, use fill:none instead.