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 should set your width and height parameters in print size, like millimeters for example; and then also you should define viewbox with exactly the same width, height parameters to get exact size on the print output.

In your case (with roughly 1/50 conversion from pixels to cms):

<svg xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" version="1.1" width="100mm"   height="80mm"
     preserveAspectRatio="xMinYMin slice" id="plan" xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 100 80">
     .....
</svg>

This will provide desired printed output in scale; provided that the printer is set up for 100% scale (and not for "Fit To Page") with correct paper size.

Scaling can be added as an additional coefficient for different requirements as explained by Paul.

Answer 2

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;