JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<svg id="svg" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid transparent; cursor: default; fill: transparent;" width="1587" height="351">
            <g class="container" transform="translate(0,0)scale(1)">
                <image xlink:href="/images/image_gallery/Battery_Casing_RHSide.png" width="1587" height="351"></image>
                <g class="contents">
                    <g class="shapes"></g>
                <g class="ann" data-id="viz-ann-88" transform="translate(495.00189907860215,227.64285278320312)" style="cursor: grab;"><foreignObject x="0" y="0" width="102" height="30"><div class="response-box"><i class="fa fa-line-chart"></i> Volume Scale</div></foreignObject></g><g class="ann" data-id="viz-ann-53" transform="translate(726.1793730058743,108.10929107666014)" style="cursor: grab;"><foreignObject x="0" y="0" width="99" height="30"><div class="response-box"><i class="fa fa-line-chart"></i> Peak Volume</div></foreignObject></g><g class="ann" data-id="viz-ann-81" transform="translate(536.311107489899,65.21084594726561)" style="cursor: grab;"><foreignObject x="0" y="0" width="57" height="30"><div class="response-box"><i class="fa fa-line-chart"></i> name</div></foreignObject></g></g>
                
            </g>
        </svg>

JavaScript

var serializer = new XMLSerializer();
	var svgString = serializer.serializeToString(document.getElementById('svg'));
	svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
	svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix


var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");

	canvas.width = 800;
	canvas.height = 500;

	var image = new Image();
	image.onload = function() {
		context.clearRect ( 0, 0, canvas.width, canvas.height );
		context.drawImage(image, 0, 0, canvas.width, canvas.height);

		console.log(canvas.toDataURL('image/png'));

		
	};

	image.src = imgsrc;