search

Hopding / pdf-lib

Create and modify PDF documents in any JavaScript environment
https://pdf-lib.js.org
MIT License
6.9k stars 656 forks source link

drawSvgPath doesn't work for me #1069

Open oliversturm opened 2 years ago

oliversturm commented 2 years ago

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:

image

What actually happened?

But instead I get this:

image

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

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 commented 2 years ago

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 commented 2 years ago

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

Sharcoux commented 2 years ago

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

dcsline commented 2 years ago

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

(Your browser will download the resulting file)

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

content_confirm_bw svg ex2.pdf

Hopding commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

Screen Shot 2022-06-25 at 12 07 31 pm

text.svg

Screen Shot 2022-06-25 at 12 07 17 pm

text.pdf

dcsline commented 2 years ago

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 commented 2 years ago

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

ffff65535 commented 2 years ago

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