I am having some issues with @page rule and using the “Save as PDF” print feature of MS Edge and Google Chrome. Here is my problem:
Background
I am having an SVG file that I am trying to convert to PDF using browsers (I can’t use libraries like svg2pdf or cairosvg etc. for some reason). So, I open the file in the browser and try to print it (i.e. use the option “Save as PDF”). Since the page dimension is not A4, I specify the page dimension using @page size css property. However, even after specifying the exact length of SVG to page size and setting page margin to 0, still there are two pages in the PDF.
Strange Behavior
If I increase the width or height attribute of the svg tag and let the @page size remain to the original dimensions, I am able to use “Save as PDF” option with PDF having a single page only. I am unable to understand this behavior. I don’t know whether, this is a bug with the browsers or this behavior is the correct behavior and I am having an incorrect understanding of @page rule.
Example
2 pages
<!DOCTYPE html>
<html>
<head>
<style>
@page {
margin: 0px;
size: 1152px 1599.84px;
}
</style>
</head>
<body>
<svg width='1152' height='1599.84' xmlns='http://www.w3.org/2000/svg'><text fill="green" stroke="None" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="none" stroke-dashoffset="0" stroke-miterlimit="4" transform="translate(876.02, 1207.8899999999999) scale(1, 1) skewX(0) skewY(0)" fill-rule="nonzero" paint-first="fill" font-size="60" font-weight="normal" font-family="Segoe UI Symbol" font-style="normal" line-height="1.16" text-align="left">✓</text></svg>
</body>
</html>
1 page
<!DOCTYPE html>
<html>
<head>
<style>
@page {
margin: 0px;
size: 1152px 1599.84px;
}
</style>
</head>
<body>
<svg width='1160' height='1599.84' xmlns='http://www.w3.org/2000/svg'><text fill="green" stroke="None" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="none" stroke-dashoffset="0" stroke-miterlimit="4" transform="translate(876.02, 1207.8899999999999) scale(1, 1) skewX(0) skewY(0)" fill-rule="nonzero" paint-first="fill" font-size="60" font-weight="normal" font-family="Segoe UI Symbol" font-style="normal" line-height="1.16" text-align="left">✓</text></svg>
</body>
</html>