JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" width=500px height=400px>
    <svg class="svg-editor" id="myViewer" width="1400" height="1400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" style="overflow:scroll;margin:0;">
                <g id="base" name="base" class="svg-editor-layer"><title>base</title><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="400" y1="200" x1="200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="600" y1="200" x1="500"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="1200" y1="200" x1="800"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="300" x2="1200" y1="200" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="705" x2="1200" y1="400" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="950" x2="1200" y1="795" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="1200" y1="1050" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="1050" y1="1200" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="750" y1="1200" x1="950"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="450" y1="1200" x1="650"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="200" y1="1200" x1="350"></line><line stroke="#000000"...

JavaScript

var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;
    
    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };
    
    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG
    alert("see console for output...");
});