I’m working on a little SVG project using Raphaël. Unfortunately, Illustrator exports polygons in its SVG output which is not supported by Raphaël (only paths are supported). So I wrote an app to convert the SVG polygon string to an SVG path string.

Download Here

the conversion…

poly2path conversion

Note that you only input the points data from the polygon (from the points attribute), not the entire polygon element. The result is the path string for the d attribute of the path element.

The conversion is very simple and based upon the fact that a polygon is a path starting with an absolute moveto, linetos to each of the points, and a closepath (this bug report [yes, a bug report!] was pretty helpful).

I actually wanted to render the output, but I was disappointed to discover that Adobe Air doesn’t currently support SVG.

The main reason for not including it was runtime size concerns (adding it would have increased the runtime size by 15 to 20 percent). Initially, the main pain-points regarding AIR were the size of the runtime, integration with the operating system and native APIs, support for the <canvas> tag and new CSS properties, and JavaScript performance. These priorities, coupled with a trend toward reduced interest in SVG graphics, led to SVG support not being included in the current version of Adobe AIR.


  1. Brandon

    hey- is there any way you can reverse engineer this to do path to poly? im in dire need of polygon points to use for mobile devices, and illustrator keeps giving me paths for some reason. help?

  2. Avishkar Autar

    Not really. path to poly is a far more complex problem as paths can have curves, and trying to figure out the point of a vertex from the control points of a curve is a non-trivial process.

    You probably have a curve (probably unnoticeable) forming your shape. If you can eliminate it, Illustrator should export as a polygon. That said, I don’t know the best/easiest way to do that as I’m far from an expert when it comes to Illustrator.

  3. […] Video of Dmitry talking about Raphaël: http://www.youtube.com/watch?v=2pbPutbfKnM Best tutorial I’ve found: http://cancerbero.mbarreneche.com/raphaeltut/ Convert polygons to paths: http://aautar.digital-radiation.com/blog/?p=3042 […]

Leave a Reply