Repolode
Submit
Yqnn

Yqnn/svg-path-editor

Browser-based visual editor for creating and manipulating SVG path data with drag-and-drop points and a command panel.

Open-source alternative to:Inkscape

View on GitHubWebsite
Stars
5,336
Forks
423
Open issues
27
Last commit
4 months ago

What is it?

SVG Path Editor is a web app for creating and editing the `d` attribute of SVG paths. You can paste raw path data into a text field and see the shape update on the canvas, or build a path from scratch by choosing a command type and clicking the destination point.

Points can be moved by dragging, and each path command can be inserted, deleted, converted to another type, or toggled between relative and absolute coordinates. The editor also reorders paths, such as starting a path or subpath from a selected command or reversing a subpath. Whole-path operations include scale, translate, rotate, rounding, coordinate conversion, reversal and optimization. The viewBox can be zoomed, dragged, or set numerically, and includes a zoom-to-fit option.

The editing logic is published separately as the svg-path-editor-lib npm package. The project runs with Node.js 18.13 or higher, and includes a dev server, production build and Karma unit tests.

Key features

  • 01Edit SVG path data as raw text or by dragging points on the canvas.
  • 02Insert, delete, and convert individual path commands.
  • 03Toggle commands between relative and absolute coordinates.
  • 04Apply scale, translate, rotate, round, and optimize to the whole path.
  • 05Adjust the viewBox with zoom, drag, numeric fields, or zoom to fit.

Use cases

  • Hand-tuning icon or illustration paths exported from other tools.
  • Creating simple SVG shapes directly in the browser.
  • Cleaning up and shortening path data by rounding or optimizing commands.

Quick start

  1. 1

    Install Node.js v18.13 or higher, then install dependencies

    npm install
  2. 2

    Start the development server and open http://localhost:4200/

    npm start

Things to know

  • Running locally requires Node.js v18.13 or higher.
  • The README offers no standalone desktop build; the hosted version runs in the browser.

Topics

#svg#svg-path#graphics#vector#web-editor#typescript#svg-editor#svg-parser

FAQ

What is svg-path-editor?
Browser-based visual editor for creating and manipulating SVG path data with drag-and-drop points and a command panel. SVG Path Editor is a web app for creating and editing the `d` attribute of SVG paths. You can paste raw path data into a text field and see the shape update on the canvas, or build a path from scratch by choosing a command type and clicking the destination point.
Is svg-path-editor free to use? What license does it have?
svg-path-editor is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is svg-path-editor still maintained?
Updated within 6 months. The last commit to svg-path-editor was on Jun 18, 2026.
What can I use svg-path-editor for?
Hand-tuning icon or illustration paths exported from other tools. Creating simple SVG shapes directly in the browser. Cleaning up and shortening path data by rounding or optimizing commands.
How do I install svg-path-editor?
Install Node.js v18.13 or higher, then install dependencies: npm install Start the development server and open http://localhost:4200/: npm start
Where can I get svg-path-editor?
The source code and installation instructions are on GitHub: https://github.com/Yqnn/svg-path-editor

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects