How do I manipulate the SVG DOM and create elements?

Question

How do I get the SVG DOM root, and start adding children to it, programmatically, instead of adding SVG elements by markup?

Answer 1

<svg xmlns="http://www.w3.org/2000/svg">
  <script>
    var svg   = document.documentElement;
    var svgNS = svg.namespaceURI;

    var circle = document.createElementNS(svgNS,'circle');
    circle.setAttribute('cx',100);
    circle.setAttribute('cy',200);
    circle.setAttribute('r',50);
    circle.setAttribute('fill','red');
    circle.setAttribute('stroke','black');
    circle.setAttribute('stroke-width','20px');
    circle.setAttribute('stroke-opacity','0.5');

    svg.appendChild(circle);
  </script>
</svg>

Seen in action: http://phrogz.net/SVG/create-circle.svg

Because it can be so cumbersome to issue all those setAttribute calls, I often use a function like this:

// Create an SVG element on another node with a set of attributes.
// Attributes with colons in the name (e.g. 'xlink:href') will automatically
// find the appropriate namespace URI from the SVG element.
// Optionally specify text to create as a child node, for example
//   createOn(someGroup,'text',{x:100,'text-anchor':'middle'},"Hello World!");
function createOn(root,name,attrs,text){
  var doc = root.ownerDocument, svg = root;
  while (svg.tagName!='svg') svg = svg.parentNode;
  var el = doc.createElementNS(svg.namespaceURI,name);
  for (var a in attrs){
    if (!attrs.hasOwnProperty(a)) continue;
    var p = a.split(':');
    if (p[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+p[0]),p[1],attrs[a]);
    else el.setAttribute(a,attrs[a]);
  }
  if (text) el.appendChild(doc.createTextNode(text));
  return root.appendChild(el);
}

In action, the above file becomes more simply:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <script>
    var svg = document.documentElement;
    createOn(svg,'circle',{
      cx:100, cy:200, r:50,
      fill:'red', stroke:'black',
      'stroke-width':'20px', 'stroke-opacity':0.5
    });
    // …function from above…
  </script>
</svg>

Seen in action: http://phrogz.net/svg/create-circle-2.svg