Hi, I have a background image set to SVG file:

.slide SECTION:before {
	position:absolute;
	top:0;
	right:120px;
	width:40px;
	height:120px;
	background:url(ribbon.svg) no-repeat;
	content:'';
	}

And here's ribbon.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 120">
	<polygon fill="#CC0000" points="0,0 40,0 40,120 20,100 0,120"/>
</svg>

According to the viewBox="0 0 40 120" attribute value, SVG picture (which is smaller than 40 x 120px) should be scaled to the viewport of the containing element and this happens in all browsers, except Prince — which is not actually browser, but pretending to be

So I wonder — are you going to support viewBox attribute for SVG? It is really useful for integration SVG in CSS.

Actually we do support the viewBox attribute, but perhaps there is an issue when the SVG is specifically being used as a background image. Does it work when you use it as a regular foreground image?

Yes, it works good in this case (content:url instead of background-image:url)

.slide SECTION:before {
	position:absolute;
	top:0;
	right:120px;
	width:40px;
	height:120px;
	content:url(../images/ribbon.svg);
	}

So the problem affects only background cases.

So here's the difference:

background:#CCC url(../images/ribbon.svg) no-repeat; // left
…
content:url(../images/ribbon.svg); // right

1. diff.png‎ 144.4 kB

We are seeing a similar issue with SVG as backgrounds.
Where the image is being "shrunk".

We are also seeing issues with linear gradients not rendering correctly.

Any thoughts on how to debug?

pepelsbey: What is the viewbox for ribbon.svg? Does it match the aspect ratio of the element, eg. 40:120 for width:height? If possible, could you post the SVG file here, or email it to me? (mikeday@yeslogic.com)

hooligan495: The best place to start is to narrow down a simple test document that demonstrates the problem so we can take a look.

mikeday, actually everything is in the topic:

SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 120">
   <polygon fill="#CC0000" points="0,0 40,0 40,120 20,100 0,120"/>
</svg>

CSS:

.element {
   display:block;
   width:40px;
   height:120px;
   background:url(ribbon.svg) no-repeat;
   }

So the SVG size equals to the element's one: 40 by 120 px.

Sorry about that, reading comprehension failure on my part.

The behaviour of SVG background images is a bit subtle. For your ribbon example, I think I get the correct scaling if I add explicit size attributes to the SVG element, like this:

<svg width="40px" height="120px" ...

However, this does depend on knowing the size of the container element. The confusing part is that specifying width="100%" does not produce the expected result. I'm not sure why, we will investigate.

It's actually an issue affecting percentage heights; we will fix this in the next release of Prince.

Prince 8.1 is now available for download, and includes a fix for this issue. Thanks for letting us know about it.

Hooray!