wkhtmltopdf failure when embed an SVG

Question

Has anyone in this vast space has ever had the luck to successfully create a PDF with an embedded SVG on an HTML? I've been receiving segmentation fault all the time.

Or perhaps is there any other way to embed an SVG into an HTML file and then export it to PDF instead of wkhtmltopdf?

Solution 1

I had similar problem. Seems like javascript embedded in SVG image can cause segmentation fault.

I was generating SVG graphs using pygal Python module. To successfully generate PDF from HTML with SVG graphs I had to do several things:

1. Remove reference to javascript. (In case of pygal add js=() key to a graph constructor).

2. Specify image size in svg tag, like

   <svg ... width="300" height="200">
   

   (In case of pygal use explicit_size keywoard)

3. Embed SVG image into img tag in base64 encoded form, like

   <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">
   

I was using 11th version of wkhtmltopdf.

Solution 2

If this fix doesn't work for others, here's what worked for me with chartist.js, and wkhtmltopdf 0.12.2.1 under Ubuntu 64. (Credit to Panokev)

Add this to your javascript before all other JS.

{

Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};

Definitively set width style for chart div, for example - style="width:950px;"

Solution 3

We fixed this problem by adding a width and height attribute to the svg besides the viewbox attribute.

Solution 4

Right .. I managed to pull it off finally ... all needed was a bit of treatment on the original eps file. I opened the file with illustrator and chose to "flatten transparency" .. maybe what it does was to flatten the many layers of the file or something .. then save as svg .. and it rendered nicely in the PDF ..

Hopefully this helps if anyone out there would have the same issue as I did. Thank you! :D

View more solutions

Comments

[okyanet]

Also try removing the opacity property from any tag in the xml file; that solved it for me.

[mehmet]

Is this specific to chartist.js, and what does it do? Can you add more details?

[0x2D]

Expanding the SVG file into the SVG tag did it for me. Putting it within the img tag did nothing, unfortunately.

[cseelus]

This is a polyfill, which might also help with other Javascripts, as wkhtmltopdf uses QtWebKit which has problems with Function.prototype.bind. Not specific to SVG files other than ones that make use of that though.