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