Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No SVG rendering in PDF

See original GitHub issue

Steps to reproduce

Tell us about your environment:

Puppeteer version: 1.1.0
Platform / OS version: Mac OSX
URLs (if applicable): N/A
Node.js version: v10.0.0

What steps will reproduce the problem?

Generate html with local jpg and svg images (not inline)
View in chrome: everything ok
html > pdf with puppeteer

Puppeteer pdf config:

{
	title: meta.title,
	printBackground: true,
	format: 'A4 landscape'
}

What is the expected result?

Expected result is a pdf with rendered SVG images. This happens when I manually save as PDF in chrome.

What happens instead?

SVG images are not rendered. Jpgs work fine though, so it doesn’t appear to be a path issue.

Issue Analytics

State:
Created 5 years ago
Reactions:11
Comments:14 (1 by maintainers)

Top GitHub Comments

5reactions

backflipcommented, Jun 2, 2019

I had to replace hex fill colors with named ones in order for SVGs to be rendered in PDFs.

Example with Github logo:

SVG not visible in PDF:

<svg height="32" version="1.1" viewbox="0 0 16 16" width="32">
  <path fill="#000" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>

SVG visible:

<svg height="32" version="1.1" viewbox="0 0 16 16" width="32">
  <path fill="black" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>

In more complex SVGs I had to remove masks, too.

2reactions

stale[bot]commented, Jul 25, 2022

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!

Top Results From Across the Web

Solved: SVG images not showing in PDF File

Solved: Hi everyone: I'm creating dynamic bar charts as SVG images. So far, no problems in just showing them in the app. But...

Svg Image is not properly render in the pdf - Stack Overflow

Here is my code to add svg image in the pdf using itext 7.1.3 and also using SVGConventer.The image not properly rendered, i...

Embedded SVG images are not included in generated PDF

Embedded SVG images are not included in generated PDF ... I attach an svg image (e.g. "test.svg") to a page; When editing the...

Render SVG images using vector primitives in PDF format

Render SVG images using vector primitives in PDF format. This will allow the SVG images to retain high quality at all zoom levels....

rsvg: Render SVG Images into PDF, PNG, (Encapsulated ...

Title Render SVG Images into PDF, PNG, (Encapsulated) PostScript, or. Bitmap Arrays. Version 2.4.0. Description Renders vector-based svg images into ...