drawSvgPath doesn't work for me

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

• I have read www.sscce.org.
• My report includes a Short, Self Contained, Correct (Compilable) Example.
• I have read Smart Questions.
• 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.

[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! 👍.

[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.