The Problem

There is an issue with IE11 when rendering some types of SVG files the styles are embedded as a <style></style> element inside the SVG file.

Because IE11 uses a different rendering engine for CSS images and HTML images the images differ from when including the SVG file inside compared to when using the <img> tag.

 E.g.

<img src="/images/badge.svg" width="32" height="32"/>

 vs

 .badge{ background-image: url('/images/badge.svg'); }

The Solution

In total there are four ways of exporting an SVG from Illustrator or other tools:

1. Presentation Attributes

2. Style Attributes

3. Style Attributes (Entity Reference)

4. Style Elements (this does not work in IE)

In order to export the SVG file correctly follow these steps (Adobe Illustrator CC 2017).

  <img src="https://images.squarespace-cdn.com/content/v1/56a93185c647ad307dd74183/1496904565973-U8MBGJI820QPHTXIRKUK/ke17ZwdGBToddI8pDm48kN1_be8widJMrIl4ET6NPFhZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIBxIMnoHkf3i6wmM7CsD2Tr8LbxQOL7uXTrTxt07qkQE/image-asset.png?format=original" alt=""/>

1.Open the SVG file if it’s not already open. Go to File > Export > Export As

  <img src="https://images.squarespace-cdn.com/content/v1/56a93185c647ad307dd74183/1496904629771-AZW1S7IN8VLMU3UMX6HI/ke17ZwdGBToddI8pDm48kOcIwgOLPmEfQsKcBJ6JSWJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQ2gKXs1obCcj9Q_W_eZcakWdHyYIBdy1alusMRNUNj2bSexTd1-frD7527z4SM9QQ/image-asset.png?format=original" alt=""/>

2. Select SVG as Format from the dropdown and click on the Export button.

  <img src="https://images.squarespace-cdn.com/content/v1/56a93185c647ad307dd74183/1496904766854-C9K461BJY11ANL0N37YW/ke17ZwdGBToddI8pDm48kKa8z_Ct7pM34KemnKVC5X5Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIdGTEng6HmWVXR1pkOH8p8QJNqigwlZ_3gVSZV7z9Dd4/image-asset.png?format=original" alt=""/>

3. On the next screen make sure that the selection for Styling is Inline Style. Click the OK button.

That’s it. Now the SVG element will display correctly.