Raphael-based SVG scaling

Demonstrates automatic scaling of an SVG-based drawing created with Raphael.

HTML

<!DOCTYPE html> 
<html lang="en">
    <body>
        <div >
          <img id="wrap"src="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" alt="Italian Trulli">
        </div>
        
    </body>
</html>

CSS

body, html{
    margin : 0;
    padding : 0;
    overflow : hidden;
    height:100%;
    width:100%;
}
#wrap{
    height: 100%;
    width: 100%;
    background-color: orange;
}

/*  Make the SVG canvas fill its container - both initially and after resizing */
svg { height: 100%; width: 100%; }

JavaScript

/*
This fiddle gratefully adapted from Erik Dahlström's fiddle: http://jsfiddle.net/AUNwC/44
See also: http://stackoverflow.com/questions/11176396/how-can-i-scale-raphael-js-elements-on-window-resize-using-jquery/
*/

// Specify view box size.
var w = 600;
var h = 400;

// Raphael (at least as of 2.1.0) always sets a fixed width/height *on canvas creation* (reflected in 'width' and 'height' HTML attributes) - if you don't specify width and height, the canvas will be sized to fully fill its container. Fortunately, though, CSS-based width/height specifications take precedence (see 'svg' style) and thus allow for dynamic resizing.
var paper = Raphael("wrap");

// Set the view box, which effectively activates scaling.
paper.setViewBox(0, 0, w, h, true);
// !! As of Raphael 2.1.0, specifying true as the `fit` parameter to `setViewBox()` translates into an invalid value for the SVG `preserveAspectRatio` attribute: "meet". To rule out this problem, we set that attribute directly.
paper.canvas.setAttribute('preserveAspectRatio', 'none'); // always scale to fill container, without preserving aspect ratio.

// Draw some random vectors in the original view box.
// Note that due to the setViewBox() call above the drawing will fill the entire canvas, whatever its current size.
var path = "M " + w / 2 + " " + h / 2;
for (var i = 0; i < 100; i++){
    var x = Math.random() * w;
    var y = Math.random() * h;
    paper.circle(x,y,
                 Math.random() * 60 + 2).
                 attr("fill", "rgb("+Math.random() * 255+",0,0)").
                 attr("opacity", 0.5);
    path += "L " + x + " " + y + " ";
}

paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);

paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");

/*

If you resize the browser window, the canvas should resize - thanks to the CSS style - and SVG should auto-scale the drawing - thanks to the view box.

Note that the 'none' value of...