Svg: Converting Escaped Svg String And Appending To Body Does Nothing

The code below is supposed to convert the serialized SVG string inside the svgString element and append it to the body. Nothing happens, however. This question and similar questio

Solution 1:

A few things.

First you want your DOMParser to see < and other HTML entities as the rendered < character. So don't use innerHTML, but textContent as source for your DOMParser.

Once you'll have done that, you will need to target your HTML document's body's innerHTML if you want to clone the <svg> markup into your doc, but you might very well also just want to import this parsed Node directly.

// ue the textContent as markup sourcevar svgString = document.getElementById("svgString").textContent;
var svgDoc1 = newDOMParser().parseFromString(svgString, "text/html")
var svgDoc2 = newDOMParser().parseFromString(svgString, "image/svg+xml");

// target the HTML markupdocument.getElementById("result1").innerHTML = svgDoc1.body.innerHTML;
// or even directlyvar svgEl = svgDoc2.querySelector('svg');
document.importNode(svgEl); // play safetydocument.getElementById("result2").appendChild(svgEl);

<divid="svgString"style="display:none">&lt;svg id="designBox" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;&lt;svg class="background designBackground" x="0%" y="0%" width="100%" height="100%"&gt;&lt;rect x="0" y="0" width="100%" height="100%" fill="#00B9FC" fill-opacity="1.00"/&gt;&lt;/svg&gt;&lt;svg id="imageBox1" class="imageBox selectable movable box" x="10%" y="20%" width="80%" height="74.39945404913558%" preserveAspectRatio="true"&gt;&lt;image class="image" x="5.874026893135174%" y="2.707454289732771%" width="88.25194621372965%" height="94.58509142053447%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/bzm1y7tjrhl872s/Screenshot.png?raw=1"/&gt;&lt;image class="background" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="/images/iPhone/XS_Max_Gold.png"/&gt;&lt;/svg&gt;&lt;svg id="textBox1" class="textBox selectable movable box" x="0" y="0" width="100%" height="20%"&gt;&lt;rect class="background" x="0" y="0" width="100%" height="100%" fill="gray" fill-opacity="0.0"/&gt;&lt;text class="tspanGroup" y="50%"&gt;&lt;tspan class="textLine selectable" x="50%" dy="-0.9em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFFFFF"&gt;Change This Line&lt;/tspan&gt;&lt;tspan class="textLine selectable" x="50%" dy="1.8em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFF"&gt;Change This Line, Too&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;&lt;svg id="guideBox" width="100%" height="100%"/&gt;&lt;svg id="selectionBox" width="100%" height="0%" pointer-events="none"&gt;&lt;rect class="background" x="0" y="0" width="100%" height="100%"/&gt;&lt;/svg&gt;&lt;/svg&gt;</div><divid="result1"></div><divid="result2"></div>