Hacker News new | past | comments | ask | show | jobs | submit login

Very nice. I was wondering how difficult it would be to capture a particular state of the map (say UK departures) as a PNG for embedding or generating a PDF. Could you do that on the server side?



The site is currently javascript only, the server is only serving static files, and the svg tags are generated in the browser using Raphael.js.

That said, I have already been pondering about this for a previous projects: http://populationpyramid.net and there are solutions : either export the svg tags through an ajax query to a server that would then render it as PNG, or create a script that would create the svg files directly from the data. I did not take time to implement this, though (I have to sleep sometimes...)


I've been looking into a few ways to do exactly that with Raphael. The short answer is that it's possible but a little tricky. I've found three methods so far:

1) If you're using a browser that supports SVG (basically, not IE), Raphael will generate the images as SVG nodes in your DOM tree. You can just grab that entire section of the DOM and send the SVG markup to the server where you render it using the image library of your choice.

2) If you have to support IE the above method won't work. Only IE9 has any SVG support and I've heard reports that it's spotty. In these cases, Raphael falls back on VML, an older MS extension that provides more or less the same experience. Unfortunately, I don't know of a server side generation library that supports VML. What's worse, in my testing, IE won't even print the VML image so you can't even use a PDF writer in the browser.

So, the simplest workaround is use the VML fallback in IE for display but when the user wants to download a final version, generate the same drawing as HTML + Javascript on the serverside and then use wkhtmltopdf on the html. (For those who don't know, wkhtmltopdf is an awesome tool that uses a headless webkit browser to convert HTML files to shockingly good PDFs).

As long as the javascript is triggered on load, wkhtmltpdf will include it in the resulting pdf. This doesn't always work perfectly but odds are it'll work for you.

As an added bonus, SVG bits also seemed to be rendered as vector in the actual PDF. This also prevents any chance of the server side image rendering slightly differently from the user preview.

3) If the wkhtmltopdf method isn't rendering properly or is too exotic for your server, you can try using the great raphael.serialize plugin ( https://github.com/jspies/raphael.serialize ). This works around the SVG/VML problems by exporting the data as a JSON structure. This can be re-rendered inside raphael easily but exporting to PNG is trickier. You can convert the JSON to SVG and render that as in method one, Ben Barnett has a small code example on how to do that: ( http://www.benbarnett.net/2010/06/04/export-svg-from-raphael... ) but there's no complete library for doing this yet so you'll have to write some extra bits yourself. If you do write a library for this, please open source it so I don't have to do it too. ;)

Also, Raphael 2.0 is being launched at jsconf.eu next month so it may have a more clever approach for this but I haven't looked into it yet.


IE9 SVG support is really good. It has some differences in coverage, but is excellent overall.





Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: