Having the correct scaling functionality in Raphael.Js is very hard. If you are playing around with SVGs and if you are trying to zoom on your svg there are certain things you want to watch out for.

First thing first you have to know how scaling works in svg. You can start here if you are not familiar with it already.

preserveAspectRatio, viewBox, width and the height of your SVG element is what you will have to play with to get your scaling working correctly. Ideally, you first set your preserveAspectRatio and viewBox values and by changing your width and height of your SVG you should have your scaling SVG.

Raphael.Js has a few built-in functions to help you with setting the above attributes, which YOU SHOULD STAY AWAY FROM, or use with caution.

The first function to watch out for is the Paper.setSize(width, height). What you might think this function does is that, it would just update the width and the height of your SVG. But it doesn’t :). It also updates the viewBox of your SVG. As a result of this you will see that all the elements and especially their stroke-width gets updated rather than being scaled.

Here is the code for a simple scaling SVG with Raphael.JS

var paper = Raphael("paper", width, height);
paper.setViewBox(0, 0, width, height );

// Setting preserveAspectRatio to 'none' lets you stretch the SVG
paper.canvas.setAttribute('preserveAspectRatio', 'none');

// Change the widht and the height attributes manually through DOM
$('#paper').attr('width', newWeight).attr('height', newHeight);