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?

Bindweed

This sounds a lot like a problem I recently solved with wkhtmltopdf using SVGs. Which version have you tried? I had more luck using the statically linked 0.9 version to do this. – Shinberg

hsanders, I'm using 0.11.0 rc1 .. how did you embed the file btw? – Bindweed

The SVG we were using was embedded by highcharts (generated on the fly) – Shinberg

Works poorly with PrinceXml, works great with phantom.js -wkhtmltopdf still not working for me. – Pricking

Did you find an answer? Did the answers help you? Accept if one worked maybe? – Calabria

Hi @Jeebsion: as per Nenotlep's comment, would you consider accepting an answer? You can accept your own if this was/is the most appropriate. – Woodhouse

Answer 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.

Aside

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

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

For me width="300" height="300" helped. img tag with width="300" height="300" works too, but the SVG will be rendered in a non-proportionally scaled manner. In contrast, svg tag with width="300" height="300" results in a proportionally scaled SVG image. – Ochoa

Answer 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;"

Mattland

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

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. – Promptitude

Answer 3

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

Bindweed

Answer 4

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

Objection