Print SVG edge to edge from webpage

Question

I've carefully crafted an svg generator for printing labels. It is very important that the dimensions are correct if the labels are not to look weird. Here is an example of a generated label sheet.

When printing from the web, the browser adds a lot of margins. The above example is supposed to have margins that are top: 7mm, right/left: 4.2mm bottom: 5mm.

When printing it is a lot more. If I copy paste the svg into a vector graphics app it prints perfectly!

Is there any way, programmatically from JavaScript or by CSS to tell the browser to NOT do header/footer and to not add any margins of its own?

Answer 1

In theory this is the correct way:

@page {
    margin: 7mm 4.2mm 5mm;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/@page

But styling for printing is too painful among all browsers (doesn't work consistently)