This documentation describes calculating the area of complex SVG elements. There are three algorithms you can use.

All algorithms need the ID of the SVG root element. In the demo, it is tutorial_svg The algorithm will evaluate every element with class area-calculate.

<rect x="352" y="1649" width="774" height="178" fill="#90929C" class="area-calculate random-generate" areagroup="2"></rect>

1. Lazy algorithm 🔗

This algorithm samples every point in the SVG and checks if it lies within the fill of an element. All such points are summed as the total area.

Using 🔗

const areaCalculator = new svgAreaCalculation();
const area = areaCalculator.lazyStupidAreaCalculation('tutorial_svg');

Pros 🔗

• Easy to implement

Cons 🔗

• Memory- and time-inefficient
• Not accurate due to pixel limits (edge points may be misclassified, causing overestimation).

2. Lehoczky heuristic algorithm 🔗

This algorithm samples points from each SVG element and tests whether they fall within other elements to estimate visible area.

Procedure 🔗

1. First (black) rectangle has area a1 * b1.
2. Second (red) rectangle has area a2 * b2, but it intersects the black one.
3. Generate random points in the red rectangle. Example: 10 points.
4. 8 points are not inside the black shape, so the area is (8 / 10) * (a2 * b2).
5. Final area of both rectangles is a1 * b1 + 0.8 * a2 * b2.

Using 🔗

const areaCalculator = new svgAreaCalculation();
const area = areaCalculator.areaInSvgWithIntersection('tutorial_svg', numberOfRandomPoints);

Number of random points 🔗

• LIT_RANDOM_POINTS = 1000 — Fast, low precision
• MOD_RANDOM_POINTS = 10000 — Best balance (recommended)
• HIGH_RANDOM_POINTS = 100000 — High precision, slow

Pros 🔗

• Reasonably accurate with high point count
• Efficient for small numbers of elements

Cons 🔗

• Slow for large numbers of elements

3. Lehoczky merging polygon algorithm 🔗

This algorithm merges all SVG elements into one or more polygons (including gaps), computes area via the Shoelace formula, and subtracts gap areas.

Using 🔗

const intersectElements = new svgAreaIntersection('tutorial_svg');
const area = intersectElements.polygonIntersectionInSvg(show, redraw, color, opacity, group);

Pros 🔗

• Fast and precise

Cons 🔗

• Sometimes polygons merge poorly if they have edges close to each other.

4. Testing 🔗

Lazy algorithm 🔗

• 10 polygons — 32,378 ms — 1,056,609 px — deviation: -5,218 px
• 50 polygons — 270,252 ms — 3,730,421 px — deviation: -2,915 px
• 100 polygons — 456,986 ms — 3,711,372 px — deviation: -7,690 px

Lehoczky heuristic algorithm 🔗

• 10 polygons, 1000 pts — 55 ms — 1,048,854 px — deviation: 2,537 px
• 10 polygons, 10000 pts — 518 ms — 1,050,992 px — deviation: 399 px
• 10 polygons, 100000 pts — 4,769 ms — 1,051,543 px — deviation: -152 px
• 50 polygons, 1000 pts — 1,664 ms — 3,632,566 px — deviation: 94,940 px
• 50 polygons, 10000 pts — 15,994 ms — 3,696,840 px — deviation: 30,666 px
• 50 polygons, 100000 pts — 160,527 ms — 3,717,148 px — deviation: 10,358 px
• 100 polygons, 1000 pts — 6,742 ms — 3,721,066 px — deviation: -17,384 px
• 100 polygons, 10000 pts — 67,215 ms — 3,710,963 px — deviation: -7,281 px
• 100 polygons, 100000 pts — 663,222 ms — 3,696,769 px — deviation: 6,913 px

Lehoczky merging polygon algorithm 🔗

• 10 polygons — 23 ms — 1,051,391 px — deviation: 0 px
• 50 polygons — 267 ms — 3,727,506 px — deviation: 0 px
• 100 polygons — 369 ms — 3,703,682 px — deviation: 0 px