title: Normalize a SVG for easy storage
body: <p>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. </p>
  
  <p>How can I convert the transformed rects?</p>
  
  <p>This is ok:</p>
  
  <pre><code>&lt;polygon points="2694.423,2972.209 2685.76,2982.961 2702.282,2996.274
  2710.938,2985.526   "/
  </code></pre>
  
  <p>and can be stored as a list of coordinates.
  This is problematic</p>
  
  <pre><code>&lt;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"/&gt;
  </code></pre>
  
  <p>and should be converted to a polygon as in the first example.</p>
  
  <p>Eventually I would like to use a html5 canvas to display the shapes.</p>
  
  <p>To render the polyon data I've use the kinecticjs framework in the following way:</p>
  
  <pre><code>    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;
  }
  </code></pre>
  
  <p>Are there know performance issues with canvas vs svg?. I have about 3000 clickable objects to render.</p>