yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
643 stars 96 forks source link

Incorrect Gradient rendering in svg2pdf #275

Closed santthosh7 closed 10 months ago

santthosh7 commented 10 months ago

Hi All,

We are using svg2pdf , and we observed that linear gradient renders differently in html as compared to the pdf generated by svg2pdf. Issue is reproducible In this Svg2Pdf playground,

We went through open issues of svg2pdf, and realised that there are some issues with percentage values for x and y attributes of linear gradient, so as a workaround we modified those to a value without percentage (100% --> 1) . This seems to fix the above issue but leads to another problem: When stop offsets are quite small , like 1 percent or less, then in the UI, that stop gradient is barely visible , but in the generated pdf it is significantly bigger. This Issue is reproducible here

Please guide us here so that we have a consistent behaviour in both places (UI and PDF)

Thanks , Santhosh

HackbrettXXX commented 10 months ago

Yes, units are not supported: #154.

The other issue is also known. It's an issue in jsPDF: gradients are sampled at 21 equidistant points. This makes hard edges look washed-out. https://github.com/parallax/jsPDF/blob/5d09af9135a2fe049c7d3c8b95df280d22e4a6db/src/jspdf.js#L2080-L2121 I believe there is a better way to realize gradients in PDF, but I'm not sure about the details. Please create an issue or pull request on jsPDF side.