convert SVG element to PNG and download it

download-svg-as-png.js

//takes an SVG element, draws it on a new canvas element, convert to dataURI type PNG and download it through clicking on <a>
//based on
//https://gist.github.com/mbostock/6466603
//https://gist.github.com/gustavohenke/9073132
//http://bl.ocks.org/biovisualize/8187844

export default (svg) => {
  const svgData = new XMLSerializer().serializeToString( svg );
  const svgSizes = svg.getBoundingClientRect();
  const canvas = document.createElement("canvas")
  canvas.height = svgSizes.height;
  canvas.width = svgSizes.width;
  
  const img = document.createElement( "img" );  
  img.onload = function() {
    canvas.getContext( "2d" ).drawImage(img, 0, 0);

    const a = document.createElement("a");
    a.download = "fallback.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
  };
  img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
}