svg to image download.html

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://unpkg.com/canvg@3.0.4/lib/umd.js"></script>
<button id="editor_save">OK</button>
<canvas id="canvas" style="display: none"></canvas>
<img src="">
<script type="text/javascript">
$("#editor_save").click(function() {
	var x = $("#editor").html();
	const canvas = document.querySelector('canvas');
	const ctx = canvas.getContext('2d');
	v = canvg.Canvg.fromString(ctx, x);
	v.start();
	var img = canvas.toDataURL("image/png");
	img = img.replace("image/png", "image/octet-stream");
	var link = document.createElement('a');
	link.download = 'filename.png';
	link.href = document.getElementById('canvas').toDataURL()
	link.click();
});
</script>
<div  id="editor">
<svg>
<svg xmlns="http://www.w3.org/2000/svg" height="536.448px" width="512.064px">
	<style>
	    rect{
	        fill:none;
	        stroke:black;
	        stroke-width:1;
	    }
	    .red{
	    	stroke:red;
	    }
	    .blue{
	    	stroke:blue;
	    }
	    text{
	        font-family:verdana;
	        alignment-baseline:middle; 
	        text-anchor:middle;
	        font-size:12.192px;
	    }
rect{
	fill: white;
}
g.kitchen>rect:nth-child(2){
	fill:#ffefc1;
}
g.bedroom>rect:nth-child(2){
	fill: #c0f5ba;
}
g.bath>rect:nth-child(2){
	fill:#eecccc;
}
g.wash>rect:nth-child(1){
	fill:#ace6e6;
}
rect.boundary{
	fill: #de9999; /* brown */
}
rect.inner{
	fill: white;
}
svg.steps>rect:nth-child(odd){
	fill:#e6acdc;
}
svg.steps>rect:nth-child(even){
	fill:#fdcbdb;
}
g.landing>rect:nth-child(1){
	fill: #ffafc9;
}
text{
	font-weight: bold;
}
</style>
<rect x="0px" y="0px" width="512.064px" height="536.448px" class="boundary"></rect><rect x="12.192px" y="12.192px" width="487.68px" height="512.064px" class="inner"></rect><rect x="268.224px" y="526.6944px" width="195.072px" height="7.3152px" class="red"></rect><g class="bedroom">
	<rect class="boundary" x="0px" y="0px" height="188.976px" width="358.4448px"></rect>
	<rect x="12.192px" y="12.192px" height="164.592px" width="334.0608px"></rect>
	<svg x="0px" y="0px" height="188.976px" width="358.4448px">
		<text x="50%" y="50%">13'8''x6'9''</text><text x="50%" y="60%">BED ROOM</text></svg></g><rect x="270.6624px" y="179.2224px" width="73.152px" height="7.3152px" class="red"></rect><g class="bath">
	<rect class="boundary" x="346.2528px" y="0px" height="188.976px" width="165.8112px"></rect>
	<rect x="358.4448px" y="12.192px" height="164.592px" width="141.4272px"></rect>
	<svg x="346.2528px" y="0px" height="188.976px" width="165.8112px">
		<text x="50%" y="50%">5'10''x6'9''</text><text x="50%" y="60%">BATH</text></svg></g><rect x="348.6912px" y="14.6304px" width="7.3152px" height="73.152px" class="red"></rect><g class="kitchen">
	<rect class="boundary" x="0px" y="176.784px" height="201.168px" width="256.032px"></rect>
	<rect x="12.192px" y="188.976px" height="176.784px" width="231.648px"></rect>
	<svg x="0px" y="176.784px" height="201.168px" width="256.032px">
		<text x="50%" y="50%">9'6''x7'3''</text><text x="50%" y="60%">Kitchen</text></svg></g><rect x="246.2784px" y="191.4144px" width="7.3152px" height="73.152px" class="red"></rect><g class="">
	<rect class="boundary" x="243.84px" y="176.784px" height="201.168px" width="268.224px"></rect>
	<rect x="256.032px" y="188.976px" height="176.784px" width="243.84px"></rect>
	<svg x="243.84px" y="176.784px" height="201.168px" width="268.224px">
		<text x="50%" y="50%">10'x7'3''</text><text x="50%" y="60%">HALL</text></svg></g><rect x="424.2816px" y="368.1984px" width="73.152px" height="7.3152px" class="red"></rect><svg class="steps" x="12.192px" y="377.952px"><g class="landing r">
	<rect x="0px" y="0px" height="146.304px" width="73.152px"></rect>
	<svg x="0px" y="0px" height="146.304px" width="73.152px">
		<text x="50%" y="40%">3'x6'</text><text x="50%" y="60%">Steps</text></svg></g><rect x="73.152px" y="0px" width="24.384px" height="73.152px" class=""></rect><rect x="97.536px" y="0px" width="24.384px" height="73.152px" class=""></rect><rect x="121.92px" y="0px" width="24.384px" height="73.152px" class=""></rect><rect x="146.304px" y="0px" width="24.384px" height="73.152px" class=""></rect><rect x="170.688px" y="0px" width="24.384px" height="73.152px" class=""></rect><rect x="73.152px" y="73.152px" width="24.384px" height="73.152px" class=""></rect><rect x="97.536px" y="73.152px" width="24.384px" height="73.152px" class=""></rect><rect x="121.92px" y="73.152px" width="24.384px" height="73.152px" class=""></rect><rect x="146.304px" y="73.152px" width="24.384px" height="73.152px" class=""></rect><rect x="170.688px" y="73.152px" width="24.384px" height="73.152px" class=""></rect></svg>
</svg>
</svg>
</div>