namespace

SVG and HTML have different namespaces. When HTML is read and parsed by the browser and it finds an <svg> tag, it automatically applies the correct namespace.

But if you just append an <svg> tag into the DOM yourself, that SVG won’t have the correct namespace by default, and thus it won’t behave like an SVG element.

To create a new SVG element in JavaScript with the proper namespace, you need to do something like this:

var svgElement = document.createElementNS("www.w3.org/2000/svg", "svg"); 

That goes for the SVG element and any child SVG element you append.