Back to Plugins
Vector Path Editor

Vector Path Editor

Take full control of your vector object paths with this comprehensive plugin.

illustrationspathfill rulenetworksvertexiconsregionssvgvectornon_zeroeven_oddtypographyrules

Plugin Preview

Vector Path Editor preview

About this plugin

Select a vector object to start.


Take full control of your vector object paths with this comprehensive plugin. Edit fill rules, set first nodes, and preview changes in real-time.


Features:

  • Edit fill rules and preview of changes (non-zero vs. even-odd)
  • Reverse path orientations
  • Set the first node for each path


Usage:

Select a vector object, Modify fill rules: Click on a fill to toggle between non-zero and even-odd.

Adjust path orientation: Click on a loop to reverse it (helps with hole appearance).

Set first node: Click on any node to designate it as the first (appears as a small diamond)


Benefits: Ensure compatibility with formats like TrueType fonts and Android VectorDrawable (non-zero fill rule only). Optimize designs for variable fonts (e.g., SF Symbols) by controlling first node placement. Fine-tune complex vector shapes for precise control over fill behavior.


This plugin empowers designers to manipulate vector paths with precision, improving compatibility and enabling advanced design techniques.


Acknowledgment: Special thanks to Evan Wallace for the original "Fill Rule Editor" plugin on which this work is based.


Stay Connected


For updates and more information:

Follow me on X: @Autre_planete

Contact me: AnotherPlanet.io


Support


https://github.com/thierryc/figma-fill-rule-editor/issues


Links


https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule\

https://www.sitepoint.com/understanding-svg-fill-rule-property/

https://oreillymedia.github.io/Using_SVG/extras/ch06-fill-rule.html


This project is an open source plugins.

Plugin Details

Version5
CreatedJuly 7, 2024
Last UpdatedJuly 11, 2024
Categoryediting & effects plugins
CreatorThierry
Stats314 installs, 41 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none