Printing with Scalable Vector Graphics (SVG) Technology

Question

Printing with Scalable Vector Graphics (SVG) Technology

I have a unique challenge with an SVG file of a flat displayed in my browser - I need to print it out at a specific scale. I've been using SVG.js to manipulate the content, but I'm struggling to find the right combination of viewport and viewbox settings to achieve my desired outcome.

What I do know is the size of the original SVG source file. Using x and y coordinates, I've calculated a distance to determine the correct "screen scale" that will match 1cm on the plan with a certain number of pixels.

For printing purposes, I must adhere to specific scales like 1/50. So, I attempted to determine the actual size of the flat by applying the screen scale and the SVG file size. Then I applied the 1/50 (0.02) scale to the total size. Finally, I tried to estimate the number of pixels based on a 72dpi resolution.

Below is the code I've been working with:

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 resulting SVG output:

<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.dev/svgjs" viewBox="0 0 496 388">
     .....
</svg>

Unfortunately, I'm still unsure how to adjust the viewport and viewbox settings to display the scaled flat accurately for printing on A4 or A3 paper sizes.

To any SVG experts reading this, your help would be greatly appreciated! :D

javascript svg viewport viewbox

Answer 1

Answer №1

It is not guaranteed that something displayed as X pixels on the screen will be the same size when printed. To accurately determine the scale for printing, you should print some samples of your SVG and measure them. Keep in mind that the scale may vary between different browsers and printers.

Start by setting your SVG to render at a 1:1 ratio on the screen. Set the width="496" and height="388" attributes to match the viewBox dimensions.

Print the SVG and measure a known dimension, such as a specific wall length.

For example, if a 2m wall on your plan measures 53mm when printed, the scale factor from real length to printed length would be:

2m = 53mm printed
worldToPrinterScaleFactor = 53 / 2000

To print a 1:1 scale replica of your room, adjust the SVG scale by multiplying it with 1 / worldToPrinterScaleFactor.

For a half-scale copy, multiply the SVG by 0.5 / worldToPrinterScaleFactor.

If you want to print at a scale of 1/50...

printScale = 1 / 50

You would then need to scale your SVG by:

printScale / worldToPrinterScaleFactor

Your JavaScript code could look something like this:

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

It is not guaranteed that something displayed as X pixels on the screen will be the same size when printed. To accurately determine the scale for printing, you should print some samples of your SVG and measure them. Keep in mind that the scale may vary between different browsers and printers.

Start by setting your SVG to render at a 1:1 ratio on the screen. Set the width="496" and height="388" attributes to match the viewBox dimensions.

Print the SVG and measure a known dimension, such as a specific wall length.

For example, if a 2m wall on your plan measures 53mm when printed, the scale factor from real length to printed length would be:

2m = 53mm printed
worldToPrinterScaleFactor = 53 / 2000

To print a 1:1 scale replica of your room, adjust the SVG scale by multiplying it with 1 / worldToPrinterScaleFactor.

For a half-scale copy, multiply the SVG by 0.5 / worldToPrinterScaleFactor.

If you want to print at a scale of 1/50...

printScale = 1 / 50

You would then need to scale your SVG by:

printScale / worldToPrinterScaleFactor

Your JavaScript code could look something like this:

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 3

Answer №2

To ensure accurate sizing for printing, it is important to set the width and height parameters in print size units such as millimeters. Additionally, defining the viewbox with the same width and height parameters will help achieve the exact desired size on the printed output.

For example, if you are working with a conversion rate of roughly 1/50 from pixels to centimeters:

<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.dev/svgjs" viewBox="0 0 100 80">
     .....
</svg>

By ensuring that the printer is set up for 100% scale (and not "Fit To Page") with the correct paper size, this setup will result in the desired printed output at scale. Scaling adjustments can be made as needed for various requirements, as explained by Paul.

Answer 4

To ensure accurate sizing for printing, it is important to set the width and height parameters in print size units such as millimeters. Additionally, defining the viewbox with the same width and height parameters will help achieve the exact desired size on the printed output.

For example, if you are working with a conversion rate of roughly 1/50 from pixels to centimeters:

<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.dev/svgjs" viewBox="0 0 100 80">
     .....
</svg>

By ensuring that the printer is set up for 100% scale (and not "Fit To Page") with the correct paper size, this setup will result in the desired printed output at scale. Scaling adjustments can be made as needed for various requirements, as explained by Paul.

Printing with Scalable Vector Graphics (SVG) Technology

Answer №1

Answer №2

Similar questions

The primary directory specified in the package.json file

Trouble with mobile compatibility for .json file content population in HTML elements script

What is the process for converting and transferring the date in Google Apps Script to generate a new event in Google Calendar?

What is the manual way to initiate the onclicksubmit event in jqgrid?

What is the significance of :: in AngularJS?

Oops! Encounterred a TypeError stating "Unable to access properties of an undefined object" while working with react native

What order does JavaScript async code get executed in?

What steps can be taken to resolve the error ERROR TypeError: undefined is not an object when evaluating 'userData.username'?

What is the procedure for defining the secret code for a private key in saml2-js?

Determining the duration of a button long press in React in seconds

Erase the Japanese content from the input

The distance calculation is not functioning properly within the for loop

Tips for setting react-native image source dynamically in a flat list

"HTML and JavaScript: The search functionality fails when trying to search for a string that is sourced from an array

Developing a JavaScript Set within an Array constructor

jQuery Button State Toggler - Disabling and Enabling Buttons

Establishing the Default Volume within a script

Checking for date overlap between two textboxes in MVC5 when searching against a date field

"An error occurred: Attempting to access properties of an undefined object (specifically 'foundTicket'). While the getTickets() function, which fetches data from MongoDB using Mongoose, is working fine, the getTicketById()

Creating a function generator using a string parameter in TypeScript