1

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 questions were consulted, but no luck.

What's the problem?

HTML:

<html>
  <body>
    <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>

 This is a test

</body>

</html>

JavaScript:

var svgString = document.getElementById("svgString").innerHTML;
var svgDoc1 = new DOMParser().parseFromString(svgString, "text/html")
var svgDoc2 = new DOMParser().parseFromString(svgString, "image/svg+xml");

document.getElementById("result1").innerHTML = svgDoc1.textContent;
document.getElementById("result2").innerHTML = svgDoc2.textContent;

console.log("SVG string: " + svgString);
Crashalot
  • 33,605
  • 61
  • 269
  • 439

1 Answers1

2

A few things.

First you want your DOMParser to see &lt; 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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • thanks so much for the prompt response! this is exactly the type of thing we would love to pay for so we can focus on building product and not SVG details. are you interested? here's another related SVG question if you have a moment: https://stackoverflow.com/questions/54001972/svg-how-to-scale-font-sizes-when-scaling-svg-document?noredirect=1#comment94843580_54001972 – Crashalot Jan 02 '19 at 09:03