Creating and scaling SVG for printer output

Question

I have an app which creates a basic svg tile which is about 300 x 150px. I need to duplicate this tile, such that I can create a nice printout on two A4 pages, or a single A3 page. So, basically, I'm just doing page layout 101, in svg rather than Photoshop/whatever.

Can anyone give me any pointers on how to start this? At the moment, I'm doing it very naively:

1. set a large canvas, of about 1500 x 1500px
2. duplicate the tile 4 x 6 times in JavaScript
3. print from the browser

This is more-or-less passable, but doesn't look good. Would it help to set up a canvas with a physical size of an A4 page? If I do this, I then have the problem that the tile is a complex graphic which I have currently created using pixel units. Even if I do this, the browser will presumably ignore the canvas size anyway. Or should I convert to pdf first? If I do this, I still need to work out how to set up an svg 'page' that will convert well to pdf. And do any tools actually support the svg 1.2 page stuff?

Note that I can't use Inkscape, since my svg code is entirely JavaScript.

Answer 1

Don't use canvas for this!

The point of SVG is scalable graphics. You can just scale the SVG yourself in the browser and then print from there.

If you want to scale SVG then all you have to do is either apply a CSS scale:

http://jsfiddle.net/simonsarris/xYZyf/

Or an SVG scale:

http://jsfiddle.net/simonsarris/xYZyf/1/