Does anyone know why SVG images do not show up when executing <cfhtmltoPDF> I can't seem to work out why. PNG's, Gif's are all fine. The only problem is with SVGs

Gave up with the PDF generation in ACF as it has limited support for CSS etc. Use Playwright now.

oh does that support svg @aliaspooryorik? Easy to setup ?

It's basically Chrome so supports anything Chrome does.

ah ok ill check it out thanks!!

User would have to use Chrome though I guess?

Nope. It's a service that runs headless chrome. So you just call it.

woooow awesome! 🙏

This may help you (it's using Playwright with CFML for end to end testing) https://cfcasts.com/series/itb-2022/videos/eric-peterson-cbplaywright-end-to-end-tests-with-playwright-and-testbox./

Fantastic stuff. Many thanks @aliaspooryorik 🙏

@Mauro caresimo the underlying flying saucer pdf code doesnt support svg out of the box, but there is additional code to support it although you have to abandone coldfusion and use java

How much hand knitting of the pdf do you have to do to do it in java?

not much this is a method that renders the pdf from a handlebars template

private ByteArrayInputStream getPDFByteArray(Map<String,Object> data) throws IOException {
	ByteArrayOutputStream outputPDF = new ByteArrayOutputStream();
	ByteArrayInputStream inputPDF;
	Map<String, Object> dataCopy = SerializationUtils.clone((HashMap<String,Object>)data);
	dataCopy.put("pdfoutput", true);
	Map<String,Object> fc = (Map<String,Object>)dataCopy.get("FORMCONTEXT");
	if (fc != null){
		fc.put("fileWorkerUrl", fileWorkerUrl);
	}
	String html = this.pdfTemplate.getContent(dataCopy);
	Document doc =Jsoup.parse(html);
	doc.outputSettings().escapeMode(Entities.EscapeMode.xhtml);
	doc.outputSettings().syntax(OutputSettings.Syntax.xml);
	doc.outputSettings().charset("UTF-8");
	
	ITextRenderer renderer = new ITextRenderer();
	ReplacedElementFactory originalCRE = renderer.getSharedContext().getReplacedElementFactory();
	ChainingReplacedElementFactory chainingReplacedElementFactory = new ChainingReplacedElementFactory();
	chainingReplacedElementFactory.addReplacedElementFactory(originalCRE);
	chainingReplacedElementFactory.addReplacedElementFactory(new SVGReplacedElementFactory());
	renderer.getSharedContext().setReplacedElementFactory(chainingReplacedElementFactory);
	
	renderer.setDocumentFromString(doc.outerHtml());
	renderer.layout();
	try {
		renderer.createPDF(outputPDF);
		inputPDF = new ByteArrayInputStream(outputPDF.toByteArray());
	} catch (DocumentException e) {
		throw new IOException(String.format(
				"Failed to create pdf from: [%s] Error: [%s]",
				doc.outerHtml(), e.getMessage()), e);
	} finally {
		IOUtils.closeQuietly(outputPDF);
	}
	return inputPDF;
}

In places where I am not incharge of the HTML I normally inline the css as well

Thanks. How about rendering a pdf from a CF page?

off the top of my head cfhttp to get the html and chuck it at the renderer

Hah, ok 🙂

html to pdf in pre-2023 does not have SVG support. CF2023 adds support for SVG, CSS-Grid, Flex-box, embedded video/audio, magic space kittens and more.