How do I create a compound SVG path?

Click Create compound. Sibling elements are joined into one d with fill-rule evenodd — the usual icon-hole setup.

How is create-compound different from unite?

Same family of result; Unite is the boolean-worded action. Create Compound is the Illustrator-style name for joining siblings.

Use Split Compound SVG Paths to explode on M.

evenodd does not require opposite winding. nonzero would; this tool uses evenodd.

FAQ

Quick answers

How do I create a compound SVG path?: Click Create compound. Sibling <path> elements are joined into one d with fill-rule evenodd — the usual icon-hole setup.
How is create-compound different from unite?: Same family of result; Unite is the boolean-worded action. Create Compound is the Illustrator-style name for joining siblings.
How do I undo a compound path?: Use Split Compound SVG Paths to explode on M.
Should holes be drawn opposite winding?: evenodd does not require opposite winding. nonzero would; this tool uses evenodd.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B