Question

I’m creating a whiteboard application using SVG in HTML5, and javascript to manipulate the svg element using Javascript array of SVG elements to keep track of my shapes on the whiteboard.

Now I’m trying to save everything on the whiteboard, thus every SVG object in the javascript shapes array to SQL using ASP.NET MVC 3 as my server side.

I want to solve this by serializing the whole javascript array and save it as a string to SQL, then deserialize it when loading a drawing and add it to the current shapes array.

Now I’we been trying to use JSON.stringify to achive this, but with no luck, and results in this error

Uncaught TypeError: Converting circular structure to JSON

Here is the script code

$("#save").click(function () {
    var request = $.ajax({
        url: "/Drawing/SaveDrawing",
        type: "POST",
        data: { s: JSON.stringify(shapes) },
        dataType: "json"
    });
});

All ideas are welcome, just hope my question is somewhat clear

Answer 1

To serialize the SVG, don’t use JSON; instead use XML:

var xml = (new XMLSerializer).serializeToString(mySVGElement);