How do I create easily a PDF from an SVG with jsPDF?

Question

I'm trying to create a pdf but I have some SVG pictures. I found information about this problem, but I just have to use JavaScript, that's to say, no jQuery.

I found jsPDF here : https://github.com/MrRio/jsPDF

There is the plugin jspdf.plugin.sillysvgrenderer.js (in the same folder) and where we can find an exemple of PDF created in the folder test.

But when I try to generate the PDF on my own, it doesn't work and I don't understand why.

Do you know how to do it?

score 3 · Answer 1 · answered Nov 17 '14 at 15:51

I got this plugin working, but only with SVG file from the tests and the I saw in the doc that only PATHs are supported :(

There is already the issue on github https://github.com/MrRio/jsPDF/issues/384

If paths are ok for here is my code (it's more or less the code from the tests):

function demoSvgDocument() {
    var doc = new jsPDF();
    var test = $.get('013_sillysvgrenderer.svg', function(svgText){
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)

        // Save the PDF
        doc.save('TestSVG.pdf');
    });
}

Another point to consider, you have to run all examples on a server. Otherwise you won't see any results probably because of the security

@SardarFaisal addSVG is not present anymore currently its addSvgAsImage — Owais Ahmed, Jul 14 '23 at 18:34

score 3 · Answer 2 · edited May 23 '17 at 10:31

3

Try canvg for that to covert SVG to Canvas. Then convert the canvas to base64 string using .toDataURL().

More detailed answer is here https://stackoverflow.com/a/35788928/2090459

Check the demo here http://jsfiddle.net/Purushoth/hvs91vpq/

Canvg Repo: https://github.com/gabelerner/canvg

edited May 23 '17 at 10:31

Community

1
1

answered Mar 04 '16 at 06:01

Purushoth

2,673
3
22
36

9

Note that this means the SVG is converted to a bitmap before being integrated into the PDF, so you'll lose the benefits of a vector format (usually lighter, resolution independent). – jcaron Aug 24 '16 at 10:06
1

Yes @jcaron. jsPDF doesn't support SVG export. If you want you can try PDFkit. Check this example http://pdfkit.org/demo/browser.html – Purushoth Sep 19 '16 at 12:41

score 1 · Answer 3 · answered Apr 25 '17 at 08:45

There now is svg2pdf.js which uses a fork of jsPDF. It has been created to solve this exact task: Exporting an SVG to a PDF.

Also in the meantime, jsPDF also added a demo that shows how to possibly export SVG using canvg and the jsPDF canvas implementation.

The two solutions have different advantages and disadvantages, so you might want to try both and see if one of them suits your needs.

score 1 · Answer 4 · answered Sep 21 '17 at 22:06

You can use the canvas plugin that comes with jsPDF to render the SVG on the PDF with canvg. I've had to set a few dummy properties on the jsPDF canvas implementation, and disable the interactive/animation features of canvg for this to work without errors:

var jsPdfDoc = new jsPDF({
    // ... options ...
});

// ... whatever ...

// hack to make the jspdf canvas work with canvg
jsPdfDoc.canvas.childNodes = {}; 
jsPdfDoc.context2d.canvas = jsPdfDoc.canvas;
jsPdfDoc.context2d.font = undefined;

// use the canvg render the SVG onto the 
// PDF via the jsPDF canvas plugin.
canvg(jsPdfDoc.canvas, svgSource, {
    ignoreMouse: true,
    ignoreAnimation: true,
    ignoreDimensions: true,
    ignoreClear: true
});

This seems to me a much better solution than the SVG plugin for jsPDF, as canvg has much better support of SVG features. Note that the width and height properties should be set on the <svg/> element of your SVG for canvg to render it correctly (or at least so it seemed to me).

score 1 · Answer 5 · answered Jan 14 '19 at 21:40

I modified this from: https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e

var yourSVG = document.getElementsByTagName('svg')[0];
//or use document.getElementById('yourSvgId'); etc.

yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var serializer = new XMLSerializer();
var serialSVG = serializer.serializeToString(yourSVG);

var svg = serialSVG;

var blob = new Blob([svg], {type: 'image/svg+xml'}); 
var url = URL.createObjectURL(blob);
var image = document.createElement('img');

// image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});    
//changed above line using babel to code below;

image.addEventListener('load', function () {
    return URL.revokeObjectURL(url);
    }, { once: true });

image.src = url;

//Then just use your pdf.addImage() function as usual;

How do I create easily a PDF from an SVG with jsPDF?

5 Answers5

Linked