Troubles resizing SVG in Raphael

Question

I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath]). This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561... It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)" Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?

Answer 1

you can use scale(Xtimes,Ytimes,centreX,centreY)

where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th

and

centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively

if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th

Answer 2

You have two options either use what I did, use the .transform("transform string") to scale the paths, the transform string can be sww,hh,xx,yy where ww and hh is by how much you want to scale the path.

.transform("s0.25,0.25,0,0");

You can find an EXAMPLE HERE or jsfiddle HERE. Or use

paper.scaleAll(n);

where n is the amount by you want to scale the whole paper by. First create the path in the page and then scale the paper object by maybe half

paper.scaleAll(0.5);

You can find the library and examples for the Scale.Raphaeljs library in the link below: Scale Raphael library

Answer 3

I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter. You will find the tool and associated info @ http://www.irunmywebsite.com/raphael/svgsource.php

I set up a whole load of resources for Raphael @ http://www.irunmywebsite.com/raphael/raphaelsource.php Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!

The 20minute exercise delivered this... http://www.irunmywebsite.com/raphael/colourmap2.php

Hopefully this will help you or someone with a similar problem in the future. Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter. Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.

Answer 4

Translating by such a small amount seems a bit wasteful, it's ~0 anyway, I doubt you'd see much of a difference if you stripped off the transform attributes that look like that.

Yes, changing the viewBox could make it fit to whatever you wanted in all viewers that support SVG, but raphael itself doesn't support viewBox (you'd have to provide some VML fallback yourself).

Either preprocess the path data to fit your particular use (probably a good idea anyway, it always helps to keep the filesize down, wikipedia maps are usually quite large) or use raphael's scale function to scale the paths to a proper size.

Update: Raphaël v2.0 and later does support viewBox (via the setViewBox method).

Answer 5

You can use the Raphael attribute 'translation', which takes an x,y delta. ie:

r.path([countryPath]).attr({translation:'-11689, -6005'});

To make it more reusable for multiple paths, you could parse the x and y values from the M in your svg path. When I did this, it turned out that I didn't want my path to be exactly on the 0,0 since that sent it over the canvas as well -- might take some adjustment depending on the height and width of your element.