Boolean Operations on SVG paths [closed]

Question

As of early 2014, SVG spec does not have any built-in support for Boolean Operations

Boolean operations are methods for altering the inherent geometry of mostly overlapping paths. They allow the construction of complicated shapes by performing operations on simpler shapes and are somehow similar to Constructive Solid Geometry(CSG).

However this question refers to 2D vector paths. The popular path operations are: Union, Substraction,Intersection, XOR(Exclusive Or).

Are there any libraries floating around that would help me out in this?

Answer 1

There's Javascript Clipper, which allows for all the sets of Boolean Operations on paths but under the condition that the input path is a polygon.

• If we have any curves (Cubic/Quadratic Bezier Curves), they can be subdivided to polygons easily using the De Casteljau algorithm.

  • If the subdivision sample is high enough, the result would be a polygon that visually looks like a curve (at the cost of a large amount of data as the number of vertices increases linearly, depending on the fidelity of the subdivision).

Then we can feed the path in JavaScript Clipper for the Boolean Operations.

---

The caveat here is that we lose the inherent "curvy" nature of the path if it contains curves. Doing the "polygonization" mentioned above is, more or less, a one-way street.