SVGEditor

Free online SVG editor — preview, share, React & PNG

Open source

Subtract SVG Paths

Keep the first path and punch the second out of it — discard the cutter, not an overlap clipPath and not a compound hole

Exclude paths? Exclude pathsUnite paths? Unite paths

FAQ

Quick answers

How do I subtract SVG paths?
Paste two overlapping paths and click Subtract. A luminance mask paints the first path white and the second black, then that mask is applied to the first path (A minus B). The second path is deleted so only the cut first shape remains.
How is subtract different from intersect?
Intersect clips the first path to the second only, so you keep the overlap. Subtract punches the second silhouette out of the first with a mask. The old subtract-svg-paths-online URL redirected to Intersect — this page is the minus winner.
Does subtract join the paths into one evenodd compound?
No. Create Compound Path concatenates d with fill-rule evenodd (a donut stays one path). Subtract leaves the first path’s d alone and uses a mask to punch the hole.
What happens to the second path after subtract?
It is removed. Exclude SVG Paths is the XOR: both leftover crescents stay as two masked shapes. Unite keeps the solid overlap instead of cutting.
Exclude paths → Unite paths → Intersect paths → Create compound path →

Privacy Terms

Open full editor →

Source

Type or paste SVG markup. The preview on the right updates as you type.

Ready

Live preview

PNG export · 2× for retina