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

javascript jquery html svg

25,354

Solution 1

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

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

var newSvg = document.getElementById('myDiv');
newSvg.outerHTML += '<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height="100"><circle cx="40" cy="40" r="40" stroke="red" stroke-width="4" fill="blue" /></svg>';

<div id="myDiv"></div>

Solution 2

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);

25,354

Author by

MarkL

Updated on November 17, 2020

Comments

MarkL over 3 years
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 by a compiled authoring software application so I can't tamper with it. I can only "inject" javascript to create additional assets (ex: Divs) as needed.

See below for markup. [Portions of html markup have been omitted for clarity.]
```
<html>
....
<script>
function run()  {
var newSvg = document.getElementById('myDiv'); 
newSvg.outerHTML+='<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="400" cy="400" r="40" stroke="red" stroke-width="4" fill="blue" />';
}
</script>
<body>
....
<div id="myDiv"></div>
....
<script>
run();
</script>
</body>
</html>
```
If I place the SVG markup in the destination location manually, page and SVG renders properly. If I try to create markup dynamically, I get nothing.

When I view html source after page loads there is no markup for the SVG which should have been created by the function.

I have tried doing via a <body onLoad="run()"> event but it also does not work.

Note: This function has worked fine when I need to create a new DIV dynamically.

What am I doing wrong? Thanks in advance to all.
MarkL over 8 years

Thanks for the feedback. I made all the corrections you mentioned, even used your code, but it still doesn't render. I think t1nr2y is probably right. I will research that angle.
MarkL over 8 years

Thanks for the feedback. I made all the corrections you and Holger Will mentioned, even used your code, but it still doesn't render. I think t1nr2y is probably right. I will research that angle.
MarkL over 8 years

Thanks for the feedback. I will research that angle.
t1nr2y over 8 years

@MarkL you are welcome. I decided to look again on the w3 site for more info, and I found this w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript, hope it helps!
MarkL over 8 years

I'll try that. I did some thinking and feel like although the namespace issue is there, I am now leaning on the issue being timing related. The call for (newSvg.outerHTML+= '...string...') is simply appending a html tag (mydiv) with a string (my SVG markup). It should at least appear in the source for my rendered page. But it isn't. That is why I am thinking it is timing related. To test my theory I place an alert before the (newSvg.outerHTML+=) call and now I am getting the SVG properly rendered.
t1nr2y over 8 years

@MarkL, a timing issue does make sense, I was trying to figure out how the other answers were working in their snippets as compared to why yours was not. I will research a little on timing of SVG and let you know if I find anything of use
MarkL over 8 years

Thanks. The behavior on these pages seems to have normalized and even the timing issue seems to have gone away [not sure why; maybe our server is more responsive today...]
MarkL over 8 years

One thing I did notice. When I place SVG markup on the page manually, IE is somewhat forgiving if I forget a quote, meaning it will render the SVG fine. Now, if I have a missing quote in the "newSvg.outerHTML+=" it won't render at all. Since my SVG markup is coming from SVGs created in another application (I used Inkscape to generate the SVG markup), I have to be extra careful when copy-pasting, removing white space, tabs, and carriage returns from the Inkscape generated SVG markup.
MarkL over 8 years

Also noted that IE 11 is forgiving if you don't declare the namespace attribute (xmlns="w3.org/2000/svg")....while FF is not.