Insert SVG document into HTML dynamically using JavaScript?

Question

How can I dynamically insert an SVG into HTML?

The problem right now is that the SVG is a document, and I can only find how to insert nodes. I have tried some different things to convert the SVG to a node, but have not found anything that works.

const svgDoc = new DOMParser().parseFromString(svgText, "text/html");
 
window.document.querySelector("#container").appendChild(svgDoc);

const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
    <title>My First Scalable Vector Graphic</title>
    <desc>An experimental SVG from SitePoint.com</desc>
    <g id="main">
      <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
      
      <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
      
      <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
      
      <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
      
      <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
      
      <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
      
      <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
    </g>
  </svg>
  `;

<div id="container"></div>

Robert Longson · Accepted Answer · 2020-03-19 11:27:19Z

Use document.documentElement to get the root element of a document.

const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
    <title>My First Scalable Vector Graphic</title>
    <desc>An experimental SVG from SitePoint.com</desc>
    <g id="main">
      <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
      
      <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
      
      <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
      
      <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
      
      <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
      
      <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
      
      <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
    </g>
  </svg>
  `;
  
const svgDoc = new DOMParser().parseFromString(svgText, "image/svg+xml");
 
window.document.querySelector("#container").appendChild(svgDoc.documentElement);

<div id="container"></div>

Collectives™ on Stack Overflow

Insert SVG document into HTML dynamically using JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related