openhtmltopdf SVG images not supported as background via CSS

In our project, we are using PdfRendererBuilder.withW3cDocument to convert a HTML document to PDF. In this input, we use CSS to define a background image:

.logo {
  background-image: url("logo.svg");
}

When the PDF is rendered, we get the following stacktrace:

Can't read image file; unexpected problem for URI '.../logo.svg'

java.io.IOException: Unrecognized Image format
	at com.openhtmltopdf.pdfboxout.PdfBoxImage.<init>(PdfBoxImage.java:44)
	at com.openhtmltopdf.pdfboxout.PdfBoxUserAgent.getImageResource(PdfBoxUserAgent.java:90)
	at com.openhtmltopdf.render.AbstractOutputDevice.getBackgroundImage(AbstractOutputDevice.java:210)
	at com.openhtmltopdf.render.AbstractOutputDevice.paintBackground0(AbstractOutputDevice.java:295)
	at com.openhtmltopdf.render.AbstractOutputDevice.paintBackground(AbstractOutputDevice.java:234)
	at com.openhtmltopdf.pdfboxout.PdfBoxFastOutputDevice.paintBackground(PdfBoxFastOutputDevice.java:283)
	at com.openhtmltopdf.render.Box.paintBackground(Box.java:583)
	at com.openhtmltopdf.render.displaylist.DisplayListPainter.paintBackgroundAndBorders(DisplayListPainter.java:75)
	at com.openhtmltopdf.render.displaylist.DisplayListPainter.paint(DisplayListPainter.java:251)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.paintPageFast(PdfBoxRenderer.java:921)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.writePDFFast(PdfBoxRenderer.java:617)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.createPdfFast(PdfBoxRenderer.java:554)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.createPDF(PdfBoxRenderer.java:480)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.createPDF(PdfBoxRenderer.java:417)
	at com.openhtmltopdf.pdfboxout.PdfBoxRenderer.createPDF(PdfBoxRenderer.java:399)
	at com.openhtmltopdf.pdfboxout.PdfRendererBuilder.run(PdfRendererBuilder.java:46)
[...]

When we add the SVG directly to the HTML (with <img src="classpath:static/public/img/logo.svg"></img>), the image is rendered correctly. To make this work, we add the com.openhtmltopdf.svgsupport.BatikSVGDrawer inPdfRendererBuilder.useSVGDrawer.

The cause seems to be, that the SVG drawer is not used when rendering the background.

Thanks!

Aug 24 '21 13:08 nukul4r

Hi, we face to exactly same problem during rendering the SVG file, when we use CSS to define a background image. I have tested it with both relative address and data-URI:

.icon-at {
  background-image: url("images/flag-at.svg");
}

//////// OR ///////

.icon-at {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='600' viewBox='0 0 5 3'><desc>Flag of Germany</desc><rect id='red_stripe ' width='5' height='3' y='0' x='0' fill='#ed2939'/><rect id='white_stripe' width='5' height='2' y='1' x='0' fill='#FFF'/><rect id='red_stripe2' width='5' height='1' y='2' x='0' fill='#ed2939'/></svg>");
}

Sep 20 '21 06:09 omna-manz

Hello again,

By my last check, I have found that might be change code in AbstractOutputDevice.paintBackground0() where is checkd whether backgroundImage is GRADIENT or URI. I think it should be check again if URI contains ".svg", then draws a SVG file instead of Image.

In other words, It should create XMLResource instead of ImageResource.

I hope it was helpful. :)

Sep 22 '21 08:09 omna-manz

Thanks @omna-manz,

SVG background images are likely to get in the next release. Stay tuned.