SVG serialization

Question

I have RaphaelJS based canvas, where user can do some work. I need to do 2 things:

1. Save users work into database
2. Rastersize SVG (I use Apache Batik for that task)

For 1 https://github.com/jspies/raphael.serialize dumps Raphael's canvas to json, then jQuery.getJSON() to send it to the backend, where I need to convert it back to SVG to feed into Batik.

Does this flow seem reasonable? SVG -> JSON -> SVG conversion seems a bit overhead, is there a better way to do this?

Backend runs python/django. I use standard json package for JSON -> SVG, but sometimes it fails with syntax errors in the incoming json (mainly in font style properties). Did anyone face these issues?

What's the best way to store this data in the database? Just as a string?

Answer 1

Raphael.Export saves elements to SVG in any browser that Raphaël supports:

https://github.com/ElbertF/Raphael.Export

I've used it to save Raphaël drawings as PNGs server-side using Batik.

Answer 2

If you can get a handle on the root <svg> element from Raphael then you can convert this to the raw XML source (on the client) and just send that:

var svgAsXML = (new XMLSerializer).serializeToString(svg);