JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Static</h1> <!-- works -->
<svg height="200" width="200" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="200" height="200" xlink:href="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"></image></svg>

<h1>Dynamic</h1> <!-- the image is missing -->
<svg id="dynamic" height="200" width="200" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

CSS

svg { border: 1px solid black; }

JavaScript

$(function() {
    var url = 'https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg';
    var $img = $(document.createElementNS('http://www.w3.org/2000/svg', 'image')).attr({width: 200, height: 200});
    $img.get(0).setAttributeNS('http://www.w3.org/1999/xlink','href',url);
    $('#dynamic').append($img);
});