Adding SVG element to an html file?

Question

I'd like to add some SVG elements to an html file. I'm finding links which say this is not supported, the document type must be xhtml.

But I am using some javascript libraries with html that allow me to use SVG in them (Raphael, SVG Web, etc).

So is there a way to add a script to an html file which can dynamically add an SVG element to the document at run time?

Thanks

I can use any doc type (i'm not up to speed with doc types) - this is just for a proof of concept, so I can use whatever doc type works, thanks. — user246114, Jan 24 '10 at 02:27

score 3 · Accepted Answer · edited Dec 10 '11 at 07:57

3

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "blue");

svgnode.appendChild(circle);
mydiv.appendChild(svgnode);

edited Dec 10 '11 at 07:57

Bakudan

17,636
9
48
69

answered Jan 24 '10 at 06:20

codedread

1,171
9
13

score 1 · Answer 2 · answered Jan 24 '10 at 07:24

You might want to take a look at svgweb, which allows you to put SVG directly into a <script> tag in HTML. It will also emulate SVG support using Flash for browsers which do not have native SVG support.

edit: Hmm. I just noticed that you mentioned svgweb already. In what way does it not do what you want? You might want to clarify your question.

Adding SVG element to an html file?

2 Answers2

Linked