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 source
var svgString = document.getElementById("svgString").textContent;
var svgDoc1 = new DOMParser().parseFromString(svgString, "text/html")
var svgDoc2 = new DOMParser().parseFromString(svgString, "image/svg+xml");

// target the HTML markup
document.getElementById("result1").innerHTML = svgDoc1.body.innerHTML;
// or even directly
var svgEl = svgDoc2.querySelector('svg');
document.importNode(svgEl); // play safety
document.getElementById("result2").appendChild(svgEl);

<div id="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>


<div id="result1"></div>
<div id="result2"></div>