Svg/Vector Graphical Objects Boolean Operations (Union, Intersection, Subtraction)

SVG / vector graphical objects boolean operations (union, intersection, subtraction)

Perhaps I'm missing something, but wouldn't the classes in the java.awt.geom package suit your needs? They deal with two-dimensional shapes; the Area class deals specifically with boolean operations:

An Area object stores and manipulates a resolution-independent description of an enclosed area of 2-dimensional space. Area objects can be transformed and can perform various
Constructive Area Geometry (CAG) operations when combined with other Area objects. The CAG operations include area addition, subtraction, intersection, and exclusive or.

Boolean operations on a SVG pathstring

There is a JavaScript library that allows for boolean operations on SVG paths under the condition that the path is a polygon. Using a high enough sampling, the beziers can be polygonized to such a high quality that the visual result is almost identical to a true curve.

The library is called JavaScript Clipper and it is a port of Angus Johnson's Clipper (written in Delphi, C++, C# and Python), which in turn is based on Bala R. Vatti's clipping algorithm. It is able to handle all polygon cases, including the self-intersecting ones. The library has many extra functions, including all of the boolean operations and a node lightening algorithm for reducing the node count.

Boolean Operations on SVG paths

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.

Algorithm to extract outer SVG path

The term you are looking for is bezier path boolean operations, specifically union for the case you are presenting (this should help you googling).

Paper.js has a javascript implementation:

You can see the examples here.

Subtract one circle from another in SVG

A mask is what you want. To create a <mask>, make things you want to keep white. The things you want to be invisible make black. Colours in between will result in translucency.

So the resulting SVG is similar to your pseudo-markup and looks like this:

<div style="background: #ddf">  <svg width="200" height="200">    <defs>      <mask id="hole">        <rect width="100%" height="100%" fill="white"/>        <circle r="50" cx="100" cy="100" fill="black"/>      </mask>    </defs>
    <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />
  </svg></div>

What's a good library to do computational geometry (like CGAL) in a garbage-collected language?

I would still recommend to proceed with Python and the existing Python binding. When you find it's incomplete, you'll also find that it is fairly easy to extend - Python's C API is designed so that integrating with external libraries is fairly easy (for experienced C programmers).

Vector drawing tool for iPhone development

Try Opacity. A little rough on the edges, but one of the coolest and most unique features they have is export as source code (in Quartz, Cocoa, Cocoa Touch, or Canvas)

---

Related Topics