Skip to content

Internet Explorer

Jump to bottom
waruyama edited this page Dec 10, 2018 · 1 revision

Internet Explorer

Internet Explorer 8 and older

Internet Explorer 8 and older versions do not support SVG, therefore SVG injection does not work. SVGInject is minified with IE8 compatibility, so linking to the SVGInject library will not cause an error on IE7/IE8. Refer to the fallback chapter for information on how to display a fallback PNG image on browsers that do not support SVG.

Internet Explorer 9

Internet Explorer 9 supports SVG, but some features, notably filters, are not. As a result some SVGs may look different on Internet Explorer 9 than on other browsers.

Responsive SVGs in Internet Explorer 11

To make SVGs responsive on our website with Internet Explorer 11 there is a trick introduced by Nicholas Gallagher, which uses an extra canvas element to make a SVG keeps the aspect ratio. The important part is that the canvas must have the same aspect ratio as the SVG.

With this trick applied, the structure of the inline SVGs may look like this:

<div style="position:relative;width:100%;">
  <canvas width="256" height="256"></canvas>
  <svg viewBox="0 0 256 256" preserveAspectRatio="xMaxYMax meet">
    ...
  </svg>
</div>
canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

With SVG-Inject the structure can be created automatically. The following script uses SVGInject's afterInject hook to add a canvas next to the SVG in Internet Explorer. This has to go into the <head> section of the document.

<script src="svg-inject.js"></script>
<script>
SVGInject.setOptions({
  beforeInject: function (img, svg) {
    if (/Trident|MSIE/.test(window.navigator.userAgent)) {
      // responsive SVGs (width: 100%; height: auto;) are not correctly positioned in Internet Explorer.
      // Solve this issue by wrapping the SVG in a div. The SVG is prepended by a canvas element to the SVG.
      var viewBoxVals = (svg.getAttribute('viewBox') || '').split(/[\s,]+/);
      var width = parseInt(viewBoxVals[2]);
      var height = parseInt(viewBoxVals[3]);
      if (width > 0 && height > 0) {
        // Use Euclidean algorithm to find the greatest common divisor of width and height in
        // order to create the smallest canvas possible with the SVG's width/height ratio.
        var whGcd = function gcd(a, b) { return b ? gcd(b, a % b) : a; }(width, height);

        // Add canvas using aspect ratio from viewBox
        var canvas = document.createElement('canvas');
        canvas.height = height / whGcd;
        canvas.width = width / whGcd;
        canvas.setAttribute('style', 'display:block; width:100%; height:auto; visibility:hidden;');

        // Adjust style of SVG and its parent to make SVG fill the space reserved by canvas
        // Also set overflow: hidden to work around another layout bug in IE 11.
        var svgStyle = svg.style;
        svgStyle.position = 'absolute';
        svgStyle.top = 0;
        svgStyle.overflow = 'hidden';

        var parentNode = img.parentNode;
        parentNode.style.position = 'relative';
        parentNode.insertBefore(canvas, img);
      }
    }
  }
});
</script>

Note that this also adds overflow: hidden to the SVG to work around a layout bug in Internet Explorer 11. Here is an example to reproduce the bug. Internet Explorer displays scrollbars when displaying the test case.

<!DOCTYPE html>
<html>
<head>
  <title>Internet Explorer SVG Layout Issue</title>
</head>
<body>
  <div style="position: relative; width: 200px; height: 200px; overflow: auto;">
    <canvas width="1" height="1" style="display: block; width: 100%;"> </canvas>
    <svg style="position: absolute; top: 0; left: 0; width: 100%; height: auto;" viewBox="0 0 100 100">
      <defs>
        <filter id="f1" color-interpolation-filters="sRGB">
          <feGaussianBlur stdDeviation="32" />
        </filter>
      </defs>
      <rect x="0" y="0" width="100" height="100" fill="red" filter="url(#f1)"/>
    </svg>
  </div>
</body>
</html>
Clone this wiki locally