Creating SVG graphics using Javascript

Question

How can I create SVG graphics using JavaScript   Do all browsers support SVG

User · Answer

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

User · Answer

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

User · Answer

Currently all major browsers support svg  Create svg in JS is very simple  currently innerHTML     is quite fast  element innerHTML          lt svg viewBox  quot 0 0 400 100 quot   gt         lt circle id  quot circ quot  cx  quot 50 quot  cy  quot 50 quot  r  quot 50 quot  fill  quot red quot    gt       lt  svg gt       x000D   x000D  function createSVG       box innerHTML          lt svg viewBox  0 0 400 100   gt         lt circle id  circ  cx  50  cy  50  r  50  fill  red    gt       lt  svg gt          function decRadius       r circ getAttribute  r      circ setAttribute  r  r 0 5     x000D   lt button onclick  createSVG    gt Create SVG lt  button gt   lt button onclick  decRadius    gt Decrease radius lt  button gt   lt div id  box  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

I found no complied answer so to create circle and add to svg try this    x000D   x000D  var svgns    http   www w3 org 2000 svg   x000D  var svg   document getElementById  svg    x000D  var shape   document createElementNS svgns   circle    x000D  shape setAttributeNS null   cx   25   x000D  shape setAttributeNS null   cy   25   x000D  shape setAttributeNS null   r    20   x000D  shape setAttributeNS null   fill    green    x000D  svg appendChild shape   x000D   lt svg id  svg  width  100  height  100  gt  lt  svg gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Creating SVG graphics using Javascript?

Examples related to javascript

Examples related to graphics

Examples related to svg