pdf-lib Add draw svg

What?

This PR adds support to drawing svg on a PDF Page.

      const doc = await PDFDocument.load(pdfBytes)
      const page = doc.getPage(0)
      page.drawSvg(svg, {
        x: 0,
        y: 100,
        width: 100,
        height: 100,
        fonts: {
              MyFont: await doc.embedFont(require('path/to/MyFont.ttf')),
        },
        fontSize: 12
      })

Why?

drawSvgPath is not enough in most cases to handle correctly the variety of svg users might have to draw on a pdf.

How?

Basically, we parse and interpret the svg xml and convert it into a sequence of instructions, relying on the current API offered by pdf-lib. Some edge cases could not yet be handled, though.

Testing?

We added 3 html test files in apps/web in the PR to test the result. We are currently using it, so it's working. I'll try to make a codesandbox as soon as we get a free time.

New Dependencies?

I needed to add a dependency to parse the html. We are internally using node-html-better-parser which is our fork of node-html-parser, but moving back to node-html-parser is also viable. It's just one file of 21Ko

I also needed to add a dependency to the color lib, in order to parse and convert every possible color format received in the svg.

Screenshots

Anything Else?

Checklist

[x] I read CONTRIBUTING.md.
[x] I read MAINTAINERSHIP.md#pull-requests.
[ ] I added/updated unit tests for my changes.
[x] I added/updated integration tests for my changes.
[x] I ran the integration tests.
[x] I tested my changes in Node, Deno, and the browser.
[x] I viewed documents produced with my changes in Adobe Acrobat, Foxit Reader, Firefox, and Chrome.
[x] I added/updated doc comments for any new/modified public APIs.
[x] My changes work for both new and existing PDF files.
[x] I ran the linter on my changes.

Nov 04 '21 15:11 Sharcoux

We'll check the missing points, but this won't impact the review. Don't hesitate if you have questions @Hopding

Nov 04 '21 15:11 Sharcoux

@Hopding I think I'm done here. We will keep improving the support for wider svg instructions but there is no reason to wait for those improvements before publishing what we already have.

I didn't add unit tests. I don't have anyone free to do that for now. We might add them later. For now, just the fact that we have no impact on any existing code should be enough.

I also fixed this. I don't know if there was an open issue about it.

Tell me if you need something.

Nov 09 '21 03:11 Sharcoux

@Sharcoux thanks for all the work you've done on this! Reviewing and merging this is going to take some time as it's a pretty hefty PR, but know that it is on my agenda.

I haven't dug in too far yet, but I will note upfront (as this has caused confusion in the past) that adding new dependencies to pdf-lib is a rare occurrence (for reasons documented here). That's not to say they can't be added, just that they have to match certain criteria.

Nov 27 '21 19:11 Hopding

I understand your concern about adding a dependency.

There is no way to treat an xml like svg without a parser and a way to convert the colors. But if you want, we can make the libs as optional dependencies and display a warning when people try to use drawSvg without the dependencies in their app. I'm just not sure if this is doable in a way that is compatible with Webpack...

About the colors, we could also add our own implementation in pdf-lib if needed.

Dec 07 '21 22:12 Sharcoux

@Hopding Happy new year =)

Have you thought more about this PR?

Jan 14 '22 00:01 Sharcoux

anything we can help to move this forward?

Jan 31 '22 11:01 siuying

Oh, by the way, if anyone want to try the lib with this patch, you can add "@cantoo/pdf-lib": "1.17.0" to your package.json.

Feb 08 '22 15:02 Sharcoux

@Hopding Would it be possible to fund merging of pull requests? This PR is a very important improvement to PDF-Lib, and yet it has been 6 months and it has not been merged yet. I am sure that a lot of us would be willing to contribute money to get some of the more important PR's merged ( there are other PR's with important fixed that need to be merged... )

May 10 '22 17:05 dan-willett

I wonder if Hopding hasn't abandoned the lib. We might be able to maintain our branch and include the most important PRs. More than money, we would probably need people to confirm that the PRs are working as expected before merging them.

May 11 '22 23:05 Sharcoux

@Sharcoux I would like to see it forked off to a separate project. Of coarse this project (PDF-Lib) would be free to merge changes back in. But I would like to see a different name. The name PDF-Lib conflicts with PDFLib. The name should be unique and not conflict with other projects such as jsPDF, PDFjs, PDFKit, PDF Make, etc. Maybe something like Open PDF LibJS and come up with a logo to match...

This is the only Javascript library that I am aware of that allows to load existing PDF files and add to them. Which is a very important feature. I am currently using jsPDF to draw SVG's and then loading the PDF page into PDF-Lib, I am hoping that with this PR I would be able to not have to use jsPDF to import the SVG's. I like the jsPDF api, but the ability to load existing PDF files is a must have. I would like to see feature parity with jsPDF, PDFKit, PDF Make, html to pdf and markdown-pdf which would make this library the one solution to use.

I would like to see hopefully at least 10 people with write access that would be able to review and approve PR's, hopefully with consensus, but I would like to have enough people involved so that the absence of a few people will not block the progress of the project.

Also, I would like to see a road map for requested features, and the ability for people to get features added through bounties, contests, or events such as the Google Summer of Code or Hacktoberfest.

PDF generation is such an important capability and yet there is not a good open source project that fulfills the above requirements currently.

I am not sure that the structure of PDF-Lib is the best compared to the other projects, but it does have the one thing that is a requirement for the programs I am working on, and that is the ability to load existing PDF's and modify them.

May 23 '22 17:05 dan-willett

For people needing svg support, and maybe some other additions, and @dan-willett, we will do our best to maintain this fork. I opened the Issue section.

Oct 22 '22 10:10 Sharcoux

I am using your patch to draw svg but having bad results.

below is the svg drawn by this lib https://ibb.co/D5cFZzt

but the actual svg is as follow https://ibb.co/pyR0KY6

Nov 10 '23 06:11 Shasikhan

I don't see your images. Can you provide actual screenshots and the svg itself?

Nov 10 '23 09:11 Sharcoux

Simulator Screenshot - iPhone 14 - 2023-11-10 at 11 54 59

Nov 10 '23 14:11 Shasikhan

@Shasikhan Those are png. I need the original svg if you want me to help you.

Nov 10 '23 19:11 Sharcoux

@Shasikhan Those are png. I need the original svg if you want me to help you.

Here is the svg

Nov 11 '23 12:11 Shasikhan

Sharcoux any tips? I have shared the svg in comment above.

Nov 21 '23 07:11 Shasikhan

Ah, my bad, I missed your message. We'll have a look.

Nov 21 '23 08:11 Sharcoux

The fix has been released in v1.19.19. Please, open tickets directly on our repo there. Will be easier to track.

Nov 24 '23 10:11 Sharcoux

pdf-lib
pdf-lib copied to clipboard

Add draw svg

What?

Why?

How?

Testing?

New Dependencies?

Screenshots

Suggested Reading?

Anything Else?

Checklist

pdf-lib pdf-lib copied to clipboard

Add draw svg

What?

Why?

How?

Testing?

New Dependencies?

Screenshots

Suggested Reading?

Anything Else?

Checklist

pdf-lib
pdf-lib copied to clipboard