title: Can't change SVG innerHTML in IE
body: <p>I can't change the SVG code (innerHTML) of an svg using JavaScript in Internet Explorer.</p>
  
  <p>If I go to inspect element on IE, and select the svg, it only has:</p>
  
  <p><code>&lt;svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 0 0" preserveAspectRatio="xMidYMid meet" type="shape"&gt;&lt;g /&gt;&lt;/svg&gt;</code></p>
  
  <p>The code I used was:</p>
  
  <pre><code>document.getElementsByTagName("svg")[0].innerHTML = '&lt;svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880"&gt;
  &lt;rect width="100%" height="100%" fill="rgb(255,255,255)"/&gt;&lt;rect x="0" y="0" width="81" height="81" fill="rgb(179,146,5)"/&gt;&lt;rect x="560" y="160" width="81" height="81" fill="rgb(67,123,235)"/&gt;&lt;rect x="0" y="80" width="81" height="81" fill="rgb(0,0,0)"/&gt;&lt;rect x="80" y="80" width="81" height="81" fill="rgb(0,0,0)"/&gt;
  &lt;/svg&gt;';
  </code></pre>
  
  <p>In Chrome (for example) it shows the svg like this:
  <img src="https://i.postimg.cc/QCc9B9zB/Capture.png" alt="Example"></p>
  
  <p>But in IE, it's just blank.</p>