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 c

Answer 1

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.

Answer 2

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.