Yqnn / Svg Path Editor
Licence: apache-2.0
Online editor to create and manipulate SVG paths
Stars: ✭ 1,350
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Svg Path Editor
Vectorgraphics2d
Graphics2D implementations to export various vector file formats
Stars: ✭ 87 (-93.56%)
Mutual labels: svg
Diagram Tools
A number of small tools for generating and manipulating diagrams, mostly based around Graphviz
Stars: ✭ 95 (-92.96%)
Mutual labels: svg
Official Bash Logo
Everything you need to start using the official GNU Bash logo
Stars: ✭ 89 (-93.41%)
Mutual labels: svg
Svgcleaner
svgcleaner could help you to clean up your SVG files from the unnecessary data.
Stars: ✭ 1,297 (-3.93%)
Mutual labels: svg
Touchdesigner Sop To Svg
A pipeline for handling the SOP to SVG pipeline. This is especially handy for using procedurally generated geometry for paths to be cut or plotted.
Stars: ✭ 87 (-93.56%)
Mutual labels: svg
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-93.11%)
Mutual labels: svg
Livecode Svganimation
In my Smashing Toronto talk, I'll be live coding an SVG animation from start to finish. Here's the repo that houses the base materials, and any further references for things we don't have time to cover.
Stars: ✭ 96 (-92.89%)
Mutual labels: svg
Svg Cards
A set of playing cards in SVG (now also with a rendering in PNG)
Stars: ✭ 94 (-93.04%)
Mutual labels: svg
SvgPathEditor
Edit or create SVG paths in browser: https://yqnn.github.io/svg-path-editor/
How to Use
Basic:
- 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 ... button to insert a command right after the selected one, to remove it, or to change its type
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
ViewBox:
- Use mouse wheel, or click Zoom in and Zoom out to zoom in/out
- Use drag & drop to move the viewBox
- Click on Zoom to Fit 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
Shortcuts:
- Press m, l, v, h, c, s, q, t, a or z to insert a command after the selected one
- Press shift + m, l, v, h, c, s, q, t, a or z to convert selected command to a new type
- Press echap to delete the command being created, or the undo the current dragging operation
- Press delete or backspace to delete the selected command
- Press ctrl + z or cmd + z to undo
- Press ctrl + shift + z or cmd + shift + z to redo
- Press ctrl while dragging to ignore
snap to grid
constraint
Running Locally
Docker
Run docker build -t svg-path-editor . && docker run -p 4200:4200 svg-path-editor
or docker-compose up
.
Manually
Requirements
- Node.js v12.0 or higher
Dependencies
Run npm install
to retrieve all the depencies of the project.
Development server
Run npx ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build
Run npx 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 npx ng test
to execute the unit tests via Karma.
This project was generated with Angular CLI version 9.1.3.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].