JSFiddle - React, Tailwind, and code Playground

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>
    <a id='imgId'>Save</a>
</div>
<canvas></canvas>

JavaScript

var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg),
    blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
    url = window.URL.createObjectURL(blob);

var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = 730;
    canvas.height = 300;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, 730, 300);

    window.URL.revokeObjectURL(url);
    var canvasdata = canvas.toDataURL('image/png');
    var a = document.getElementById('imgId');
    a.download = "export_" + Date.now() + ".png";
    a.href=canvasdata;   
}
img.src = url