JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.clker.com/cliparts/a/6/0/8/13450054841457633298glossy-blue-circle-button-md.png" image-rendering="optimizeQuality" x="20" y="20" width="60" height="60"></image>
</svg>

CSS

svg {
    background: #eee;
    transform: rotate(360deg);
}

JavaScript

var image = document.querySelector('image'),
    svg = document.querySelector('svg'),
    PIXELS_PER_SECOND = 0.6643,
    time = Date.now();

function animate() {
    var svgHeight = parseFloat(svg.getAttribute('height')),
        imgY = parseFloat(image.getAttribute('y')),
        now = Date.now(),
        additionalHeight = PIXELS_PER_SECOND * (now - time) / 1000;
    
    svg.setAttribute('height', svgHeight + additionalHeight);
    image.setAttribute('y', imgY + additionalHeight);
    
    time = now;
    
    window.requestAnimationFrame(animate);
}

animate();