CODEWITHSUNDEEP
javascripthtmlsvgdownloadanchor
A T
A T

Reputation: 13846

Button for downloading SVG in JavaScript & HTML?

There's an SVG image that's rendered in the browser. I want a button below to download the SVG. Looks like download with proper mimetype is the way to go.

Attempt:

<div id="container"></div>
<button id="download">Download SVG</button>

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();
}

Runnable example: https://stackblitz.com/edit/typescript-mpk8ui

But I get a broken SVG file. Similar issue with my real code (I get an empty SVG).

Upvotes: 5

Views: 5086

Answers (1)

suish
suish

Reputation: 3353

The downloading data must be a blob raw data.

function downloadSVG() {
  const svg = document.getElementById('container').innerHTML;
  const blob = new Blob([svg.toString()]);
  const element = document.createElement("a");
  element.download = "w3c.svg";
  element.href = window.URL.createObjectURL(blob);
  element.click();
  element.remove();
}

This should do the trick.

Upvotes: 11

Related Questions