SVG for print with scale

Question

I have an SVG file representing a flat in my browser and I need to print the output in a specific scale. I\'m using SVG.js to manipulate the SVG content but I can\'t find a

Answer 1

You can't rely on the fact that something that is X pixels on screen is going to be X pixels when printed. You need to print some specimens and measure the printed SVG to calculate the scale. And it will differ between browsers and printers.

First set your SVG to be rendered at 1:1 on screen. To do that, set your width="496" and height="388" to match the viewBox.

Print that and measure a known dimension. Such as one wall.

So let's say your 2m wall on your plan is 53mm when printed. Then your real length to printed length scale factor is

2m = 53mm printed
worldToPrinterScaleFactor = 53 / 2000

To print a 1:1 scale copy of your room, you would need to scale (multiply) your SVG by 1 / worldToPrinterScaleFactor.

To print a half-scale copy of your room, you would need to scale (multiply) your SVG by 0.5 / worldToPrinterScaleFactor.

But if you wanted to print at 1/50...

printScale = 1 / 50

then you would need to scale your SVG by:

printScale / worldToPrinterScaleFactor

So your JS should be something like:

var printScale = 1 / 50;

var worldToPrinterScaleFactor = 53 / 2000;
var svgScale = printScale / worldToPrinterScaleFactor;

var svgNode = document.getElementById("plan");
var viewBox = svgNode.viewBox.baseVal;

svgNode.width.baseVal.value = svgScale * viewBox.width;
svgNode.height.baseVal.value = svgScale * viewBox.height;