title: Button for downloading SVG in JavaScript & HTML?
body: <p>There's an SVG image that's rendered in the browser. I want a button below to download the SVG. Looks like <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download" rel="nofollow noreferrer"><code>download</code></a> with proper mimetype is the way to go.</p>
  
  <p>Attempt:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;&lt;/div&gt;
  &lt;button id="download"&gt;Download SVG&lt;/button&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function downloadSVG() {
      const svg = document.getElementById('container').innerHTML;
      /*console.info(btoa(svg));
  
      document.getElementById('svg').src = `data:image/svg+xml;utf8,${document.createTextNode(svg).textContent}`;
      console.info('src:', document.getElementById('svg').src, ';');*/
  
      const element = document.createElement('a');
      const mimeType = 'image/svg+xml'; // 'image/svg+xml;utf8';
      element.href = `${mimeType},${document.createTextNode(svg).textContent}`;
      element.target = '_blank';
      element.mimeType = mimeType;
      element.download = 'w3c.svg';
      element.id = 'downloader';
      document.body.appendChild(element);
      element.click();
      document.getElementById('downloader').remove();
  }
  </code></pre>
  
  <p>Runnable example: <a href="https://stackblitz.com/edit/typescript-mpk8ui" rel="nofollow noreferrer">https://stackblitz.com/edit/typescript-mpk8ui</a></p>
  
  <p>But I get a broken SVG file. Similar issue with my real code (I get an empty SVG).</p>