Calculating the area of an SVG Path or Polygon

posted 2012-Apr-6

Someone on Stack Overflow asked, “How do I calculate the area underneath a Bézier curve?”

If we approximate an SVG Path with an arbitrary polygon (see this demo) it becomes really easy (and fast) to get a close answer. See the standalone demo, or just play below. The cool part is that it works for any arbitrary SVG Path.

Note that loops appear as ‘positive area’ in SVG, but are calculated as negative area. For example, a symmetrical figure 8 would come out with an area of ‘0’.

Gavin Kistner
06:58PM ET

Oops. This demo is broken on Chrome due to them deprecating and removing an SVG feature. I need to update it.

net.mind details contact résumé other