Download SVG as image

[Brett Thomas]

Hey, suppose you have a dynamic visualization like this example - I'm trying to find the best way to add a button that lets users download a snapshot of the visualization as a static image. 

One option is to scoop up the SVG code and send it to the server, create the image there and send it back to the browser. Any suggestions for an svg to image library? Any standard image format is fine. 

Or, is there a way to do this on the client side? 

Thanks,
Brett

[Jeff Bordogna]

Batik works pretty well for us: http://xmlgraphics.apache.org/batik/

can either send a svg string back to server, or make a request that provides the server a URI to use

not sure of a way to do this client side

[Olivier Pomel]

I second this - we've tried a few server-side rasterization tools
including Batik and rsvg, and we found Batik both simple to deploy and
very faithful to browser-side rendering.

We looked but didn't find any good client-side option, but that was
about 6 months ago.
O.

[Mike Bostock]

There are also options for downloading the SVG itself, rather than
rasterizing it:

http://groups.google.com/group/d3-js/browse_thread/thread/4673910e42de4be4/63e5e1178861737a
http://groups.google.com/group/d3-js/browse_thread/thread/6904969c40c5c487/b20c508e7e67759f#b20c508e7e67759f

Mike

[Benjamin West]

You can probably rasterize clientside using something like this.
http://html2canvas.hertzen.com/
I assume you have good reasons for wanting to do this... On the web
it's usually better to support permalinks to the same view.

-bewest

[Tim Triche, Jr.]

n.b. Mike's solution -- appending a download link using btoa() -- works OK.  

As you note, the styling of the SVG suffers, so it's often better just to provide a print link and 'suggest' that the user print to PDF. 

will have to try the same thing with your neat-o-keen script, thanks!

attached are two examples, a PDF screenshot and an SVG dump, of the same (styled) chord plot (in this case, a subset of co-occurring mutations in a cancer)

I was unthrilled by the SVG, but that's partly because it's CSS styled originally.

the JavaScript to dump a plot to SVG, as used in the above:

 

  html = d3.select("svg")

      .attr("version", 1.1)

      .attr("xmlns", "http://www.w3.org/2000/svg")

      .node().parentNode.innerHTML;

  d3.select("body").append("a")

      .attr("title", "file.svg")

      .attr("href-lang", "image/svg+xml")

      .attr("href", "data:image/svg+xml;base64,\n"+btoa(html))

      .text("Download this plot");

                                              

--

If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.

John von Neumann

[Kai Chang]

A followup to Benjamin's solution: there is an SVG -> Canvas parser called Canvg you can use to copy the SVG graphic to a canvas.

http://code.google.com/p/canvg/

Then extract the base64 image string from the canvas using this technique:

http://stackoverflow.com/questions/934012/get-image-data-in-javascript

Finally, if you want a preview, you can put the the base64 string into an <img> tag:

<img src="data:image/png;base64,<BASE64 STRING HERE>" />

Unfortunately it doesn't pick up CSS styles, so you need to explicitly style with d3. If html2canvas picks up CSS, it might be even better. The base64 part will still be relevant once you have your SVG image in a canvas.

I'm working at a company, Boundary, using this method to save PNGs of d3.js visualizations. Works very well, though we did have to rewrite some visualizations to not use CSS.

[Bob Monteverde]

I've used a slightly different method, since we were doing PDF
generation on the server side already, I used the same tool I was for
that. Using phantomjs on the server, I made a simple script that
takes a URL and an ID that I pull the SVG out of (I simply draw a
clipping rectangle around the SVG... its pretty easy to do.. even
easier if you are lazy like me and us jQuery for the measurements).
Either way lets you print to your choice of image formats, or to PDF,
where its still a vector graphic.

On Aug 17, 10:52 am, Brett Thomas <brettptho...@gmail.com> wrote:
> Hey, suppose you have a dynamic visualization like this

> example<http://bl.ocks.org/929623>- I'm trying to find the best way to