SVG is not properly rendered in the pdf
robiXxu opened this issue · 4 comments
Describe the bug
I have a chartWindRose on a page.
(I'm using angular components to create this svg)
( https://codepen.io/robixxu/pen/mdLMbgY )
This is what i get in the pdf
I tried to debug it myself (cloned the lib & npm link in my project but i see no logs - not sure what is going on)
What version are you using (exact version of svg2pdf.js and jspdf)?
"jspdf": "^2.5.1",
"svg2pdf.js": "^2.2.1",
To Reproduce
Steps to reproduce the behavior:
- Copy source from https://codepen.io/robixxu/pen/mdLMbgY
- Test it on online playground (couldn't paste the direct url => 414 Request-URI Too Large)
Expected behavior
I should see the chart
Desktop (please complete the following information):
- OS: macOS Monterey 12.6
- Browser: Tested on
- Chrome - Version 105.0.5195.125 (Official Build) (x86_64)
- Safari - Version 16.0 (17614.1.25.9.10, 17614)
- Firefox - 105.0 (64-bit) <<< not rendering the chart (as expected) & pdf (at all)
The issue is caused by the curly braces in the HTML comments. I think this is a valid bug, as everything between <!-- and --> should just be ignored.
Also, note that in the codepen the same SVG is included twice, probably by accident.
The issue is caused by the curly braces in the HTML comments. I think this is a valid bug, as everything between
<!--and-->should just be ignored.
Removed all html comments https://codepen.io/robixxu/pen/MWGJmzq but i get the same result
Also, note that in the codepen the same SVG is included twice, probably by accident.
Yes, fixed.
The problem is something else. I don't believe the curly braces are a problem. At least they do work in my stripped down test:
The problems are:
There is a bug in your SVG for the path syntax. It's invalid and it seems svg2pdf is less lenient than the browser, here:
You may not have a comma after the MoveTo command, so instead of d="M 0 0,L 1 1" you need to have d="M 0 0 L 1 1". There is no comma allowed between the draw commands: Spec
The other problem is that your font size is given in percentage units. Svg2pdf does not understand this (a percentage of what?). Change your SVG to use absolute font sizes and it will work as in my example.
The problem is something else. I don't believe the curly braces are a problem. At least they do work in my stripped down test:
The problems are: There is a bug in your SVG for the path syntax. It's invalid and it seems svg2pdf is less lenient than the browser, here:
You may not have a comma after the MoveTo command, so instead of
d="M 0 0,L 1 1"you need to haved="M 0 0 L 1 1". There is no comma allowed between the draw commands: SpecThe other problem is that your font size is given in percentage units. Svg2pdf does not understand this (a percentage of what?). Change your SVG to use absolute font sizes and it will work as in my example.
Thank you! I appreciate it.
Have a great day/night!