search

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
649 stars 98 forks source link

Rendering svg images to pdf #145

Closed cl10k closed 3 years ago

cl10k commented 4 years ago

Hello,

I dynamically create a SVG containing several primitives and images and try to export the SVG to PDF with the help of your library.

And now it get's a bit complicated:

  1. When I run my code from within vscode via Live Server, bitmaps and primitives render fine on my pdf. Though the embedded svg image file does not render at all.
  2. Following your suggestion, I created a codepen example. Here images don't get rendered at all, with svg2pdf.js throwing "Images with external resource link are not supported!". This is probably related to #72.

I know this is not a support forum, but I could not find any documentation about the subject. Would you please be so kind to elaborate/provide an example on how to render svg image files embedded in a svg-container to pdf.

libraries used:

system specs:

Please see this codepen to reproduce the problem.

star.txt - this is the aforementioned svg image I use as an example. Please change the file extension back to .svg (Excuse the hassle, but svg upload is not supported!?)

Regards Christian

yGuy commented 4 years ago

Hi, you overlooked that if you want anyone to debug your problem, a test-case is required that ideally is self-contained. Screenshots of code are not helpful at all. And even more so if you think that the svg might be the problem, it would be really helpful to actually see (a stripped down version of) the svg.

The bug report templates are there for a good reason and simply deleting and ignoring them will dramatically ignore the chances of your issue to be ignored, too.

cl10k commented 4 years ago

You are absolutly right! I updated my initial post.

Creating an example in codepen actually helped to get deeper into the problem. So thanks for your reminder!

yGuy commented 4 years ago

Thanks! Very good report, now, that really helps.

The images you are using are just URLs and thus need to be fetched asynchronously in order to be processed. AFAIK this is not automatically possible with the 1.5 API you are using - this commit: https://github.com/yWorks/svg2pdf.js/commit/6d62fb784512b88b25e31083f97ecac037b93763#diff-b0c10d70e6cf668d1c7abc09feaaa86e should change that, but it's not yet in an official release. You might be able to create your own prerelease and check with it. This will require a few (async) adjustments in your code. The alternative that woudl work with 1.5 would be to do that externally as also mentioned in #72: use data-urls as images sources. Basically this is what the improvement patch also does, but this requires asnychronous loading of the images and thus the major rewrite (and a CORS friendly image server).

cl10k commented 3 years ago

Hi,

thanks for your Input!

We ended up buffering our svgs as objects in a hidden DOM container, extracting the contentDocument and converting it to inline svg.

This works reasonably well at the moment.

Greetings from Stuttgart :) Christian