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 });

   

        
The actual svg markup looks like this (when you've clicked on run)....