JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<svg height="128" width="128">
<image x="32" y="32" width="64" height="64" xlink:href=""></image>
</svg>
</div>

<button id="reparse">Reparse</button>
<button id="setattr">setAttribute</button>
<button id="setattrns">setAttributeNS</button>

<p>
    Displaying an image in an embedded SVG document is no problem. However, when the embedded SVG is serialized and re-parsed through <code>.innerHTML</code>, Chrome strips the <code>xlink:</code> namespace from the image's <code>href</code> attribute and it fails to be displayed.
</p>

<p>
    Attempting to re-assign the attribute correctly has no effect; Chrome strips the namespace from the new attribute.
</p>

CSS

#container {
    height: 128px;
    width: 128px;
    padding: 32px;
    border: 1px solid green;
}

svg {
    border: 1px solid blue;
}

body, p {
    padding: .5em;
}

JavaScript

var container = document.getElementById( "container" ),
    src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("reparse").onclick = function() {
  var html = container.innerHTML;
  container.innerHTML = "Reparsing SVG...";
  
  setTimeout( function() {
    container.innerHTML = html;
  }, 0);
}
    
document.getElementById("setattr").onclick = function() {
  var image = document.querySelector("svg image");
  image.setAttribute( "xlink:href", src );
}
    
document.getElementById("setattrns").onclick = function() {
  var image = document.querySelector("svg image");
  image.setAttributeNS( "xlink", "href", src );
}

/*
    Wait! When I reparse, then setAttribute, then reparse again, it works! What is this madness!?
    
    Chrome excludes the namespace when exporting because it assumes it doesn't need it, but it does. The namespace-unaware attribute is serialized normally, which results in a namespaced attribute when re-parsed? I guess this means the inspector was lying to me... nope. The assigned attribute *is* showing up now. Very very weird.
*/