Lets just testing getting a basic shape up and filling it
var s = Snap("#svgout"); // This will use an existing svg element (not a div)
var r = s.rect(10,10,100,100);
var c = s.circle(100,100,50);
r.attr('fill', 'red'); //This is the elements area to fill
c.attr({ 'fill': 'blue', 'stroke': 'black', 'strokeWidth': 10 });
r.attr({ stroke: '#123456', 'strokeWidth': 20 }); //Or this does the same thing passing one object
c.click( function() { this.attr('fill', 'green') } ); // using 'this'
r.click( function() { r.attr('fill', 'yellow') } );
s.text(200,100, 'Click An Object').attr({'fill' : 'blue', 'stroke': 'blue', 'stroke-width': 0.2 });