Forum How do I...?

Background Image scaling (of SVG)

pkj
Hi,

If I use an SVG file as the page background, is there a way to tell prince to scale it so that it fills up 100% of the available space?

Regards

Peter
pkj
I have continued the other discussion in this thread as requested, but I think this is a slightly different issue. A solution to either will probably sort me out though.

The original topic of this post is to ask if there is a way to ignore the dimensions of the SVG file, and make it expand to fill 100% of the page background.

The issue I am struggling with in the example below is how to overcome the fact that Inkscape assumes that an SVG file has a resolution of 90dpi whereas Prince assumes a resolution of 72dpi i.e. to preserve the original dimensions of the SVG file so that 10cm of SVG file is drawn as 10cm in the PDF. I have tried changing the size of the SVG to mm rather than SVG units as Alex suggested but still no joy.

The most ideal solution would work without having to manually add a viewBox, and to allow content outside of the SVG page area to go into the bleed margins.

This is a simple test SVG file. I removed some of the superfluous metadata that Inkscape adds, and added a viewBox.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448"
   height="1052.3622"
   viewBox="0 0 744.09448 1052.3622"
   id="svg2"
   version="1.0"
   inkscape:output_extension="org.inkscape.output.svg.inkscape"
   inkscape:version="0.46">
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.47383046;
   stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;
   stroke-dasharray:none;stroke-opacity:1"
       id="rect2403"
       width="173.69153"
       height="173.69153"
       x="1.7369078"
       y="3.8699625" />
    <rect
       y="3.8707519"
       x="178.96526"
       height="173.69153"
       width="173.69153"
       id="rect2405"
       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.47383045999999980;
   stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;
   stroke-dasharray:none;stroke-opacity:1" />
    <rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.47383046;
   stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;
   stroke-dasharray:none;stroke-opacity:1"
       id="rect2409"
       width="173.69153"
       height="173.69153"
       x="357.25131"
       y="3.1568069" />
    <rect
       y="2.442862"
       x="536.53735"
       height="173.69153"
       width="173.69153"
       id="rect2411"
       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.47383045999999980;
   stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;
   stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>


Here is my CSS:

<style type="text/css">
@page {
	size: A4;
	margin: 60mm 10mm 30mm 10mm;
	padding: 10mm;
	background-image: url(template4.svg);
	background-repeat: repeat-none;
}

body {
	background-color: transparent;
}
</style>


Regards

Peter[/url]

Edited by pkj

mikeday
If you manually change the width and height attributes to 210mm and 297mm respectively then the viewBox will be mapped to fit exactly one A4 page. Inkscape doesn't seem to make it easy to do this, I'm not sure why.

You can make the SVG background image extend into the bleed area by making the size bigger than 210x297mm and using the background-position property to give a negative offset. (For example if the image is 10mm wider and taller, give a background-position of -5mm -5mm).