Pdfmake: SVG patterns do not render when using minified version of pdfmake

[jpsilva]

Using patterns in SVG works as expected when importing the unminified version of pdfmake (pdfmake/build/pdfmake.js). But they render as solid black when either importing pdfmake.min.js or minimizing the original with Angular. I haven't noticed any other discrepancies between

Result with unminified version:

Result with minified version:

Code used to generate both results:

const pdfDoc = {
  content: [
    {
      svg: `
        <svg id="svg" viewBox="0 0 600 600">
          <defs>
            <pattern id="stripes" width="30" height="30" patternUnits="userSpaceOnUse">
              <path d="M0,0 15,0 0,15 z" fill="#00cc66" />
              <path d="M0,30 30,0 30,15 15,30 z" fill="#00cc66" />
            </pattern>
          </defs>
          <rect x="0" y="0" width="400" height="400" fill="#0044ff" />
          <rect x="200" y="200" width="400" height="400" fill="url(#stripes)" />
        </svg>
      `,
      width: 200
    }
  ]
};
const pdf = pdfMake.createPdf(pdfDoc);

pdf.open();

[matroskin]

@jpsilva managed to solve the problem?

[hielfx]

I'm also facing this issue with v0.1.68

[ThePongBRIKL]

Hi, i also got this issue when working on client side. any update soon ?

[QuentinJanuel]

Hello, I have this issue as well.
Anyone knows how can I at least force the unminified version on ReactJS production mode?
I hope the bug will be fixed in a near future : )

[ThePongBRIKL]

Hi guy, good news, i just solve this issue !!.
So the issue it come from svg-to-pdfkit dependencies not from pdfmake.

The main issue is constructor of "PDFPattern()" turn it self to "Object" after build.
Then it make this condition away false "if (color[0].constructor.name === 'PDFPattern')"
About line 163 and 171
So that why it not assign your pattern.

How to fix it up to you for me i add more parameter to check it is pattern fill or not.
See my attach below.

If you dont know where then follow this suggestion

• Copy my source.js
• Then paste it to node_modules/svg-to-pdfkit/source.js
• Then run build
• That's it !!

my edit source.js
https://filebin.net/f6ja3bo4pmqqpglz/source.js?t=cnlux7mq

Screenshot - also work well with image pattern.
https://filebin.net/4838bdcuiee8eon1/Screenshot_2020-12-09_143730.jpg?t=lcnl1036

Sorry for my bad English.
Thank you, enjoy hacking everyone.

[liborm85]

Fixed by commit https://github.com/bpampuch/pdfmake/commit/27d4b1c0646d888f78c94ffe37aea1981427a999 (in 0.1 branch) and https://github.com/bpampuch/pdfmake/commit/8ce24e068dc636511871c38bd97b99c3ecf412b7 (in master)

[yagoar]

Hi, we're still getting this issue on version 0.1.70
After building the app for production with create-react-app, the SVG pattern is shown as a solid black box.

Development build result:

Production build result: