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