SVG Sprites with IE 11

We starting using Gulp Svg Sprite generator but finding that IE 11 does not show the svg sprite.

We added the SVG4Everybody.js polyfill but it still wasn’t working. Finally, we determined that the <clipPath> element in the svg file was the culprit. After doing a search and replace in the svg sprite file and changing the clipPath tag to something different like clipxPath, the icons showed up in IE 11.

Another issue found was to use SVG on different backgrounds and wanted to change the color of the stroke. We can’t seem to do a global selector on all paths. We could use #facebook path as the selector but not svg path or symbol path. We did find a workaround since all svg icons had an id, we used the selector symbol[id] path So any symbol element containing the id attribute.

symbol[id] path {
   stroke: #ffffff;
}