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
646 stars 96 forks source link

Having issue in converting SVG to PDF --invalid argument to jsPDF.scale #210

Closed im-hamza-dev closed 2 years ago

im-hamza-dev commented 2 years ago

trying to add svg to pdf using jsPDF and svg2pdf but somehow got this exception: image

let canvasWrapper = document.getElementById("svg-wrapper"); canvasWrapper.innerHTML = jsonFile;

  canvasWrapper = canvasWrapper.firstChild;
  // canvasWrapper.getBoundingClientRect();
  const width = canvasWrapper.width?.baseVal?.value ?? 1200;
  const height = canvasWrapper.height?.baseVal?.value ?? 1000;

  console.log(canvasWrapper, canvasWrapper.width, canvasWrapper.height);
  // Generate PDF
  const pdf = new jsPDF(width > height ? "l" : "p", "pt", "a0");

  const svgOptions = { x: 0, y: 0, width, height };
  pdf.svg(canvasWrapper, svgOptions).then(() => {
    pdf.save("sv3432g.pdf");
  });

Need some suggestions on urgent basis! Thanks

HackbrettXXX commented 2 years ago

Your code looks good, but the bug is probably caused by your SVG. Please provide a small SVG that reproduces the issue. Optimally, the issue can be reproduced in the online playground.

HackbrettXXX commented 2 years ago

That file is huge. Please try to reduce it to something manageable, optimally less than 10-20 tags/elements.

FariJan commented 2 years ago

http://raw.githack.com/yWorks/svg2pdf.js/master/index.html?svg=%253Csvg%2520viewBox%253D%25220%25200%2520300%2520150%2522%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%253E%250A%2520%2520%253Cg%2520style%253D%2522mix-blend-mode%253A%2520normal%2522%2520stroke-width%253D%2522none%2522%2520fill-rule%253D%2522nonzero%2522%2520fill%253D%2522none%2522%253E%250A%2520%2520%2520%2520%253Cpath%2520opacity%253D%25220.4%2522%2520stroke-width%253D%25223%2522%2520stroke%253D%2522%25237f7e7e%2522%2520fill%253D%2522%2523000000%2522%2520fill-opacity%253D%25220%2522%2520d%253D%2522M100.00003%252C100.00003h49.99995v49.99995h-49.99995z%2522%253E%253C%252Fpath%253E%250A%2520%2520%253C%252Fg%253E%2520%2520%250A%253C%252Fsvg%253E

stroke-width="none" causes this error

yGuy commented 2 years ago

I don't see that "none" is a valid value for the stroke-width attribute. Can you point me to the spec that tells what "none" should be? I guess you should simply be using "0" instead if you don't want a stroke or set the stroke itself to none?

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width

FariJan commented 2 years ago

I have no glue why it's there. In my case it was generated by http://paperjs.org/reference/project/#exportsvg. But "none" seems to be interpreted as "1", probably because it's not valid, like you said, and so it's ignored: https://jsfiddle.net/grynvkbu/

yGuy commented 2 years ago

We are not going to implement a lenient parser that will try to make the best out of invalid or broken svg. Please fix the SVG or the tool that created the broken SVG.