title: Utility in framework for defining SVG path strings more easily?
body: <p>I am trying out the svg capabilities via the Raphael framework (it's path docs are <a href="http://raphaeljs.com/reference.html#Paper.path" rel="nofollow">here</a>).  I find writing the path string to be very tedious because I have to constantly look up the format specs when either creating a new path or looking at one already written.  Is there a framework that simplifies this process?  For example, instead of having to write something like:</p>
  
  <pre><code>function pathStringForBoxWithQuad(x1, y1, x2, y2) {
      var edgeLength = 8;
      var str = "M " + (x2 + edgeLength) + " " + y1; // move to top right
      str += " L " + x1 + " " + y1; // line to top left
      str += " L " + x1 + " " + y2; // line to bottom left
      str += " L " + (x2 + edgeLength) + " " + y2; // line to bottom right
      str += " Q " + x2 + " " + (y1 + (y2 - y1) / 2) + " " + (x2 + edgeLength) + " " + y1; // quadratic back to top right
      str += " Z";
      return str;
  }
  </code></pre>
  
  <p>you could write something like the following, but it would give the same string back:</p>
  
  <pre><code>function pathStringForBoxWithQuad(x1, y1, x2, y2) {
      var edgeLength = 8;
      var str = new SVGPathString()
              .moveTo(x2 + edgeLength, y1)
              .lineTo(x1, y1)
              .lineTo(x1, y2)
              .lineTo(x2 + edgeLength, y2)
              .quadTo(x2, (y1 + (y2 - y1) / 2), x2 + edgeLength, y1 );
      return str;
  }
  </code></pre>
  
  <p>Does anything like the second method exist in popular frameworks?  I find this type of path construction alot more reader friendly.</p>