JSFiddle - React, Tailwind, and code Playground

by Iblasi

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Blob.js"></script><!-- https://github.com/eligrey/Blob.js -->
<script src="FileSaver.js"></script><!-- https://github.com/eligrey/FileSaver.js -->

</head>
<body>
	<div id="bg">
		<div class="path">
		 	<!--<img src="Sample_svg.svg" class="svg" />-->
			<img src='data:image/svg+xml;utf8,
				<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
					<path d="M0 0 0 200 200 200 200 0 "/>
					<path d="M0 200 0 400 200 400 200 200 "/>
					<path d="M200 0 200 200 400 200 400 0 "/>
					<path d="M200 200 200 400 400 400 400 200 "/>
				</svg>
			' class="svg" />
		 </div>
		 <div class="bg">
		 	<!--<img src="Sample_Bg.png" />-->
		 	<img src="https://imgur.com/olRQfPy.png" />
		 </div>
	</div>
	<div id="savebutton">
		<button onclick="writeDownloadLink()">Save PNG</button>
	</div>
</body>
</html>

CSS

#bg div{
		position:absolute;	
		top:0px;
		left:0px;
	}
	#bg .path{
		z-index:1;	
	}
	#bg .bg{
		z-index:0;	
	}
	path{
		fill:transparent;
	}
	path:hover{
		fill:rgba(255,255,255,0.6);
		cursor:pointer;
	}
	path.selected{
		fill:rgba(255,255,255,0.6);	
	}
	#savebutton {
		position:absolute;	
		top:0px;
		left:400px;
	}

JavaScript

$(document).ready(function(e) {
		$('img.svg').each(function(){
				var $img = jQuery(this);
				var imgID = $img.attr('id');
				var imgClass = $img.attr('class');
				var imgURL = $img.attr('src');
		
				jQuery.get(imgURL, function(data) {
					// Get the SVG tag, ignore the rest
					var $svg = jQuery(data).find('svg');
		
					// Add replaced image's ID to the new SVG
					if(typeof imgID !== 'undefined') {
						$svg = $svg.attr('id', imgID);
					}
					// Add replaced image's classes to the new SVG
					if(typeof imgClass !== 'undefined') {
						$svg = $svg.attr('class', imgClass+' replaced-svg');
					}
		
					// Remove any invalid XML tags as per http://validator.w3.org
					$svg = $svg.removeAttr('xmlns:a');
		
					// Replace image with new SVG
					$img.replaceWith($svg);
					
					$('path').click(function(){
						if($(this).attr("class")=="selected"){
							$(this).attr("class", "");
						}
						else{
							$(this).attr("class","selected");
						}
					});
		
				}, 'xml');
		});
});


function writeDownloadLink(){
	try {
		var isFileSaverSupported = !!new Blob();
	} catch (e) {
		alert("blob not supported");
	}
	/*
	var blob = new Blob([mySVG], {type: "image/svg+xml"});
	saveAs(blob, "mySVG_selection.png");
	*/
}