SVG by JS

by Ifnak

HTML

<div id="tools"></div>

CSS

* {
    padding:0;
    margin:0;
}
#tools {
    border: 1px solid red;
}

JavaScript

var SVG = (function() {
    var svgns = "http://www.w3.org/2000/svg";
    this.genDoc = function(w, h) {
        var d = document.createElementNS(svgns, "svg");
        atrv(d, ["width", w, "height", h, "style", "border:1px solid blue"]);
        d.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
                         "http://www.w3.org/1999/xlink");
        return d;
    };
    function atr(e, p, v) {
        return e.setAttributeNS(null, p, v);
    }
    function atrv(e, p) {
        for (var i = 0; i < p.length; i+=2)
            atr(e, p[i], p[i+1]);
    }
    this.circleF = function(r, c) {
        var d = this.genDoc(r*2, r*2),
            p = document.createElementNS(svgns, "circle");
        atrv(p, ["cx", r, "cy", r, "r", r, "fill", c]);
        d.appendChild(p);
        document.getElementById('tools').appendChild(d);
    };
    this.circleR = function(r, c, w) {
        w = w || 1;
        if (r < w)
            w = r;
        r = r - w / 2;
        var d = this.genDoc(r*2+w, r*2+w),
            p = document.createElementNS(svgns, "circle");
        
        atrv(p, ["cx", r+w/2, "cy", r+w/2, "r", r, "stroke", c, 
                 "fill", "none", "stroke-width", w]);
        d.appendChild(p);
        document.getElementById('tools').appendChild(d);
    };
    return this;
})();

SVG.circleF(75, "green");
SVG.circleR(75, "blue", 37.5);