svgvector-graphics

Converting an svg with fill-rule="evenodd" to fill-rule="nonzero"

I have a SVG with a single path with fill-rule="even-odd" applied.

I need to convert it to a font and to do that I would need to use an SVG without fill-rule="even-odd". So I was wondering if there's a way to get rid of that programmatically.

<svg xmlns="http://www.w3.org/2000/svg" width="2778" height="2778" viewBox="0 0 2778 2778" version="1.1"><path d="M434 800c-5 3-8 7-8 13 0 7 3 10 15 18 28 17 48 36 65 61 20 30 30 65 27 102-1 14-2 19-6 35-8 31-19 62-34 100-18 41-26 67-33 106-3 20-4 46 0 62 5 22 13 41 25 60 22 33 55 55 95 64 12 2 46 2 58 0 28-6 53-19 73-37 18-17 32-40 39-61 1-4 3-7 3-7 0 0 2 2 3 5 12 19 32 40 48 52 35 26 82 39 155 45 12 1 152 2 672 2l656 0 7-3c34-10 57-39 57-73 0-5 0-12-1-16-3-13-17-48-29-68-18-30-43-54-70-67-18-10-45-17-69-19-8-1-77-1-203-1h-192l0-33 1-33 3-4c1-2 4-5 6-6 3-2 5-3 110-3 99-1 107-1 112-2 15-5 28-16 34-29 11-21 7-45-9-62-9-10-14-13-70-34a316635 316635 0 00-178-67c-40-15-75-28-79-30-27-11-57-10-82 4-3 2-37 28-75 60-38 31-70 56-70 56 0 0-8-4-18-9-69-33-212-101-238-112-33-13-73-23-110-27-19-2-70-2-87 0-51 7-91 19-137 41-10 6-23 13-29 16-121 73-181 217-146 354 1 6 2 11 2 19 0 20-4 37-13 55-16 32-43 52-79 62-11 3-35 4-47 2-52-9-89-48-100-102-2-11-2-34 0-49 5-29 12-52 36-111 21-52 27-70 34-96 8-35 8-70 0-101-6-20-14-38-24-54-19-30-47-56-79-75-10-6-15-6-21-3m617 70c-2 0-9 1-16 2-37 4-78 15-112 32-38 17-64 35-90 61-46 46-74 101-84 167-3 19-3 61-1 80 3 16 8 39 12 51 5 13 15 33 23 45l7 10-4 5-3 5 4-4 4-4 12 12c14 15 25 22 43 31 20 10 42 16 71 20 35 6 60 7 131 7 59 0 60 0 70-6 5-3 13-11 16-17 2-6 3-16 1-24-1-6-10-23-16-33-4-7-5-8-5-13 0-11 12-18 22-12 6 4 17 24 24 44 3 8 3 11 4 21 0 14-1 21-6 31a3898 3898 0 00-4 8c0 1 8 1 18 1 15-1 18-1 23-3 9-3 18-12 21-20 3-6 3-7 3-15-1-13-4-21-18-44-6-10-5-18 3-23 3-3 11-3 15 0 8 5 24 37 28 56 3 16 0 34-7 45l-3 5 18 0c18 0 19-1 25-4 17-8 29-28 27-46-2-15-15-42-33-68-31-42-81-86-135-118-12-7-15-10-15-17 0-3 13-44 38-125 21-67 38-122 39-123 1-2-32-11-55-15-22-4-32-5-61-5-17-1-32-1-34 0m640 29c8 10 28 41 35 53 15 26 23 44 28 65 3 13 3 33 0 44-8 30-32 53-61 60-12 3-33 2-43-1-19-6-35-18-45-34-22-33-18-73 13-129 9-16 23-38 33-52 4-5 7-10 7-10-2-1-20 12-84 65-41 33-75 60-77 61-2 1-4 1-5 1-2 0-21-9-45-21-51-25-108-52-151-72-57-27-66-31-67-29 0 0-65 202-72 227-1 2 0 2 4 5 8 5 34 23 43 29 59 44 102 95 123 145 11 26 12 48 1 70-2 4-4 9-6 11l-2 3 401 0 402 0 5-3c8-4 16-12 20-19 7-14 3-32-13-56-5-9-6-11-6-14 0-11 11-19 21-14 5 3 13 16 20 35 7 17 8 25 8 38-1 12-2 17-7 27l-4 6 19 0c19-1 20-1 25-3 8-4 16-12 20-19 2-5 3-8 3-13 0-12-6-27-17-44-6-10-7-14-4-20 4-7 14-10 21-6 6 4 19 27 25 45 3 9 3 10 3 24 0 15-1 21-7 31l-3 5 16 0c12-1 17-1 22-3 8-3 15-8 21-15 7-8 9-15 10-26 0-10-2-18-10-37-18-45-41-74-73-89-13-7-24-10-43-14l-11-2-209-1-208 0-4-3c-7-5-6-4-6-51 0-38 0-43 1-48 5-17 16-29 33-35l7-2 78-1c61 0 78 0 77-1-3-4-5-14-5-23 0-15 4-27 13-37 3-3 5-5 5-5 0-1-3-2-7-3-3-1-62-23-132-49-69-27-127-48-130-49a424 424 0 00-6-1l-3-1 3 5m-947 1588v16l-4-3c-5-5-10-6-16-6-15 0-25 11-26 28-1 14 4 25 13 31 3 3 5 4 11 4 8 0 12-1 18-6l4-3v8h19v-85h-19v16m76-15c0 1 0 20 0 43l1 40 9 1 10 0v-8l3 3c5 4 10 6 17 6 11 0 18-5 23-16 2-5 2-7 2-16 0-8 0-10-2-14-3-8-6-12-12-15-4-2-6-2-11-2-7 0-12 1-17 6l-3 3v-32h-10c-6 0-9 0-10 1m1139 42v42h20l0-12 0-12 12 12 12 12 11 0c6 0 11 0 11-1 0 0-7-7-16-16l-15-16 15-14 14-13-11-1-11 0-11 11-11 10v-45h-20v43m-1640-40c-21 3-34 16-36 37-1 14 3 26 13 35 9 9 14 10 31 10 12 0 14 0 19-2l6-2v-17l-6 3c-12 6-25 5-32-1-11-9-12-30-3-41 6-6 10-7 20-7 7 1 10 1 15 4l6 3 0-9 0-9-7-2c-7-2-20-3-26-2m712 4c0 1-7 19-14 39-8 20-14 37-14 38 0 1 4 1 10 1h11l2-7 3-7 32 0 3 7 2 7h11c5 0 10 0 10-1 0 0-7-18-15-40l-14-40h-26l-1 3m332 38v40l21 0c29-1 37-3 46-14 5-6 8-11 9-20 3-18-5-35-20-42-8-4-17-5-37-5h-19v41m-788-29v8h-9v14h9l0 12c0 22 2 28 9 32 3 2 6 3 16 3l13 0v-14l-8 0c-10-1-10-1-10-19v-14h20v-14h-20v-17h-20v9m809 29v24l8 0c18-1 25-8 25-25 1-10-2-16-9-20-5-3-6-3-15-4l-9 0v25m-982-22c-5 2-7 3-11 7l-3 4 0-5v-5h-19v61h19l0-18c0-15 1-18 2-21 5-7 10-9 20-7l4 1v-8c0-8 0-9-2-9-3-1-5-1-10 0m43 0c-11 2-19 8-23 17-3 7-3 23 0 29 2 6 7 11 14 14 5 2 6 2 19 2 11 0 15 0 19-2l6-2 1-7 0-8-4 2c-6 3-14 5-21 5-10 0-15-3-17-10l0-3h45l0-8c-1-10-4-17-10-23-7-5-19-8-29-6m69 0c-4 1-9 1-11 2l-4 1 0 7c0 4 0 7 1 7 0 0 3-1 6-2 6-2 20-3 25-1 3 1 5 4 5 7 0 2-1 2-13 2-11 1-13 1-18 3-7 4-10 8-11 15-1 13 8 22 21 22 8 0 13-2 18-6l3-3v8h20l0-22c-1-24-1-27-7-33-5-6-19-9-35-7m133 0c-11 3-18 8-22 18-3 6-3 20 0 27 3 7 7 12 14 15 5 2 6 2 19 2 12 0 16 0 20-2l6-2 1-7 0-8-5 2c-18 8-34 6-37-5l-1-3h46l0-8c-1-4-2-9-3-12-3-6-9-12-15-15-6-3-16-3-23-2m485 0c-5 1-8 3-12 6l-3 3v-8h-20v61h20v-18c0-19 1-23 5-27 3-2 7-3 11-2 5 2 5 4 6 26l0 21h19l0-24c0-24-1-25-3-29-1-2-4-5-6-7-5-2-13-3-18-2m132 0c-4 1-8 1-10 2-3 1-4 1-4 8 0 4 0 7 0 7 1 0 4-1 7-2 5-2 8-2 16-2 9 0 9 1 12 3 1 2 2 4 2 5 0 2-1 2-13 2-11 1-13 1-18 3-7 4-10 8-11 15 0 6 1 12 5 16 5 4 9 6 17 6 7 0 12-2 17-6l3-3v8h20l0-22c-1-24-1-26-6-33-6-6-21-9-37-7m213 0c-7 1-11 3-16 8-8 7-10 12-9 23 0 12 1 16 7 22 6 7 12 9 25 10 7 0 12 0 18-2 12-2 12-2 12-10 0-4-1-7-1-7-1 0-4 1-8 3-9 3-21 4-27 1-3-1-4-3-5-6-1-2-2-4-2-5 0 0 10 0 23 0h22v-7c0-8-2-15-7-20-4-5-10-9-17-10-7-1-8-1-15 0m87 0c-3 1-7 3-9 6l-4 3v-8h-20v61l10 0 10 0v-19c1-20 1-22 7-26 3-1 10-2 15-1l3 1v-8c0-8 0-9-2-9-3-1-5-1-10 0m43 0c-10 2-19 8-23 17-3 8-3 21 0 29 3 6 8 11 15 14 4 2 6 2 19 2 11 0 15 0 20-2l6-2 0-7 0-8-8 3c-9 4-22 5-27 3-3-2-6-5-7-9l-1-3h46v-3c0-5-2-15-4-18-2-5-8-11-12-13-4-2-14-4-17-4-2 0-5 1-7 1m218 0c-3 0-8 1-11 1l-7 1v8c0 6 0 7 2 6 6-2 11-3 18-3 12 0 16 2 16 8 0 2-1 2-13 2-13 1-18 2-23 6-4 4-5 8-5 14 0 13 8 20 21 20 7 0 12-2 17-6l3-3v8h20l0-23c0-20-1-23-2-26-5-8-10-11-21-13-6-1-8-1-16 0m91 0c-4 1-8 3-11 6l-3 3v-8h-20v61l10 0 9 0 1-19c0-16 1-20 2-23 4-6 12-8 17-3 1 2 2 5 2 23l0 22 10 0 10 0v-22c0-18 0-24-2-27-1-5-5-9-9-12-3-1-12-2-16-1m140 0c-10 2-18 8-22 15-3 6-4 16-3 23 2 11 7 17 15 22 5 2 7 2 16 3 9 0 11 0 16-2 12-5 18-13 19-27 0-11-2-18-7-24-7-8-20-12-34-10m-1161 4c1 2 7 16 14 32l12 28-1 4c-2 4-5 5-12 5h-4v13l8 0c12 0 17-2 22-10 2-3 29-73 29-75 0 0-4 0-10 0h-10l-6 19c-3 11-7 20-7 20 0 1-4-8-8-19l-8-20h-20l1 3m146 12c-2 8-5 15-5 15 0 1 5 1 11 1h11l-5-15c-3-8-6-15-6-15 0-1-3 6-6 14m143 16c10 24 13 32 12 34 0 4-3 6-10 7l-6 0v13l7 0c4 0 9 0 11-1 5-1 11-6 13-11 2-4 27-67 28-71 0-2-1-2-10-2l-9 1-7 19c-5 17-7 20-8 18 0-1-4-10-8-20l-7-18h-20l14 31m471-30c0 0 5 14 12 30l11 30h22l4-10a8216 8216 0 0112-31l8-20h-20l-1 4c-1 3-5 12-8 21-3 9-6 16-6 15-1-1-4-10-8-21l-7-19-9 0c-6 0-10 0-10 1m72 0c0 0 6 14 13 30 7 17 13 32 13 33s-1 3-2 5c-2 2-4 2-9 3l-6 0v13l9 0c12-1 16-3 21-9 1-3 8-19 15-36 6-17 12-33 13-35l2-5h-20l-7 20c-3 11-6 20-7 20 0-1-4-10-8-20l-8-19-9-1c-6 0-10 0-10 1m-1280 13c-3 2-6 7-6 9 0 1 6 1 13 1h12l0-3c-1-2-2-5-4-6-4-4-11-4-15-1m204 0c-3 1-6 6-6 8 0 2 2 2 12 2h12v-3c0-2-1-4-3-6-2-3-4-3-8-3-2 0-6 1-7 2m825 1c-2 3-3 5-3 6v3h12c11 0 12 0 12-2 0-6-5-10-13-10-4 0-5 1-8 3m133-2c-2 1-6 7-6 9 0 2 1 2 12 2 11 0 12 0 12-2 0-3-2-6-4-8-3-2-10-3-14-1m-883 2c-8 5-8 26 0 31 2 1 5 2 7 2 8 0 12-6 12-18 0-8-2-13-6-16-4-1-10-1-13 1m121 1c-4 3-5 10-5 17 1 10 6 15 13 15 8 0 12-6 12-17 0-13-4-18-13-18-3 0-5 1-7 3m1209 0c-3 2-5 7-5 15 0 11 4 17 13 17 4 0 6 0 8-3 2-1 3-4 4-7 2-8 1-18-4-22-4-4-11-4-16 0m-1538 20c-5 6-1 13 7 13 7 0 13-6 13-12 0-3 0-3-9-3-7 0-8 0-11 2m751 0c-4 3-4 8 0 11 2 2 3 2 7 2 6-1 9-3 11-8 2-6 2-7-7-7-7 0-9 0-11 2m555 0c-5 6-1 13 7 13 7 0 12-5 13-11l0-4h-8c-8 0-9 0-12 2m-1518 52c-8 2-13 8-14 17l-1 6h-9v14h9l0 23 1 23 9 1 10 0v-47h17v-14h-17v-3c0-6 2-7 10-8l8 0v-13l-9 0c-5 0-12 1-14 1m370 42v42h20v-18c0-16 0-19 2-22 4-7 12-10 17-5l2 3 1 21 0 21h19l0-22c0-13 0-24-1-26-1-5-6-11-11-13-4-1-14-1-18 0-2 1-5 3-7 5l-4 3v-32h-20v43m772-35v8h20v-16h-20v8m-578 37v40h20l0-27 0-27 15 27 14 27h24v-81h-20l0 27 0 27-15-27-14-27h-24v41m366 0v40h21v-28l13 0c11-1 13-1 18-3 10-5 14-11 15-22 0-8 0-9-3-14-3-7-9-11-17-13-3-1-15-1-26-1h-21v41m-611-29v8h-10v14h10v17c0 15 0 17 2 21 4 7 7 8 23 9l13 0v-14l-8 0c-5 0-8-1-9-2-1-1-2-6-2-16l0-15h21l0-7 0-7-11 0-10 0v-17h-19v9m1004 0v8h-9v14h9l0 17c0 15 1 18 3 21 3 7 7 8 22 9l13 0v-14h-7c-11 0-11 0-11-18v-15h20v-14h-20v-17h-20v9m-372 14c1 13 0 13 12 11 5 0 7-1 9-3 3-2 3-4 3-8 0-8-4-11-17-11h-7l0 11m-842-7c-7 1-16 5-20 9-5 6-6 11-7 20-1 15 4 24 15 30 9 5 25 6 34 2 5-2 12-9 14-13 5-9 5-24 0-33-6-11-19-17-36-15m363 0c-11 1-19 6-24 15-2 5-2 6-2 17 0 10 0 11 2 16 4 6 9 10 14 13 9 3 25 3 39-1l6-1v-16l-4 2c-9 5-23 6-31 4-3-2-7-7-7-10 0-2 2-2 23-2h22v-6c0-21-15-33-38-31m207 0c-11 1-19 7-24 16-3 5-4 19-2 26 2 9 11 18 20 20 6 2 19 1 25 0 8-2 15-9 18-16 3-8 3-21 0-29-3-6-9-12-15-15-5-2-14-3-22-2m409 0c-11 1-20 8-24 17-3 8-3 21 0 29 2 5 9 12 15 15 5 2 15 3 23 2 16-2 26-14 26-32 0-22-15-34-40-31m116 0c-12 1-20 6-25 15-2 5-2 6-2 16 0 11 0 12 3 17 6 11 15 15 31 15 9 0 21-2 25-4 2-1 2-2 2-9v-7l-4 2c-10 5-26 7-32 3-3-2-6-7-6-9 0-2 3-2 23-2h22l0-8c-1-20-15-31-37-29m-1143 2c-2 0-5 3-7 5l-3 3v-9h-20v61h20v-16c0-19 1-23 6-27 4-3 6-4 15-3l5 1v-17l-6 0c-4 0-8 1-10 2m131 0c-2 0-5 3-7 4l-3 3v-8h-20v61h20l0-19c0-16 1-19 3-22 3-7 11-8 15-3 1 1 1 6 2 23l0 21h19l0-19c1-19 1-22 6-26 2-2 8-3 11-1 2 2 3 8 3 27v19h19l0-22c0-13 0-24-1-26-1-5-6-11-11-13-4-2-14-1-18 1-2 0-5 3-7 5l-4 3-3-4c-2-2-5-4-7-5-4-1-14-1-17 1m650 0c-2 1-5 3-7 4l-4 3v-8h-19v61h19l0-18c1-20 2-24 7-28 3-2 10-2 12 1 2 2 3 3 3 24l0 21h20l0-24c0-22-1-24-3-28-1-2-4-5-6-7-3-2-4-3-11-3-6 0-9 0-12 2m199 0c-1 1-4 3-6 4l-3 3v-8h-20v61h20v-18c0-19 1-23 7-27 4-1 13-2 16 0 2 1 2 1 2-8v-9l-6 0c-4 0-8 1-10 2m232-1c-6 2-9 5-13 9-6 6-7 10-7 22 0 8 0 10 2 14 3 7 9 12 17 15 6 3 20 3 29 1l5-1 0-9 0-8-5 3c-6 3-16 3-21 0-5-4-7-8-7-15 0-8 2-12 7-16 3-2 4-2 11-2 4 0 8 1 11 3l4 2 0-8 0-8-5-2c-7-1-22-1-27 0m-541 24c0 22 1 24 3 28 7 12 23 14 36 3l3-2v8h19v-61h-19l0 18c-1 15-1 19-2 22-3 5-6 7-11 7-3 0-5 0-7-2-2-3-2-4-2-24v-21h-20l0 24m410 10c-1 38 0 37-8 38l-5 0v13l9 0c14-1 21-6 23-18 1-3 1-19 1-36v-31h-20l0 34m-671-20c-3 2-6 7-6 9 0 1 4 1 12 1 8 0 13 0 13-1 0-2-3-8-5-9-4-3-11-3-14 0m730 1c-2 2-4 5-5 6l0 3h12c8 0 13 0 13-1 0-2-3-8-5-9-1-1-4-2-7-2-4 0-6 1-8 3m-1094 1c-2 1-3 4-4 7-2 8-1 18 4 22 4 4 11 4 16 0 7-5 7-24 0-30-5-3-12-3-16 1m571-1c-4 2-5 7-5 16 0 12 3 17 12 17 8 0 13-6 13-17 0-12-4-18-13-18-2 0-6 1-7 2m410 0c-4 3-6 8-6 16 0 8 3 14 7 16 4 2 10 1 13-1 7-5 7-24 1-30-4-4-11-4-15-1" stroke="none" fill="#000" fill-rule="evenodd"/></svg>

Thanks

Editor's note:
The used icon was created by "the noun project" contributor Anya Derevyanko and is available on thenounproject.com under Creative Commons CC-BY license. Most importantly, attribution is required.

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made . You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

Solution

  • Actually, you need to change path directions for inner "cut-out"-shapes.
    For less complex svgs you could use javascript to do this programatically as described in this related question "auto colour fill when Generate Font from svg figma icon using icomoon"

    In your case - you need to do this manually.
    Use a vector editor like inkscape (or Adobe Illustrator).

    First you need to remove unnecessary elements like the image caption.
    The caption would be way too tiny in a glyph/character.

    Open your svg in inkscape.
    Run these Path operations:

    inkscape: Break apart

    1. select all
    2. Path / Break apart
    3. Path / Exclusion
    4. save the svg

    inkscape: remove overlap

    inkscape: Path / Exclusion

    Auto-fix path directions via JS

    While you should first try to edit your graphic in an editor you may also do this programmatically.

    The following example is based on my own experimental helper "fix-path-directions" you can inspect (and fork) on github to build upon.

    const path = document.getElementById("path");
const btnFix = document.getElementById("btnFix");
const markup = document.getElementById("markup");

btnFix.onclick=()=>{
  fixPaths(path)
}

function fixPaths(path) {

  // get stringified pathdata from element
  let d = path.getAttribute("d");

  // parse and optimize path directions
  let pathData = getFixedPathData(d);

  // stringify new pathdata and apply
  let dNew = pathDataToD(pathData);
  path.setAttribute("d", dNew);

  //only for illustration
  showPathdata(path);
}

/**
 * only for illustration
 */

showPathdata(path);

markup.addEventListener("input", (e) => {
  let newD = markup.value;
  path.setAttribute("d", newD);
  adjustViewBox(svg);
});

showDirections.addEventListener("input", (e) => {
  if (showDirections.checked) {
    main.classList.add("showMarkers");
  } else {
    main.classList.remove("showMarkers");
  }
});

function showPathdata(path) {
    let d = path.getAttribute("d");
    markup.value = d;
}

/**
 * adjjust viewBox
 */
function adjustViewBox(svg) {
    let bb = svg.getBBox();
    svg.setAttribute("viewBox", [bb.x, bb.y, bb.width, bb.height].join(" "));
}
    body {
  font-family: "Fira Sans", "Open Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

svg {
  width: 100%;
  border: 1px solid #ccc;
  overflow: visible;
}

.showMarkers path {
  marker-mid: url(#marker);
  stroke-width: 0.75% !important;
  stroke: green
}

.grd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-bottom: 2em;
}

textarea {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  color: #fff;
  padding: 0.5em;
}
    <script src="https://www.unpkg.com/fix-path-directions@latest/js/fixPathDirections.js"></script>

<h1>Correct sub path directions in compound path</h1>
<p><button id="btnFix">Fix directions</button></p>
<p><label><input type="checkbox" id="showDirections" checked>show directions</label></p>

<h3>Messed up path directions – relying on SVG fill-rule:evenodd</h3>
<main id="main">
  <div class="grd showMarkers">
    <div class="col">
      <h3>Preview</h3>
      <svg id="svg" viewBox="0 0 100 100">
        <path id="path" d="M50 0a50 50 0 110 100 50 50 0 110-100m0 30a20 20 0 110 40 20 20 0 110-40m0-10q12.42 0 21.21 8.79t8.79 21.21-8.79 21.21-21.21 8.79-21.21-8.79-8.79-21.21 8.79-21.21 21.21-8.79m-40-20a5 5 0 110 10 5 5 0 110-10m80 0a5 5 0 110 10 5 5 0 110-10m0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 110-5m-45 42.5h10v10h-10zm-5-5h20v20h-20zm10-30c22.07 0 40 17.93 40 40s-17.93 40-40 40-40-17.93-40-40 17.93-40 40-40
" />
      </svg>
    </div>
    <div class="col">
      <h3>Enter Markup</h3>
      <textarea id="markup"></textarea>
    </div>
  </div>
</main>

<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
  <defs>
    <marker id="marker" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
      <polygon points="0 0 10 5 0 10" fill="red" />
    </marker>
  </defs>
</svg>

    How it works

    1. parse path data from the d attribute
    2. normalize path data to absolute command coordinates, convert shorthands to longhand equivalents
    3. analyse sub path directions by comparing areas from polygon approximations: if the area is > 0 = it's clockwise (at least in SVG with its flipped Y-axis)
    4. test if subpath polygons are overlapping without changing drawing directions. If so: reverse direction for inner ones