How do I merge SVG paths online?

Click Merge paths. Every path’s d is concatenated into one . Extra path nodes are removed.

Is merge the same as unite?

No. Merge only joins markup. Unite sets fill-rule evenodd as a boolean-style compound. Use Unite when you want one evenodd silhouette.

The first path’s fill is kept. Convert colors to variables first if you need tokens.

Yes. Split Compound SVG Paths cuts on each M command.

FAQ

Quick answers

How do I merge SVG paths online?: Click Merge paths. Every path’s d is concatenated into one <path>. Extra path nodes are removed.
Is merge the same as unite?: No. Merge only joins markup. Unite sets fill-rule evenodd as a boolean-style compound. Use Unite when you want one evenodd silhouette.
Do fills of merged paths stay separate colors?: The first path’s fill is kept. Convert colors to variables first if you need tokens.
Can I split the merge later?: Yes. Split Compound SVG Paths cuts on each M command.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B