Normalize a SVG for easy storage

Question

I have a SVG file that I want to store in a database. It would be very helpful to store all the objects as polygons and store the coordinates. However the file I work with was exported from Ilustrator. It does contain polygons but also transformed rectangles and other forms. The elements don't have to be rendered with absolute precision so rounding errors are not an issue.

How can I convert the transformed rects?

This is ok:

<polygon points="2694.423,2972.209 2685.76,2982.961 2702.282,2996.274
2710.938,2985.526   "/

and can be stored as a list of coordinates. This is problematic

<rect x="4316.474" y="2236.01" transform="matrix(-0.3208 -0.9471 0.9471 -0.3208 3591.1353 7063.0771)" width="22.991" height="15.92"/>

and should be converted to a polygon as in the first example.

Eventually I would like to use a html5 canvas to display the shapes.

To render the polyon data I've use the kinecticjs framework in the following way:

    function poly (layer, points)
{
    var poly = new Kinetic.Line({
        points: points,
        fill: 'black',
        stroke: 'black',
        strokeWidth: 0,
        closed: true
      });
  // add the shape to the layer
  layer.add(poly);
  return poly;
}

Are there know performance issues with canvas vs svg?. I have about 3000 clickable objects to render.

Answer 1

As to the question:

Are there know performance issues with canvas vs svg?. I have about 3000 clickable objects to render.

The 3000 elements are no problem. But you cannot include events on the individual canvas elements.