svgToPdf.js
svgToPdf.js copied to clipboard
cbix
Add support for <path>
It seems svgToPdf isn't able to render <path> elements. Particularly for those of us doing data visualisation, being able to render splines is incredibly important.
I didn't implement this in the first place because the pdfjs library didn't have support for bezier curves and complex filled elements (only rectangles and circles).
But if you have an idea on how to do it, don't hesitate to propose it!
@CBiX Figured as much, though it seems possible to do multi-segment lines See http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html#lines
Will play with it and get back to you...
@aendrew Maybe we should one day switch vrom jsPDF to http://devongovett.github.io/pdfkit/ As far as I see it has everything you might need...
@CBiX I totally ran across that today and nearly used it in a project. In the end I rendered SVG to Canvas and from that to PNG, which I used jsPDF to put into Canvas. Totally not the best way of doing things, but you'd have to basically write a DOM walker to get it to work with PDFKit. Which, TBH, isn't at all a half-bad idea — at the moment, there's no simple way to easily push a SVG doc into PDFKit and then have it spit out a PDF. Which is a shame, because PDFKit is so much better documented than jsPDF and has the ability to draw any kind of SVG path using the exact same syntax as SVG. It can even do clipping masks, which is totally crazy.
The one thing I'm not sure how to approach with PDFKit is group elements, which allow something to be translated in a particular direction (something I do pretty frequently with SVG). I'm not sure how you'd handle a translated group with PDFKit...
Here is code from my (unrelated) project which parses an SVG path (no curves as of writing, but planned). If this function returns a path, simply call pdf.lines(path.acc, path.x1, path.y1, [1, 1], 'DF', path.closed);, where pdf is the jsPDF object. Replace 'DF' as needed.
I fixed it for my own use. but it's not perfect now. Can I send a PR? @CBiX
It supports MmLlQqCcZz commands but not HhVvAaTtSs yet.
And It doen't support holes in path. All holes will be treated as normal shape.
Please let me know if you guys have ideas to handle with holes.
update: All path commands are supported well except arc(A,a). The arc command will be treated as straight line.
Sure, however, I'm not actively maintaining this project anymore. Will try to look into it tho :) Thanks for your work!