SVGEditor

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

Open source

Set SVG fill-rule evenodd

Write fill-rule="evenodd" (or nonzero) on the path you already have — do not concatenate siblings and do not reverse d

Create compound path? Create compound pathChange winding order? Change winding order

FAQ

Quick answers

How do I set SVG fill-rule to evenodd?
Pick evenodd or nonzero, then click Set fill-rule. fill-rule is written on every <path>, <polygon>, and <polyline>. Overlapping subpaths with evenodd show a hole; nonzero keeps the overlap filled.
How is fill-rule evenodd different from creating a compound path?
Create Compound Path concatenates sibling <path> elements into one d and then sets evenodd. This page never joins elements — it only writes the attribute on the geometry you already have.
Does this reverse path winding?
No. Change SVG path winding order rewrites d (clockwise vs counter-clockwise). Unite SVG Paths joins with nonzero so the overlap stays solid. This page does not touch d.
When should I pick nonzero instead?
Use nonzero when overlapping subpaths should stay filled as one silhouette (the default). evenodd punches every other overlap — typical for an icon hole that is already one compound d.
Create compound path → Unite paths → Change winding order → Split compound paths →

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