wicked_pdf, wkhtmltopdf not working with SVG on Heroku

Question

I have a Ruby on Rails 3.2 app using the wicked_pdf gem and wkhtmltopdf 0.9.9 library to produce PDFs on my local machine, which is a MAC OSX 10.7.5 Lion. The app successfully renders HTML pages (that include SVG images) as PDF files, which is the exact behavior we're aiming for the app to accomplish.

On local, we had to use wkhtmltopdf 0.9.9 due to a bug on the 11.0.0 version for OSX.

The problem is that when the app is pushed to production on Heroku, it has to use a different binary: wkhtmltopdf-0.9.9 Linux Static Binary (amd64) and the SVG rendering seems to fall apart. A PDF is produced, but the SVG images are not rendered properly. They are simply blank or square "shells" where the images should be.

We tried using the wkhtmltopdf-heroku gem, but kept getting a "Broken Pipe" error.

There is no error message related to this issue and we don't know where the problem lies with the Linux versions. Any ideas out there?

This is our code in the config/initializers/wicked_pdf.rb file:

if Rails.env.staging? || Rails.env.production?  
  exe_path = Rails.root.join('bin', 'wkhtmltopdf-amd64').to_s  
else  
  exe_path = Rails.root.join('bin', 'wkhtmltopdf').to_s  
end

+1, having a similar problem. PDF generation breaks when I add :javscript_delay to the pdf rendering in the controller and I also get a 'Broken Pipe' error. — ryan508
For what it's worth, I have SVGs rendering on heroku using the 'wkhtmltopdf-binary' gem. I looked into the 'wkhtmltopdf-heroku' gem, but it appears that the 'wkhtmltopdf-binary' gem works fine with Rails 3.2 / heroku. I'd hate to see you have to use prawn, seems like a real pain. — ryan508
I believe it's related to the fact that wkhtmltopdf uses Xserver to render SVG. In version 0.11.0 I need to set use_xserver to true, but I'm not sure if it's possible to use Xserver in Heroku. I believe the problem when you add :javascript_delay and get a Broken pipe error is that javascript_delay is a 0.11.0 command, which substituted the redirect_delay in 0.9.9. — João Daniel

Arman H Arman H · Accepted Answer · 2013-07-14T21:01:05

There is an easy way that works without having to do heavy tinkering and configuration – Base64-encode the SVG file and include it inline in your HTML:

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

I use this method for embedding fonts in CSS, but it works with SVG and other image formats as well.

wicked_pdf, wkhtmltopdf not working with SVG on Heroku

1 Answers