Creating SVG graphics using Javascript?

javascript graphics svg
user123757 picture user123757 · Jun 23, 2009 · Viewed 111.7k times · Source

How can I create SVG graphics using JavaScript?

Do all browsers support SVG?

Answer

schnaader picture schnaader · Jun 23, 2009

Have a look at this list on Wikipedia about which browsers support SVG. It also provides links to more details in the footnotes. Firefox for example supports basic SVG, but at the moment lacks most animation features.

A tutorial about how to create SVG objects using Javascript can be found here:

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");

Related questions

Scripting <path> data in SVG (reading and modifying)

Can anyone really really help me, please? I've been searching for ways to run scripts for my SVG. But all the things i got doesn't match up! And it doesn't contain enough information why he used that set of codes. …

Read More
Fast rectangle to rectangle intersection

What's a fast way to test if 2 rectangles are intersecting? A search on the internet came up with this one-liner (WOOT!), but I don't understand how to write it in Javascript, it seems to be written in an ancient form …

Read More
Javascript drawing library?

Any suggestion for a JavaScript interactive drawing library? Just need to draw lines, polygons, texts of different colors. IE/Firefox/Opera/Safari compatible. ­­­­­­­­­­­­­­­­­­­­­­­­­­

Read More