Skip to main content

Booleans

<x:boolean> performs Pathfinder-style boolean operations over filled regions: union, subtract, intersect, and exclude. The children stay editable in the source; the compiler folds them into one combined region and emits it as a single plain <path>. Any operand that can become a filled shape — a basic shape, outlined text, or another x: element — participates.

Compiling…
The four boolean operationsOpen in viewer ↗Edit in Playground →
union (one silhouette), subtract (text punched from a plate), intersect (the overlap lens), exclude (overlap becomes a hole), and a boolean composed inside a warp.
Compiling…
Operands by referenceOpen in viewer ↗Edit in Playground →
A venn lens derived from circles that still draw themselves; one motif stamped at several <use> offsets and fused; a union reused as an operand; live text punched by reference.

Syntax​

<x:boolean op="subtract" fill="#1d4ed8">
<rect x="40" y="40" width="280" height="90"/>
<x:textbox x="40" y="40" width="280" height="90" align="center" valign="middle"
outline="true">PUNCH</x:textbox>
</x:boolean>

Operations​

opEffect
union (default)merge every operand into one region
intersectkeep only where all operands overlap
subtractremove every later operand from the first (document order is back-to-front, so this is Illustrator's Minus Front)
excludeXOR — the overlap becomes a hole

union, intersect, and exclude are symmetric; subtract is order-sensitive. Each operand is first resolved as a region under its own fill-rule (default nonzero), which also cleans up any self-intersections, then the op folds over the operands. The operations themselves are integer-exact and deterministic; curved operands flatten at the profile tolerance.

Paint​

The paint attributes go on <x:boolean> and style the result — a boolean yields one region, so per-child paint is ignored.

AttributeApplies to
opthe operation (see above); default union
fill, stroke, stroke-width, opacity, transform, …the result's paint

The result's contours carry deterministic opposite windings for holes, so it renders identically under either fill rule.

Operands​

As children. Each element child is one operand, lowered to path geometry exactly like <x:warp> children: basic shapes convert, text participates through its outlined form, and nested x: elements compose (a boolean can wrap a warp and a warp can wrap a boolean).

By reference. A <use href="#id"> child is an operand that borrows the target's geometry without consuming it — the target keeps rendering wherever it is. This is the derived-shape form: a venn lens over circles that still draw themselves, or a plate punched by a motif that is also its own artwork. The <use> element's own transform and its x/y offset both apply (composed in SVG's order), so one motif can be stamped at several placements and fused. The operand's fill-rule is read from the <use> element itself; legacy xlink:href is accepted.

Binding time. A <use> operand is resolved at compile time — it borrows a snapshot of the target's geometry, unlike SVG's own live <use>. Later animation, script mutation, or any change to the target does not update geometry derived from it; re-compile to re-derive.

Stroke expansion​

A plain-shape operand's stroke ink joins its region (Illustrator expands strokes before Pathfinder): the stroke is converted to fill geometry, honoring stroke-width, stroke-linecap, stroke-linejoin, and stroke-dasharray / stroke-dashoffset. An evenodd operand pre-resolves its fill (evenodd) union stroke (nonzero) so the mixed fill rules never meet. <use> and nested-x: operands stay geometry-only.

Degradation​

A child that cannot become path geometry is skipped with a marker — never silently dropped from the algebra. An unknown op emits the children un-combined behind a marker. A legitimately empty result (for example, a disjoint intersect) emits an empty <g>; an element with no usable geometry at all emits only a marker. Plain viewers skip the subtree entirely.

How it lowers​

To one plain <path> carrying the boolean's own paint (holes expressed as opposite-wound contours). The backend is the i_overlay engine behind a swappable seam. v1 supports the four single-output ops only — no multi-output Pathfinder modes (Divide / Trim / Merge).

See also​

  • Offset (inset & outset) — grows or shrinks a region, sharing the same boolean pass for cleanup.
  • Connectors — the other diagramming primitive.
  • Warp — compose a boolean under a warp, or vice versa.
  • Create outlines — how text becomes the geometry a boolean can punch.