Dynamically created SVG is rendered into HTML but not displayed properly

Question

I am creating an SVG element dynamically and appending it to another element in the page. The page displays the SVG element that is part of the HTML DOM written in the file, but it does not display the dynamically created one from Javascript.

I examined the rendered HTML output and found no difference between the dynamically created SVG and the one specified in the HTML file.

var out = document.getElementById("output");
var svg = document.createElement("svg");
svg.setAttribute("width",50);
svg.setAttribute("height",50);
svg.setAttribute("style","background-color:#bada55");
svg.innerHTML = "why is this not displayed as SVG?";
out.appendChild(svg);

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
</div>

What am I doing wrong?

Edit:

PS: I am using Chrome, and the way I see the output is: The beige SVG is rendered correctly, with no text inside it. The green SVG (dynamically created) appears as if it was a <span> with the text appearing inside it.

Here is an image of what I see:

And here is the rendered HTML:

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
  <svg width="50" height="50" style="background-color:#bada55">why is this not displayed as SVG?</svg>
</div>

@Mamun aside from the styling colors, made it different for the purpose of the question — Ahmad, Dec 24 '18 at 05:53
With the code you have, how you want the second svg to be rendered? — Mamun, Dec 24 '18 at 05:59
The output should be two squares, one beige and one green. I am seeing the first beige square, but the other one is a green rectangle with text inside it @Mamun — Ahmad, Dec 24 '18 at 06:01
@NarendraMongiya I added an image of the output I see. The green SVG appears AS IF it was a span — Ahmad, Dec 24 '18 at 06:03
you need to use `createElementNS` and `setAttributeNS` where **NS** stands for namespace — enxaneta, Dec 24 '18 at 06:06
Also see https://stackoverflow.com/questions/8173217/createelement-vs-createelementns — Herohtar, Dec 24 '18 at 06:10

score 2 · Accepted Answer · answered Dec 24 '18 at 06:14

use createElementNS and that will solve your problem.

var out = document.getElementById("output");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'background-color:#bada55');
svg.setAttribute('width', '50');
svg.setAttribute('height', '50');
svg.innerHTML = "why is this not displayed as SVG?";
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

out.appendChild(svg);

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
</div>

Dynamically created SVG is rendered into HTML but not displayed properly

Edit:

1 Answers1