<!DOCTYPE html>
<html>
<body>
  <svg id="svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="100" height="100" fill="red"/>
  </svg>

  <script>
    var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    img.setAttribute('width', '100');
    img.setAttribute('height', '100');
    img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'data:image/svg+xml,' +
      '<svg xmlns="http://www.w3.org/2000/svg">' +
      '  <rect width="100" height="100" fill="green"/>' +
      '</svg>');

    var inactive_doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
    // First, insert into an inactive doc.
    inactive_doc.documentElement.appendChild(img);
    // Then re-insert into the current doc.
    document.getElementById('svg').appendChild(img);
  </script>
</body>
</html>