JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<button id="convert">convert to Image</button>
<svg id='newsvg' xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="640" style="height: 640px; width: 550px;">
    <path d="M240.03384399414062,225.38048553466797 C242.24496459960938,225.50019073486328 244.46658325195312,225.65926361083984 246.67189025878906,225.79724884033203 C247.68296813964844,225.8599624633789 247.1647186279297,225.99971771240234 247.31539916992188,226.5014419555664 C247.58795166015625,227.40824127197266 249.16021728515625,226.47933197021484 249.60202026367188,226.3200912475586 C250.1121826171875,226.1359634399414 251.1267852783203,225.96025848388672 251.4548797607422,225.53003692626953 C251.95925903320312,224.86817169189453 252.12042236328125,223.9324722290039 252.87637329101562,223.4143295288086 C254.55075073242188,222.2672348022461 255.88409423828125,224.11664581298828 256.79437255859375,222.2672348022461 C257.5863037109375,220.65717315673828 260.0467529296875,220.58097076416016 261.56683349609375,219.6885757446289 C262.98260498046875,218.85697174072266 263.7003173828125,217.13875579833984 265.4581298828125,216.71240997314453 C267.55572509765625,216.2040023803711 269.8990478515625,215.37725067138672 272.1252746582031,215.63477325439453 C274.5892028808594,215.92034149169922 274.0441589355469,216.10558319091797 275.6778869628906,214.82633209228516 C279.22021484375,216.86383819580078 275.4216613769531,220.7449722290039 276.4513244628906,223.3633041381836 C276.7087097167969,224.0191879272461 277.3603820800781,224.39456939697266 277.634033203125,224.97429656982422 C277.94012451171875,225.62371063232422 277.188720703125,226.29312896728516 277.0067443847656,226.88353729248047 C276.4651794433594,228.64611053466797 278.5325927734375,229.59540557861328 279.0009765625,230.9083480834961 C279.33843994140625,231.85387420654297 279.2317810058594,231.74385833740234 280.2104187011719,232.43753814697266...

JavaScript

$(document).ready(function () {
    $('#convert').click(function () {
        var CanvasImage, Context, svgCanvas, context, canvas, canvasImage, link;
        CanvasImage = $('<canvas id="canvas" ></canvas>');
        Context = CanvasImage[0].getContext("2d");
        CanvasImage[0].width = 550;
        CanvasImage[0].height = 640;
        Context.fillStyle = "white";
        Context.fillRect(0, 0, CanvasImage[0].width, CanvasImage[0].height);

        svgCanvas = $('<canvas id="canvas" width="250px" height="25px" style="display:none;"></canvas>');
        context = svgCanvas[0].getContext('2d');
        var fileName = 'GeoChart.png';
        var svgCanvasElement;
        var serializer = new XMLSerializer();
        var svg = serializer.serializeToString($('#newsvg')[0]);
        canvas = $(CanvasImage)[0]
        svgCanvasElement = $(svgCanvas)[0];
        var canvgMethod = new canvg(svgCanvasElement, svg);
        Context.drawImage(svgCanvasElement, 0, 0);
                link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
                link.href = canvas.toDataURL("image/png");
                link.download = fileName;
                var event = document.createEvent("MouseEvents");
                event.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                );
                link.dispatchEvent(event);
    });
});