InlineSvg does not work on IE11

[ElVisPL]

It is because IE does not support innerHTML for svg elements

I've fixed it like this on my end using :transform-source. You could use it as a fix.

transformSource(svg) {
      if (!environment.isIE()) {
        return svg
      }

      //InlineSvg component is based on innerHTML
      //and IE11 does not set innerHTML for svg initially
      const serializer = new XMLSerializer()

      const svgContent = Array.prototype.map.call(
        svg.childNodes,
        (child) => serializer.serializeToString(child)
      ).join("")

      svg.innerHTML = svgContent
      return svg
    }

[shrpne]

Thank you!

innerHTML for SVG can be easily polyfilled, for example, https://github.com/dnozay/innersvg-polyfill.

I do not plan to add polyfill in the repo, because IE11 has low usage, but I think I should add some docs how to support IE11

[lf-jeremy]

It's also worth noting that IE will not evaluate css styles in SVGs automatically, as noted in other similar projects:

arkon/ng-inline-svg#17

[andypattenden]

As suggested by @shrpne, using a polyfill allows this to be used in IE11. However, I have come across another issue.

When using this with a webpack configuration which uses url-loader to load the SVG files (in my case Nuxt), and the SVG is below the limit to transform the file into base64, IE will fail to load the file with an Access Denied error.

A fix for this is to use the Webpack Inline Loader configuration to force the use of a different loader or loader config which prevents the base64 conversion, e.g.

<inline-svg
  :src="
    require('!file-loader!../assets/svg/icon.svg')
   "
/>