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 combination of correct viewport viewbox setup to meet my needs.

What I know is the SVG source file size. Via the x and y coordinates I calculated a distance to find the correct "screen scale" to match 1cm on the plan with a pixel number.

For printing I need to respect "specific scales" for example 1/50. So I tried to get the real flat size by using the "screen scale" and SVG file size. Then I applied the 1/50 (0.02) scale on the total size. And then I tried to guess a number of pixel given a 72dpi resolution.

Here is my code :

var svgNode = SVG(planNode);

var totalWidthCm = (svgNode.width().replace('px', '') * screenScale * printScaleVal);
var totalHeightCm = (svgNode.height().replace('px', '') * screenScale * printScaleVal);
var totalWidthPx = totalWidthCm * 0.393701 * 72;
var totalHeightPx = totalHeightCm * 0.393701 * 72;

svgNode.height(totalHeightPx + 'px');
svgNode.width(totalWidthPx  + 'px');

svgNode.viewbox('0', '0', '1000', '600');

The SVG ouput :

<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="495.79113386880005px" height="387.87611496479997px"
     preserveAspectRatio="xMinYMin slice" id="plan" xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 496 388">
     .....
</svg>

The fact is that I don't know how to set the viewport and viewbox to display the full or the sliced scaled accomodation SVG in order to print it on A4 or A3 format.

Oh dear SVG expert, Hope my bottle will reach you :D

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;

Answer 2

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.