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
The javascript for SVG is a little different, since they are in different namespaces. On quick research, I couldn't find exactly where I learned this, but I did find an old SO question which does show the how it is created a little differently. Since I haven't personally researched it, I can only suggest that the outerHTML function doesn't work, and you must find the SVG namespace equivalent. Try researching on w3.org site for more info on this.
Edit: After further research, please try creating your SVG element (rather than using a string).
For example:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "640");
...
document.getElementById("div").appendChild(svg);