What is the best way to serialize SVG from the client DOM?

Question

I am working on interactive SVG/AJAX interfaces where elements are created and repositioned on-the-fly by users. I'd like to support the ability for users to export their current view to a PNG image and/or an SVG document. I'd really like the SVG document to be as simple as possible (without a lot of nested transforms). Is there any framework that already supports this?

I'm currently asking my users to use the Ctrl+Alt+PrntScrn technique, and I don't want to ask them to install any software/plugins.

The server-side code is implemented in PHP right now, if that helps. I've already implemented the ability to generate a PNG image from the "original" document (before the client makes any modifications) using ImageMagick.

Answer 1

I'm assuming you need this to work only in browsers that support SVG.

Firefox, Safari, and Opera provide the non-standard XMLSerializer API, so you could do something like this:

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

From there, you can send it to the server and receive a PNG in return.

Here's Mozilla's developer page on serializing XML from the DOM.

Answer 2

Opera has implementation of W3C's DOM→XML serializer. In XML mode innerHTML returns well-formed XML in Gecko.

HTML5 <canvas> can export its content as PNG file using toDataURL() and it's possible to paint any <img> element on canvas using drawImage(), so it should be possible to create <img src="data:application/svg+xml,…">, paint it on canvas and export as data: URL.