Stack Overflow Answer

http://stackoverflow.com/a/15847083/54680

by Jonathan Sampson

CSS

body {
    text-align: center;
}

JavaScript

// References and values we'll be needing
var out = document.querySelector("body"), 
    nsp = "http://www.w3.org/2000/svg", 
    lov = 30;

// Build our message, svg element, and circle
var msg = document.createTextNode("Circle is _ Units, w/ an Area of _");
var svg = makeEl(nsp, "svg", { version: 1.1, height: 300, width: 360 });
var ccl = makeEl(nsp, "circle", { cx: "50%", cy: "50%", r: lov + "%" });

// Add children to appropriate parents
svg.appendChild(ccl);
out.appendChild(msg);
out.appendChild(svg);

// Small utility for adding attrs
function makeEl ( namespace, tag, attrs ) {
    var el = document.createElementNS(namespace, tag), prop;
    for ( prop in attrs ) 
        el.setAttribute( prop, attrs[prop] );
    return el;
}