Dynamically created SVG elements are not rendered by the browser

Question

I am trying to use SVG markup in my HTML in order to render some graphics. The problem was very tricky because I just realized that the issue is when generating the SVG programmatically.

The markup

What I want to end up in my page is this fragment of code:

<svg>
  <circle cx="20" cy="20" r="15"></circle>
</svg>

If you take this and paste it inside a page, all is fine and the a black circle is rendered!

Creating the SVG dynamically

But I want to create this content using Javascript, so I have this:

var container = document.createElement("div");
var svg = document.createElement("svg");

var circle = document.createElement("circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);

Well, try to execute this in fiddle or in your browser and you'll see it will not be rendered. When you inspect the HTML, you see that the circle is not taking any space.

What is the problem?

Answer 1

you have to use "document.createElementNS("http://www.w3.org/2000/svg", "svg");" to create svg elements

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);

Answer 2

While you have to use document.createElementNS("http://www.w3.org/2000/svg", "svg"); to create the parent svg element, you are not strictly required to use that method for the child elements to get a functioning graphic on your page. Calling createElementNS() for each child could become especially cumbersome if you are using a more complex image, with multiple paths, defs, style, title, etc, for example something exported from a drawing program.

A quicker way that worked well for me, is to create the parent svg element, and then add all its contents in one go as innerHTML. Your specific example could be solved like so:

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgContent = '<circle cx="20" cy="20" r="15"></circle>';

svg.innerHTML = svgContent;
container.appendChild(svg);
document.body.appendChild(container);