raphael-svg-buildjson

// loop through the 'paper' variable from Raphael JS and build up the JSON object describing all images and paths within it.

buildJSON = function(paper) {
    var svgdata = [];
    svgdata.push({
        width: 390,
        height: 400
    });

    $.each(paper,
    function(i, o) {
        var node = o;


        if (node.type == "image") {
            var object = {
                type: node.type,
                width: node.attrs['width'],
                height: node.attrs['height'],
                x: node.attrs['x'],
                y: node.attrs['y'],
                src: node.attrs['src'],
                transform: node.transformations ? node.transformations.join(' ') : ''
            }
        }

        if (node.type == "path") {
            var path = "";

            $.each(node.attrs['path'],
            function(i, group) {
                $.each(group,
                function(index, value) {
                    if (index < 1) {
                        path += value;
                    }
                    else {
                        if (index == (group.length - 1)) {
                            path += value;
                        }
                        else {
                            path += value + ',';
                        }
                    }
                });
            });

            var object = {
                type: node.type,
                fill: node.attrs['fill'],
                opacity: node.attrs['opacity'],
                translation: node.attrs['translation'],
                scale: node.attrs['scale'],
                path: path,
                stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
                transform: node.transformations ? node.transformations.join(' ') : ''
            }
        }


        svgdata.push(object);
    });

    $('#output').val(JSON.stringify(svgdata));
};