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 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.

I just edited my answer with some more info, please see if that works for you. — t1nr2y
– t1nr2y, Commented Sep 17, 2015 at 19:45
What browser are you trying this on? Safari and IE don't support the creation of SVG content using outerHTML. — Robert Longson
– Robert Longson, Commented Sep 17, 2015 at 20:51
It was on IE (project requirements) but I'm bummed that it is not working on Firefox now. I got it working on IE (I think). I was hoping it would work on IE and FF.Thanks for the reminder. — MarkL
– MarkL, Commented Sep 17, 2015 at 21:15
I got it working in FF. I had forgotten to include the xmlns="w3.org/2000/svg" to use the proper namespace. IE 11 seems to not care right now. — MarkL
– MarkL, Commented Sep 17, 2015 at 21:26

Let Me Tink About It · Accepted Answer · 2017-08-20 06:42:06Z

18

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>

edited Aug 20, 2017 at 6:42

Let Me Tink About It

16.3k23 gold badges109 silver badges221 bronze badges

answered Sep 17, 2015 at 19:08

Holger Will

7,5761 gold badge35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarkL Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:52:58Z

8

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

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Sep 17, 2015 at 18:51

t1nr2y

6566 silver badges20 bronze badges

7 Comments

MarkL Over a year ago

Thanks for the feedback. I will research that angle.

t1nr2y Over a year ago

@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 a year ago

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 a year ago

@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 a year ago

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...]

|

Ruslan López · Accepted Answer · 2015-09-17 19:04:07Z

0

Your svg dimensions ( 100 x 100 ) are smaller than the position of your circle.

$(document).ready(function() {
  $('#myDiv').append('<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="4" cy="4" r="4" stroke="red" stroke-width="4" fill="blue" /></svg>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

answered Sep 17, 2015 at 19:04

Ruslan López

4,4752 gold badges30 silver badges40 bronze badges

1 Comment

MarkL Over a year ago

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.

Fireflies · Accepted Answer · 2020-11-17 03:36:26Z

0

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

This works well across all browsers.

answered Nov 17, 2020 at 3:36

Fireflies

12 bronze badges

Comments

Amy Ruddy · Accepted Answer · 2024-07-17 20:17:14Z

If you have the ability to modify CSS, a better way would be to create a div and give it an ID or class or add the class to the existing div... then add the styling with CSS. Also, OuterHTML() can have security implications.

const divSVG = document.querySelector('#myDiv').appendChild(document.createElement('div'))
divSVG.classList.add('svg','svg-app')

.svg-app {
  width:100px;
  height:100px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100px' viewBox='0 -960 960 960' width='100px' fill='%238C1AF6'%3E%3Cpath d='M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm0-240q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm0-240q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640ZM480-400q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm40 240v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E");
}

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

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

7 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related