How to add SVG element from String to DOM

Question

I would like to add SVG which includes rect and use tags from a string to the DOM.

I doesn't seams to work the way I do.

 var documentAsString = '<?xml version="1.0" encoding="UTF-8"?>\\ <document xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\\ <svg id="container" >\\ <g xmlns:xlink="http://www.w3.org/1999/xlink">\\ <rect x="50" y="50" width="50" height="50" fill="red"/>\\ <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="200" y="50" fill="blue"></use>\\ </g>\\ </svg>\\ </document>\\ '; var newDocument = (new DOMParser()).parseFromString(documentAsString, "text/xml"); var container = newDocument.getElementById("container"); var useContainer = document.getElementById('use-container'); useContainer.removeChild(useContainer.firstElementChild); useContainer.appendChild(container.getElementsByTagName('g')[0]);

 <svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <g id="use-container" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" width="50" height="50" fill="red"></rect> </g> </svg>

Answer 1

The SVG element needs to be in the svg namespace ie have an xmlns attribute with the appropriate value...

 var documentAsString = '<?xml version="1.0" encoding="UTF-8"?>\\ <document xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\\ <svg xmlns="http://www.w3.org/2000/svg" id="container" >\\ <g xmlns:xlink="http://www.w3.org/1999/xlink">\\ <rect x="50" y="50" width="50" height="50" fill="red"/>\\ <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="200" y="50" fill="blue"></use>\\ </g>\\ </svg>\\ </document>\\ '; var newDocument = (new DOMParser()).parseFromString(documentAsString, "text/xml"); var container = newDocument.getElementById("container"); var useContainer = document.getElementById('use-container'); useContainer.removeChild(useContainer.firstElementChild); useContainer.appendChild(container.getElementsByTagName('g')[0]);

 <svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <g id="use-container" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" width="50" height="50" fill="red"></rect> </g> </svg>