Troubles resizing SVG in Raphael

svg raphael viewbox
iboeno picture iboeno · Jan 31, 2011 · Viewed 8.1k times · Source

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

chandrahas picture chandrahas · Mar 10, 2011

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

Related questions

SVG viewBox zoom in center (Raphael)

I try to zoom with mousewheel on a Raphael paper using viewBox. Here is the JSFiddle code. it works but now i want to zoom in the center and i have no idea where to start. I guess i should …

Read More
How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning …

Read More
jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More