JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="90%" height=500px id="svgRoot">
    <image xlink:href=/favicon.png id="img" 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) return ddData.element = null;
    
    ddData.initialX = evt.clientX;
    ddData.initialY = evt.clientY;
    ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'x' : 'cx'));
    ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? '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 != 'circle') {
            //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;
    clone();
    
}

function clone() {
    var root = document.getElementById('svgRoot');
    var newimage = document.getElementById('img').cloneNode(true);

    newimage.setAttribute("x", ddData.initialX);
    newimage.setAttribute("y", ddData.initialY);
    newimage.style.position = 'absolute';
    newimage.id = 'novoSVG';

    root.appendChild(newimage);
}