Question

I’ve created and SVG-file from an Illustrator-image. I’m using this: https://github.com/wout/raphael-svg-import to import and display the vector-image.

I read the svg-file in as text, and submit it to the import-function:

var mygetrequest = new XMLHttpRequest();
var svgdata = mygetrequest.responseText; 
paper.importSVG(svgdata); //where paper is my Raphael canvas

All working very nicely.

But I can’t seem to find any info or hints on how to change the settings and view of the image?
For example I would very much like it to fill out its container, disregarding the size of this.

Any ideas? Documentation to help me along the way? Anything, really…

Answer 1

There’s two ideas I can offer you:

1) maybe the SVG import takes into account the original size and does scaling for you. However when editing in illustrator you might have a much bigger document around it, which confuses the svgImport?

2) Otherwise, you could import the paper as a set. And scale the set.

var set = paper.set();
paper.importSVG(svgdata, set);
set.scale( 2, 2, centerx, centery );

(I’m not sure without an example to play with, what centerx and centery should be).

[EDIT (after approval)]
It seems Raphael enables you to get a set’s bounding box:

var bbox = set.getBBox();
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example:
paper.rect( bbox.x, bbox.y, bbox.width, bbox.height ).attr('border', 'red');

So I’d say you could:

1. Get bounding box of imported SVG set
2. Use set.translate to align the bounding box’s center with the center of the paper (use something like ( paperwidth / 2 ) - ( bbox.x + bbox.width / 2 ) for example for the x translation).
3. Scale based on the bounding box size compared to the paper size. You probably want to scale while maintaining aspect ratio so you’ll have to use the one that’s closest to 1 (of
   paper.width/bbox.width and paper.height/bbox.height).
4. (Note: use center of paper now as center of scaling – since you translated your set this is actually the center of the svg set as well)

I did this from the top of my head so it might not be 100% accurate, but if you get the idea you’ll probably be able to get rid of the glitches.