Skip to main content
Question

SVG path winding order differences

  • August 11, 2022
  • 3 replies
  • 1284 views

Lee_Murray

Hi!

I am building a plugin that exports svg templates to be used by another tool. The other tool only accepts svg paths with the default fill-rule of “nonzero” to identify subpaths for cutouts & non-filled areas.

I discovered that paths derived from shapes (rect, ellipse, polygon) with outlined strokes generate svg paths with a fill-rule of “evenodd” & all subpaths are drawn/wound in the same direction (counter-clockwise), which is not compatible with the tool.

Paths created with the pen tool, with outlined strokes generate paths with alternating draw/winding directions, which works.

I’d love to be able to export compatible basic paths using outlined shapes, so my question is:
Is there an ability in the plugin API to choose fill-rules or path winding directions, or is this an intentional feature of Figma’s svg generator?

Thanks!

This topic has been closed for comments

3 replies

  • 1 reply
  • August 18, 2023

I have the same question.


Bauke_Schildt

The Plugin “Fill Rule Editor” lets you change “Even-Odd” to “Non-Zero”:

Figma

Thierry
  • 1 reply
  • July 13, 2024

I have created a plugin based on the Fill Rule Editor | Figma Community Plugin. I have added the ability to preview and set the first vertex (point) of paths.

Vector Path Editor

https://www.figma.com/community/plugin/1391765568770221941/vector-path-editor

Keep me posted if you have some questions or improvement suggestions. Any advice to make paths more compatible with SF Symbols is welcome.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings