16

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?

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • Can you give some example input/output pairs? – Waleed Khan Feb 23 '13 at 01:24
  • So like Venn diagrams? – Waleed Khan Feb 23 '13 at 01:27
  • Those sound like set operations, not boolean operations. And you can't turn two circles into a figure 8. There is a SVG circle but not a SVG figure-8. You might want to use a canvas library like KineticJS for that. – Andrew Mao Feb 23 '13 at 01:27
  • I don't think this is easily possible, since every shape is its own entity. It's not like are drawing pixel on the same location in with canvas. – Felix Kling Feb 23 '13 at 01:27
  • @FelixKling Well i guess that the new generated shape means that the 2 shapes that were ''unioned'' together will be deleted leaving the new shape as a new entity. – nicholaswmin Feb 23 '13 at 05:40
  • possible duplicate of [Boolean operations on a SVG pathstring](http://stackoverflow.com/questions/12633444/boolean-operations-on-a-svg-pathstring) – Robert Longson Feb 23 '13 at 10:08
  • Looks like PaperJS has this now, if JS is you preferred language. http://paperjs.org/examples/boolean-operations/ – Sid Datta Sep 15 '22 at 23:17

1 Answers1

9

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.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167