Creating SVG graphics using Javascript?

Question

How to create SVG graphics using Javascript?

Are all SVG browsers supported?

Answer 1

Check out this list on Wikipedia about which browsers support SVG. It also contains links to more detailed information in footnotes. For example, Firefox supports basic SVG, but most animation features are currently lacking.

A tutorial on 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"); 

Answer 2

This answer is from 2009. Now the community wiki if anyone wants to update it.

IE needs a plugin to display SVG. The most common is the one available for download by Adobe; however, Adobe no longer supports or develops it. Firefox, Opera, Chrome, Safari, everyone will display the basic SVG perfectly, but will run into quirks when using advanced features, as support is incomplete. Firefox does not support declarative animation.

SVG elements can be created using 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 DOM interfaces for all SVG elements. For example, the SVGCircleElement created above has the attributes cx , cy and r for the center point and radius, which can be directly accessed. These are the SVGAnimatedLength attributes, which have the baseVal property for the normal value and the animVal property for the animated value. Browsers do not currently reliably support the animVal property. baseVal is an SVGLength whose value is set by the value property.

Therefore, to animate a script, you can also set these DOM properties to control SVG. The following code should be equivalent to the code above:

 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 3

To do this cross browser, I highly recommend RaphaelJS . It has a damn good API and does VML in IE that SVG cannot understand.

Answer 4

All modern browsers except IE support SVG

Here is a tutorial that provides a step-by-step guide on working with SVG using javascript:

SVG Scripting with JavaScript Part 1: A Simple Circle

Like Boldewyn said, if you want

To do this cross browser, I highly recommend RaphaelJS: rapaheljs.com

Although now I feel that the size of the library is too large. It has many great features, some of which you might not need.

Answer 5

I like jQuery SVG library. This helps me every time I need to manipulate using SVG. This really makes it easier to work with SVG with JavaScript.

Answer 6

I did not find the answer, so to create a circle and add to svg try the following:

 var svgns = "http://www.w3.org/2000/svg"; var svg = document.getElementById('svg'); var shape = document.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svg.appendChild(shape); 

 <svg id="svg" width="100" height="100"></svg> 

Answer 7

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'm not sure if I downloaded it to the browser. I have not tried this.

This link has information on javascript and svg:

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

Answer 8

There is a jQuery plugin that allows you to manipulate SVG through Javascript:

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

From his introduction:

Supported natively in Firefox, Opera, and Safari, and through Adobe SVG viewer or Renesis player in IE, SVG allows you to display graphics in your web page. Now you can easily manage your SVG canvas from your JavaScript code.

Answer 9

You can use d3.js. It is easy to use and efficient.

D3.js is a JavaScript library for managing data-based documents. D3 helps you bring your data to life with HTML, SVG, and CSS.

Answer 10

In SVG graphics, there are several libraries using Javascript: Snap, Raphael, D3. Or you can directly associate SVG with simple javascript.

Currently, all recent browsers support SVG v1.1. SVG v2.0 is in the working draft and it is too early to use it.

This article shows how to interact with SVG using Javascript and links to browser support links. Interaction with SVG

Answer 11

IE 9 now supports basic SVG 1.1. The time has come, although IE9 is still far behind support for Google Chrome and Firefox SVG.

http://msdn.microsoft.com/en-us/ie/hh410107.aspx

Answer 12

So, if you want to build your SVG material in parts in JS, then do not just use createElement() , they will not be drawn, use this instead:

 var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");