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


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.

10/22/2008 7:29:37 PM

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.

10/22/2008 10:25:50 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow