How do I unite SVG paths online?

Click Unite paths. Path d values are joined into one element with fill-rule nonzero — overlapping areas stay filled like a union.

How is unite different from merge?

Merge only concatenates markup. Unite also sets nonzero so the joined silhouette reads as one solid shape.

evenodd punches a hole in the overlap. Subtract and Create Compound Path use evenodd for holes; unite keeps the fill.

Use Subtract when the second shape should cut a hole, not add area.

FAQ

Quick answers

How do I unite SVG paths online?: Click Unite paths. Path d values are joined into one element with fill-rule nonzero — overlapping areas stay filled like a union.
How is unite different from merge?: Merge only concatenates markup. Unite also sets nonzero so the joined silhouette reads as one solid shape.
Why not evenodd for unite?: evenodd punches a hole in the overlap. Subtract and Create Compound Path use evenodd for holes; unite keeps the fill.
When should I subtract instead of unite?: Use Subtract when the second shape should cut a hole, not add area.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B