Online editor to create and manipulate SVG paths Saturday, May 2, 2020



Edit or create SVG paths in browser: Image of Yaktocat

How to Use

  • Paste or edit the raw path in the path field
  • Click on + to add a new command to the path, select a type, then click on the destination
  • Move points with drag and drop
  • Click on a point, then on the + to insert a command right after the selected one
Commands panel:
  • Click on the command type to toggle between relative and absolute coordinates
  • Relative command types are orange, absolute are purple
  • Click on then Delete to delete a command
  • Click on then Insert after to insert a new command right after the selected one
  • Click on then Convert to to convert the selected command to a new type
  • Use mouse wheel to zoom in/out
  • Use drag & drop to move the viewBox
  • Click on AUTO to automatically set the viewBox depending on current path
  • ViewBox can also be set manually with the x, y, width and height fields
Path operations:
  • Scale the full path with the Scale button
  • Translate the full path with the Translate button
  • Round all coordinates of the current path with the Round button
  • Convert all commands to relative or absolute coordinates with Convert to relative or Convert to absolute button

Running Locally


Run npm install to retrieve all the depencies of the project.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

This project was generated with Angular CLI version 9.1.3.

Unauthorized reproduction of this site is prohibited, and offenders will be held accountable for their legal responsibilities.
Article Title: Online editor to create and manipulate SVG paths
This article URL:Online editor to create and manipulate SVG paths

All Categories

Github Trending Repositories

Explore Github Trending Repositories. See what the GitHub community is most excited about today.

Copyright 2010 - 2020