How do I subtract SVG paths online?

Click Subtract paths. The first path is the base; the second is appended as a hole with fill-rule evenodd.

What if I have more than two paths?

The first stays the base; remaining paths are appended as cutters.

Unite adds area into one silhouette. Subtract punches holes. Intersect keeps only overlap.

Both subpaths must be closed (Z). Close Open Paths first if a cutter is open.

FAQ

Quick answers

How do I subtract SVG paths online?: Click Subtract paths. The first path is the base; the second is appended as a hole with fill-rule evenodd.
What if I have more than two paths?: The first stays the base; remaining paths are appended as cutters.
Is subtract the opposite of unite?: Unite adds area into one silhouette. Subtract punches holes. Intersect keeps only overlap.
Why is the hole not visible?: Both subpaths must be closed (Z). Close Open Paths first if a cutter is open.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B