Here we see an SVG <path>
element using Bézier curves:
We can very simply convert this to a <polygon>
by sampling the path at regular intervals, using getPointAtLength()
:
As seen above, sampling may miss areas important to the shape of the object. The sharp points on the object, for example, are missed by the 9, 15, and 25 sample versions above. We can improve our result by ensuring that control points from the original path are included in the polygon:
The above does not work correctly in Safari v5.0.3 due to this bug (which is fixed in the nightly builds). View source of this page for the pathToPolygon()
function used above.