JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="90%" height=500px>
    <image id=img1 data-type="img1" xlink:href=/favicon.png x=0 y=0 height=20 width=20 class="img1" />
</svg>

CSS

.img{cursor:move;}

JavaScript

var svg = document.querySelector('svg');
		
	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,
		finalX: 0,
		finalY: 0,
		contadorElementos: 1,
		movidos: {},
		index: 0
	};

	//start move	
	function mousedown(e) {
			e.preventDefault();
			var evt = e || window.event;
			ddData.element = evt.target || evt.srcElement;
		
    
    
    
	};