Creating SVG graphics using Javascript?

Question

How can I create SVG graphics using JavaScript?

Do all browsers support SVG?

After 2 years svg development can say, that it nice thing, but without full support from all major browser it doesn't worse to be used. If you start a new app, choose another format instead. — Kamarey, Jun 26 '09 at 18:04
Anyone reading this question and answers, beware that much has evolved since the question was asked back in 2009 and SVG is now supported by all major browsers natively (don't need polyfills)! — Jeach, Mar 01 '13 at 19:44
Here is link to see actual supported browsers. http://caniuse.com/#feat=svg It's definetly save to use svg nowdays. — Lukas Liesis, Apr 12 '16 at 07:26

schnaader · Answer 1 · 2015-02-20T14:23:44.327

31

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

edited Feb 20 '15 at 14:23

answered Jun 23 '09 at 19:40

schnaader

49,103
10
104
136

any solution for firefox yet? – Dinesh Jan 02 '17 at 22:37
1

You should really explain `evt`. See themadmax's anwer for a solution that works. – AldaronLau Jun 15 '19 at 19:50

fuzzyTew · Answer 2 · 2019-06-25T19:51:10.367

This answer is from 2009. Now a community wiki in case anybody cares to bring it up-to-date.

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 accessed. These are the 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. 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);

This is no longer true and this answer should be updated or removed. — David Mårtensson, Apr 13 '14 at 19:29

score 17 · Answer 3 · edited Feb 01 '17 at 08:24

17

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

edited Feb 01 '17 at 08:24

Iulian Onofrei

9,188
10
67
113

answered Jun 24 '09 at 19:06

Boldewyn

81,211
44
156
212

score 8 · Answer 4 · edited May 23 '17 at 12:18

8

All modern browsers except IE support SVG

Here is a tutorial that provides step by step guide on how to work with SVG using javascript:

SVG Scripting with JavaScript Part 1: Simple Circle

Like Boldewyn has said already if you want

To do it cross-browser, I strongly recommend RaphaelJS: rapaheljs.com

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

edited May 23 '17 at 12:18

Community

1
1

answered Apr 26 '11 at 20:18

U.Ahmad

618
1
6
8

"All modern browsers except IE"? :) – tuomassalo Oct 24 '13 at 18:38
2

No IE version is modern. In the case of SVG, IE (through v11) does not support SMIL, so forget any interesting animations! – Geek Stocks Dec 06 '13 at 09:07

score 7 · Answer 5 · answered Sep 05 '10 at 15:04

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.

answered Sep 05 '10 at 15:04

Bakhtiyor

7,198
15
55
77

score 6 · Answer 6 · edited Sep 08 '17 at 05:03

I found no complied answer so to create circle and add to svg try this:

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>

score 2 · Answer 7 · answered Jun 23 '09 at 19:39

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

score 2 · Answer 8 · answered Jun 23 '09 at 19:44

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.

score 2 · Answer 9 · edited Mar 09 '14 at 02:02

2

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

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

edited Mar 09 '14 at 02:02

0xcaff

13,085
5
47
55

answered Sep 12 '13 at 07:43

Nikunj Aggarwal

423
2
7
18

Phil · Answer 10 · 2015-03-19T10:02:12.553

2

There are multiple libraries on SVG graphics using Javascript like: Snap, Raphael, D3. Or you can directly interface the SVG with plain javascript.

Currently all latest versions of the browsers support SVG v1.1. SVG v2.0 is in Working Draft and too early to use it.

This article shows how to interact with SVG using Javascript and has reference to links for browser support. Interfacing with SVG

edited Mar 19 '15 at 10:02

answered Mar 19 '15 at 09:47

Phil

1,200
13
17

score 0 · Answer 11 · answered Feb 19 '13 at 18:02

0

IE 9 now supports basic SVG 1.1. It was about time, although IE9 still is far behind Google Chrome and Firefox SVG support.

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

answered Feb 19 '13 at 18:02

dev4life

10,785
6
60
73

score 0 · Answer 12 · edited Mar 09 '14 at 02:01

0

So if you want to build your SVG stuff piece by piece in JS, then don't just use createElement(), those won't draw, use this instead:

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

edited Mar 09 '14 at 02:01

0xcaff

13,085
5
47
55

answered Sep 16 '13 at 08:07

OsamaBinLogin

609
6
10

Kamil Kiełczewski · Answer 13 · 2020-09-01T13:08:21.387

Currently all major browsers support svg. Create svg in JS is very simple (currently innerHTML=... is quite fast)

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;

function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}

<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>

Creating SVG graphics using Javascript?

13 Answers13

This answer is from 2009. Now a community wiki in case anybody cares to bring it up-to-date.

Linked