JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="90%" height=500px >	
    <rect id=1 ry=0 rx=0 x=50 y=50 width=20px height=20px fill=red />
    <image xlink:href=image.png x=0 y=0 height=20 width=20 />
<svg>

JavaScript

var svg = document.querySelector('svg');
	
	//create rect
	var shape = document.createElementNS(
		"http://www.w3.org/2000/svg", "image");

	svg.appendChild(shape);
	svg.addEventListener('mousedown', mousedown);
	
	var ddData = {
		element: null,
		initialX: 0,
		initialY: 0,
		originalX: 0,
		originalY: 0
	};

	//start move	
	function mousedown(evt) {
		var evt = evt || window.event;
		ddData.element = evt.target || evt.srcElement;
		if (!ddData.element.id) return ddData.element = null;
		ddData.initialX = evt.clientX;
		ddData.initialY = evt.clientY;
		ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName == 'rect' ? 'x' : 'cx'));
		ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName == 'rect' ? 'y' : "cy"));
	};
	
					
	svg.onmousemove = function (evt) {
		var evt = evt || window.event;
		var el = ddData.element;
		if (el) {
			var posX = ddData.originalX + evt.clientX - ddData.initialX;
			var posY = ddData.originalY + evt.clientY - ddData.initialY;
			if (el.tagName == 'rect') {
				//move object
				el.setAttributeNS(null, "x", posX);
				el.setAttributeNS(null, "y", posY);
			} else {
				el.setAttributeNS(null, "cx", posX);
				el.setAttributeNS(null, "cy", posY);
			}
		}
	}

	//stops drag movement
	svg.onmouseup = function (evt) {
		var evt = evt || window.event;
		ddData.element = null;
	}