JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div>
    <svg xmlns="http://www.w3.org/2000/svg"
          width="526" height="233">
      <rect x="13" y="14" width="500" height="200" rx="50" ry="100"
          fill="none" stroke="blue" stroke-width="10" />
    </svg>
</div>
<canvas></canvas>

JavaScript

var html = document.querySelector("svg").parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");
    canvas.setAttribute('width', 526);
    canvas.setAttribute('height', 233);

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([html], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  context.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
    var canvasdata = canvas.toDataURL("image/png");
      var a = document.createElement("a");
      a.textContent = "save";
      a.download = "export_"+Date.now()+".png";
      a.href = canvasdata; 
      document.body.appendChild(a);
      canvas.parentNode.removeChild(canvas);
}

img.src = url;