Skip to content
OpenToolVault

SVG Path Editor

Online editor to create and manipulate SVG paths with live preview.

Not yet verified
Report issueDemo online
Yqnn/svg-path-editorMIT★ 5300

Open the official app on yqnn.github.io

This tool is hosted by its maintainers. Click below to open yqnn.github.io in a new tab — it's their official demo.

Launch tool View source
Browse design tools →

What's next with SVG Path Editor?

Choose how you want to get started.

Use it free

Open the official tool or demo — no account needed.

Free

Self-host it

Run the open-source version on your own infrastructure.

Open

What is SVG Path Editor?

SVG Path Editor is an open-source web application designed specifically for inspecting, building, and modifying the d attribute of SVG path elements. In web graphics, the path element is the most versatile shape primitive, capable of drawing straight lines, Bezier curves, elliptical arcs, and multi-segment polygons. The editor solves the fundamental challenge of hand-crafting vector paths. Instead of relying on full-featured design software like Adobe Illustrator or Figma—which often export bulky XML metadata and grouped nodes—this utility takes raw coordinate strings (such as M 0 0 L 100 100) as input and provides an interactive grid alongside a command breakdown for coordinate adjustment.

How it works

SVG Path Editor is an open-source web application designed specifically for inspecting, building, and modifying the d attribute of SVG path elements. In web graphics, the path element is the most versatile shape primitive, capable of drawing straight lines, Bezier curves, elliptical arcs, and multi-

How to use it

  1. 1Use the SVG Path Editor tool.
  2. 2Use the SVG Path Editor tool.
  3. 3Use the SVG Path Editor tool.
  4. 4Use the SVG Path Editor tool.

What it can do

  • Generation
  • Preview

Use cases

Assumptions and limitations

Assumptions

  • source: https://github.com/Yqnn/svg-path-editor
  • license: MIT — free to use
  • privacy: Opens an external demo

Limitations

  • This is an open-source project maintained at Yqnn/svg-path-editor. Check the repository for current feature status and known issues.

Understanding the result

Online editor to create and manipulate SVG paths with live preview.

Tool details

  • Clearly flagged when a network request is needed.
  • No account, no sign-up, and no tracking of your content.
  • Powered by svg-path-editor (MIT).
Built with
svg-path-editor (Yqnn/svg-path-editor)
License
MIT
Runs locally
No — requires a network request
Verification
Not yet verified
Input
Text Input
Output
Generated Output
Open-source source & license

Built with Yqnn/svg-path-editor. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.

Built with
svg-path-editor
License
MIT
View source on GitHub

Open-source project

License: MITSource: this projectOfficial site

OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.

References

Frequently asked

What is Svg Path Editor?

Edit or create SVG paths in browser: https://yqnn.github.io/svg-path-editor/ It is available on GitHub at Yqnn/svg-path-editor.

Is Svg Path Editor free to use?

Yes — Svg Path Editor is open-source software. You can use it freely, and the source code is available at https://github.com/Yqnn/svg-path-editor.

Where can I try this tool?

This tool is hosted by its maintainers. Visit the official demo or source repository to use it. (https://github.com/Yqnn/svg-path-editor)

How is Svg Path Editor licensed?

It is open-source. Check the repository (https://github.com/Yqnn/svg-path-editor) for the specific license.

How is Svg Path Editor licensed?

It is open-source. Check the repository (https://github.com/Yqnn/svg-path-editor) for the specific license.

Spotted something wrong with SVG Path Editor, or want to maintain it? See how to help.