Forum How do I...?

SVG as background image

jsweetman
Hi,

I was wondering of there was any way of using SVG for a background image.

What we want to do is produce pdfs for our clients with a unique watermark in the background. I thought the best way of doing this would be using SVG to make the unique watermark but then I am unsure how to repeat this in the background of the document.

Any ideas?

Cheers!

<><

mikeday
At the moment Prince doesn't support SVG background images, but you can place an SVG image in a header or footer that will appear on every page. We will add support for SVG background images in a future release of Prince.
jsweetman
Hi Mike,

sorry about the delay in replying - been away on holiday!

That sounds like a good idea - could you give me some pointers on how I would go about doing that? Is it using the @page selector in the CSS?

Cheers!

<><

mikeday
Yes, something like this:
@page {
    @top {
        content: url(logo.svg)
    }
}

That can be used to place SVG content in the page margin boxes, or you can flow elements from the document into the margin boxes. Not really a substitute for full SVG background images, though.
mikeday
We have now released Prince 6.0 rev 3, which includes support for SVG background images. Thanks for raising the issue! :)