SVGSketch Learn

How to Use Boolean Operations on SVG Shapes

Union, subtract, intersect, exclude, divide - the five boolean operations and when each one is the right call.

Open SVGSketch

Quick answer

Select two or more overlapping shapes, then choose Shape > Boolean Operations (or press Ctrl+Alt+U for Union). Union merges them, Subtract keeps the bottom shape and cuts away everything above it, Intersect keeps only the overlap, Exclude keeps everything except the overlap, and Divide rebuilds the selection as one compound path whose subpaths are the distinct regions.

Steps at a glance

  1. Select shapes

    T then Shift+click to select two or more overlapping shapes.

  2. Union

    Shape > Boolean Operations > Union (Ctrl+Alt+U) merges shapes into one.

  3. Subtract

    Ctrl+Alt+S keeps the bottom-most shape and cuts away everything above it.

  4. Intersect

    Ctrl+Alt+I keeps only the overlap.

  5. Exclude or Divide

    Ctrl+Alt+X for Exclude (everything except overlap), or Ctrl+Alt+D for Divide, which returns the regions as one compound path.

  6. Boolean on text

    Text works directly, in any font - exactly from the file where SVGSketch can read it, traced where it cannot.

  7. Know what the result keeps

    Curves are flattened to polygons, and style comes from the bottom-most shape.

What each operation actually produces

SELECTIONRESULT
Union Union merges the shapes into one outline. Clipper works on polygons, so the arcs come back as many short segments.
SELECTIONRESULT
Subtract Subtract keeps the bottom-most shape and cuts away everything above it.
SELECTIONRESULT
Intersect Intersect keeps only the area the shapes share.
SELECTIONRESULT
Exclude Exclude keeps everything except the overlap, as one compound path.
AFTER DIVIDEAFTER SPLIT PATH
Divide Divide returns one compound path whose subpaths are the distinct regions. Split Path breaks them into separate shapes.

Step 1: Select two or more overlapping shapes

Boolean operations work on two or more shapes that overlap. Select with the Transform tool (T), Shift+click to add to the selection. Z-order matters for Subtract: the bottom-most shape is the one that survives, and every shape above it is cut away in a single operation. With three shapes selected, two of them are cutters.

Once a selection is eligible, the five boolean buttons also appear in the toolbar. They are hidden the rest of the time, so the menu and the shortcuts are the reliable route.

Step 2: Union - merge into one

Use Shape > Boolean Operations > Union (Ctrl+Alt+U). The shapes merge into a single path with the outline of their combined silhouette. Useful for building chunky logos out of overlapping primitives.

Step 3: Subtract - cut a hole

Place the cutout shape on top, select both, and use Subtract (Ctrl+Alt+S). The top shape is removed from the bottom, leaving a path with a hole. This is how you build keyhole shapes, doughnut rings, and stencil cutouts.

Step 4: Intersect - keep only the overlap

Select two shapes and use Intersect (Ctrl+Alt+I). The result is a single path that covers only the area both shapes shared. Useful for cropping geometry to a specific region.

Step 5: Exclude and Divide

Exclude (Ctrl+Alt+X) keeps everything except the overlap - the inverse of Intersect. Divide (Ctrl+Alt+D) computes every distinct region and returns them as one compound path, with each region as a subpath under an evenodd fill rule. To pull those regions apart into separate shapes, run Shape > Split Path (Ctrl+Alt+P) on the result.

Step 6: Boolean on text

Text can go straight into a boolean operation - SVGSketch outlines it on the way in, so there is no need to convert it first. Converting with Shape > Convert to Path (Ctrl+Shift+O) is still worth doing when you want to see and adjust the outlines before combining them.

Uploaded and Google fonts are outlined exactly, straight from the font file. A system font such as Arial or Segoe UI is not readable that way, so SVGSketch offers two routes instead: enable Local Fonts and it reads the installed file exactly, or let it trace what the browser draws - very close, though not the exact curves the designer drew.

Step 7: Know what the result keeps

Boolean math runs on polygons, so curves are flattened before the operation and the result is a polyline. Union two circles and you get a many-sided path that looks like the circles, not two arcs. For artwork that has to stay curved, model the shape directly rather than deriving it from a boolean.

The result takes its fill, stroke, stroke width, gradient and filters from the bottom-most shape in the selection. Dash patterns, endpoint markers, blend mode and element opacity are not carried over. Open paths and lines are skipped entirely, and an image contributes its bounding box rather than its transparency.

FAQ

What boolean operations does SVGSketch support?

Five: Union, Subtract, Intersect, Exclude, and Divide. They work on paths, primitives, and text outlines.

Does the result stay editable?

Yes. The output is a standard SVG path you can edit node-by-node in the Path Editor.

Can I undo a boolean?

Yes with Ctrl+Z while the document is open. Once saved and reopened, the original shapes are gone - boolean is a destructive operation by design.

How do I use boolean on text?

Select the text with the other shapes and run the operation - SVGSketch outlines the type on the way in. Convert to Path (Ctrl+Shift+O) first only if you want to inspect or edit the outlines. Uploaded and Google fonts outline exactly; for a system font SVGSketch offers to enable Local Fonts or to trace what the browser draws.

Why did my circles turn into polygons?

Boolean math runs on polygons, so every curve is flattened before the operation and the result is a polyline. The outline follows the original closely, but it is made of straight segments rather than arcs.

What happens to fills, strokes and dashes?

The result inherits fill, stroke, stroke width, gradient and filters from the bottom-most shape in the selection. Dash patterns, endpoint markers, blend mode and element opacity are not carried over.

Why does Subtract pick the wrong shape?

Subtract keeps the bottom-most shape in the selection and cuts away every shape above it, so with three shapes selected two of them are cutters. Use Object > Stacking Order > Raise (Ctrl+]) or Lower (Ctrl+[) to set the Z-order before running the operation.

Why did nothing happen when I ran Subtract?

If the shapes do not overlap there is nothing to cut, so the operation stops and leaves both shapes alone rather than consuming them. If the shape on top covers the one beneath completely the result would be empty, and SVGSketch says so instead of deleting your artwork.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch