Create SVG Graphics Using JavaScript

All modern browsers support SVG and you can easily create it using JavaScript. Google Chrome and Firefox both support SVG.

With JavaScript, create a blank SVG document object model (DOM). Using attributes, create a shape like a circle or a rectangle.

var mySvg = "http://www.w3.org/2000/svg";
var myDoc = evt.target.ownerDocument;

var myShape = svgDocument.createElementNS(mySvg, "circle");

myShape.setAttributeNS(null, "cx", 40);
myShape.setAttributeNS(null, "cy", 40);
myShape.setAttributeNS(null, "r", 30);

myShape.setAttributeNS(null, "fill", "yellow");