How can I add a SVG graphic dynamically using javascript or jquery?

Question

I am trying to create a SVG tag structure only when or after page loads.

This request may seem strange but this is needed since most of the html markup is generated

Answer 1

what you are doing is perfectly fine. There are some small flaws in your svg wich prevents it from showing up.

1. as t1nr2y points out, use the propper namespace (xmlns="http://www.w3.org/2000/svg")
2. the svg's height attribute is missing the quotes (height="100")
3. your svg elements is not closed (missing )
4. your circle is way outside your viewport (width="100" height="100" but cx="400" cy="400")

var newSvg = document.getElementById('myDiv');
newSvg.outerHTML += '';