IE10 and 11 quirk on SVG use and linearGradients

Question

I am creating an SVG sprite so that it can be reused multiple times throughout the site. In order to use the sprite, I am simply using so that the symbol will be embedded in shadow DOM:

The issue is that when I attempt to use a as the fill attribute, it breaks in IE10 and 11. Strangely enough, it works perfectly fine in IE9, Chrome, Firefox, Safari, and Opera.

I know that if I avoid using and instead embed the contents of the directly, the linear gradient will work in IE10 and 11. However, I will want to avoid this since I prefer the sprites be stored in a separate file for easy maintenance.

Here is the code snippet:

svg {
  display: block;
  width: 250px;
  height: 100px;
}


This is an icon with a fill, works in all browsers





This is an icon with linear gradient, works in all browsers but breaks in IE10 and IE11 only (works in IE9)

As attached is the screenshot in various browsers:

IE9 (works):

IE10 (broken):

IE11 (broken):

Chrome (works):

Firefox (works):

Safari (works):

Paul LeBeau · Accepted Answer

Instead of display: none to hide the "sprite", use width="0" and height="0".

svg {
  display: block;
  width: 250px;
  height: 100px;
}


This is an icon with a fill, works in all browsers





This is an icon with linear gradient, works in all browsers but breaks in IE10 and IE11 only (works in IE9)