Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Troubles resizing SVG in Raphael

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?

like image 458
iboeno Avatar asked Dec 12 '22 16:12

iboeno


2 Answers

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

like image 103
chandrahas Avatar answered Jan 31 '23 11:01

chandrahas


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.

like image 21
Chasbeen Avatar answered Jan 31 '23 10:01

Chasbeen