Forum Feature requests

Data URI SVG as a CSS background image

lfiszer
Until now, I had no problem using base64-encoded png/jpg images in css background-image using data-uri scheme, like this:

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...ggg==');


However I was not able to make this work with an unencoded svg image, for example:

background-image: url('data:image/svg+xml;utf8,<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <g> <text style="cursor: text;" stroke="red" transform="rotate(-45 325.371 238.07) matrix(0.980392 0 0 0.980392 3.2549 5.13725)" font-weight="bold" text-anchor="middle" font-family="Sans-serif" font-size="63" id="svg_1" y="259.280002" x="328.180001" stroke-width="0" fill="red">TEST</text> </g></svg>'); 


It seems to me like it's a missing feature that could be added to Prince quite easily, as data-uri for base64-encoded images and svg backgrounds are already implemented.
mikeday
Actually, we do support this already! But it seems that there is a bug, where whitespace characters are being stripped from the data URL. If you replace the space characters with %20, then it will work. We will fix this bug in the next release of Prince, thanks for letting us know. :)
lfiszer
Indeed, escaping spaces made it work. However, I needed to encode all non-ascii characters as well (for example É -> %C3%89).

Here's the code that works for me, in case if anyone needs it. I use it to "watermark" all pages:

background-image: url('data:image/svg+xml;utf8,<svg%20width="170mm"%20height="170mm"%20xmlns="http://www.w3.org/2000/svg"><g><text%20transform="rotate(-45%20324.7626037597656,238.86323547363284)"%20font-weight="bold"%20text-anchor="middle"%20font-family="Sans-serif"%20font-size="63"%20y="259.28"%20x="328.18"%20%20fill="%23DDD">%C3%89PREUVE DE TEST</text></g></svg>');
mikeday
Today we have released Prince 8.1 rev 5, which correctly supports whitespace in data URLs that have not been Base64 encoded. Thanks again for letting us know about the issue. :)
nico
Lfiszer, I tried your solution with background-image, but I couldn’t manage to make it work on Prince 8.1 rev 5. Could you provide me with a simple HTML file that works for you? Thank you in advance.

Edited by nico