How to calculate the area of an SVG path c# [closed]

Question

If anyone can help with calculating the area of an SVG path I would be very grateful.

I have a function to get the total length which works really well.

I've seen a javascript method that converts the path in to a polygon:

http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Converting this to c# would be a good route as I have a function that gets the area of a polygon to a sufficient accuracy.

Regards

If there's any doubt as to what's being asked here......

If you know anything about the SVG file format, you'll know that SVG Path shapes are defined by a bunch of coordinates like this:

d="M195.303,64.357 c6.57-6.684,11.9-15.514,10.057-25.154 c-3.689-19.298-27.854-13.204-27.309-0.549 c-0.545-12.655-23.619-18.749-27.309,0.549                c-1.844,9.651,3.502,18.401,10.082,25.087 c1.697-4.813,5.713-8.03,11.482-9.451 c-2.797,1.531-3.809,4.396-3.809,7.812 c0,4.983,4.58,8.4,9.553,8.4s9.553-3.417,9.553-8.4c0-3.416-1.012-6.28-3.807-7.812C189.584,56.263,193.613,59.52,195.303,64.357 z"

c and C define bezier curves

(would have posted the image)

What I am asking is how to calculate the area for such a shape using the coordinates/curve points.

The solution using IronPython and the Inkscape function works really well.

Answer 1

lets consider call the point of the closed poligon (x0,y0)...(xn,yn), you can calculate the area by simple looping through the point with that formula

area += yi+y(i+1) * (x(i+1)-xi)/2 

Just to clarify with x(i+1) and y(i+1) I mean the next point in the sequence. The loop should start from 0 and stop at the n-1 vertex ( so the next point is always valid ) and when the last point is reached consider ptn-pt0 the area should be taken as abs, otherwise you can use the sign to check if the polygon is clockwise or counterclockwise. I just add a drawing to explain how it works so you can extend to handle different types of curves. Lets consider this drawing:

The idea is to calculate the area of the green polygon by algebraic sum the area of each trapezoid individuated by a polygon edge and the x axis, in this case there trapezoid are:

x0,y0 x1,y1 x1,0 x0,0 
x1,y1 x2,y2 x2,0 x1,0
(-)x2,y2 x3,y3 x3,0 x2,0
(-)x3,y3 x4,y4 x4,0 x3,0 
(-)x4,y4 x0,y0 x0,0 x4,0

first two are positive, the last three are negative and as you can see the difference is the green portion, that is the needed area. I'm not so good in drawing, but try to figure out that the resulting coming out by the overlapping trapezoid that works in additive and subctractive way. Even if in the drawing I shown a convex polygon, the algo works for concave polygons as well. In the case an edge is not a segment as a first solution what you have to do is convert it in a list of segment by using the parametric equation on the curve and sampling it, you will obtain a decent approxymation. A better solution is to consider the parametric function of the non linear segment and integrate it respect the X axis ( calculate the area between the curve and the X axis ) and sum it as I sum the area of the linear segments. This involves some math but you can find the help you need here. You just need to use the correct segment equation.