Making our SVG responsive

There are 2 key points to making our svg responsive. The width/height must be 100% and a viewBox MUST be defined.


var s = Snap("#svgout"); 
s.attr({ viewBox: "0 0 600 600" });

//lets draw 2 rects at position 100,100 and then reposition them

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.2 });

var t = s.text(0,50,'The svg element is set for 100% width, 100% height and has a viewBox');

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