Creating SVG graphics using javascript?

Question

How can I create SVG graphics using Javascript? Do all browsers support SVG?

Answer 1

No not all browsers support SVG. I believe IE needs a plugin to use them. Since svg is just an xml document, JavaScript can create them. I am not certain about loading it into the browser though. I haven't tried that.

This link has information about javascript and svg:

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

Answer 2

I am not sure if you can create svg graphics on IE. Maybe I am wrong. I am interested in knowing more about this as well.

Answer 3

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

Answer 4

There's a jQuery plugin that allows you to manipulate SVG via Javascript:

http://plugins.jquery.com/project/svg

From its intro:

Supported natively in Firefox, Opera, and Safari and via the Adobe SVG viewer or Renesis player in IE, SVG lets you display graphics within your Web pages. Now you can easily drive the SVG canvas from your JavaScript code.

Answer 5

To do it cross-browser, I strongly recommend RaphaelJS: rapaheljs.com That has a hell of a good API and does VML in IE, that can't understand SVG.

Cheers,

Answer 6

IE needs a plugin to display SVG. Most common is the one available for download by Adobe; however, Adobe no longer supports or develops it. Firefox, Opera, Chrome, Safari, will all display basic SVG fine but will run into quirks if advanced features are used, as support is incomplete. Firefox has no support for declarative animation.

SVG elements can be created with javascript as follows:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

The SVG specification describes the DOM interfaces for all SVG elements. For example, the SVGCircleElement, which is created above, has cx, cy, and r attributes for the center point and radius, which can be directly access. These are SVGAnimatedLength attributes, which have a baseVal property for the normal value, and an animVal property for the animated value. Browsers at the moment are not reliably supporting the animVal property. baseVal is an SVGLength, whose value is set by the value property.

Hence, for script animations, one can also set these DOM properties to control SVG, and the following code should be equivalent to the above code:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);

Answer 7

I like jQuery SVG library very much. It helps me every time I need to manipulate with SVG. It really facilitate the work with SVG from JavaScript.