drawSvgPath doesn't work for me

[oliversturm]

What were you trying to do?

I attempted to use several SVG icons from https://heroicons.com/ in a PDF document.

Why were you trying to do this?

Hm... I wanted icons? Sorry, funny question.

How did you attempt to do it?

For example, I used this SVG path:

const path = 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
page1.drawSvgPath(path, {
  x, y, scale: 2, borderColor: grayscale(0), borderWidth: 2, borderLineCap: 'Round'
});

This is the check-circle icon from https://heroicons.com/ . It should appear like this:

What actually happened?

But instead I get this:

In this case, at least I can see the main part (check mark) of the icon - but the outer circle isn't there, with the exception of the broken fragment on the right edge. In the case of some other icons I tried (for instance this exclamation one: M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z), parts of the drawing are simply missing.

What did you expect to happen?

I guess those icons should render correctly, at least I don't know a reason why they shouldn't.

How can we reproduce the issue?

I believe it should be possible to reproduce by copying&pasting my code above. The site https://heroicons.com/ has many other icons, and I have only found one (M5 13l4 4L19 7 - a simple check mark) that renders as expected.

Version

1.17.0

What environment are you running pdf-lib in?

Browser

Required Reading

• [X] I have read www.sscce.org.
• [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
• [X] I have read Smart Questions.
• [X] I have read 45 GitHub Issues Dos and Don'ts.

Additional Notes

Towards the end of this report I was beginning to think you didn't really want to hear about it. More or less the most complicated bug report form I've filled in so far - just my 2p.

[oliversturm]

Sorry for the follow-up, but one item I forgot to mention: of course I tried various options with the drawSvgPath call. For instance scale: 1, borderWidth: 1 (and also leaving these out entirely) - none of these make a difference. I see that the SVG icons are all defined with stroke-linejoin="round", and I'm not sure this is currently supported. Maybe I'm wrong, but I didn't think that these settings should result in the partial rendering I'm seeing.

I don't know too much about SVG paths and perhaps there's a perfectly good explanation for all this. Please feel free to point it out in case I'm doing it wrong or my expectations are off the mark!

[oliversturm]

Here's a fiddle to demonstrate the issue - on the basis of the demo fiddle.

[Sharcoux]

We might have a fix for this. We're almost done @Hopding (I know we say that for a while ^^).

[dcsline]

In my opinion, it is due to the svg. I used a different svg file. With Inkscape I generated a b / w svg file from it. If you look at the xml code you can see that the character consists of 2 paths. So I work with two path variables in the PDF sample (a - for the circle, b - for the confirmation sign). The output file shows the desired / expected outputs. Here my pdf-lib sample: //############################################################################

Click the button to draw SVG paths with pdf-lib

Create PDF

(Your browser will download the resulting file)

//############################################################################

ex2.pdf

[Hopding]

@oliversturm thanks for reporting this issue! The SVG embedding code definitely isn't bullet proof. It's based on the SVG embedding code used by pdfkit. @Sharcoux's PR should improve pdf-lib's SVG support quite substantially and hopefully fix this bug.

[Hopding]

Also, thanks for the feedback on the bug report form @oliversturm. This was my first stab at solving the flood of unactionable issues I was receiving that were sucking away my time. Now that I've received feedback (from you and others) and had a chance to read several reports submitted with it, I decided to make some changes. The updated version of the form should be less heavyweight and burdensome to fill out. I'd appreciate your thoughts on it! 👍.

[lachlansmith]

Hi, @Hopding has this issue been resolved? I'm seeing similar behaviour still.

text.svg

text.pdf

[dcsline]

I could not adjust your problem. I have take my sample (see my message from 03 Nov 2021) and update only the defined svg path information with the path details from your text.svg. My test program create a new pdf with the complete content (see Appendix) ex20220627.pdf

[Sharcoux]

Can you give a try at @cantoo/pdf-lib and see if it solves your issue?

[ffff65535]

Would like to add some test paths to this. Version: 1.17.1 For reference I used the same paths to generate on HTML and PDF, to compare (with coloured margins/rectangles drawn outside).

• x_cross: 'M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z', // not filled

• plus_circle: 'M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16z', // not filled, inside circle broken

• inside_disk: 'M12 20 a8 8 0 100-16 8 8 0 000 16z', // broken

• play: 'M16.394 12L10 7.737v8.526L16.394 12zm2.982.416L8.777 19.482A.5.5 0 018 19.066V4.934a.5.5 0 01.777-.416l10.599 7.066a.5.5 0 010 .832z' // throws exception: app.component.ts:56 Could not draw path play: TypeError: Cannot read properties of undefined (reading 'toString')

• HTML results (as expected):

• PDF results (see errors above commented after data):