Simple HTML SVG Editor

Javascript project for drawing and editing Svg polylines

Built with

• jQuery
• Bootstrap
• D3.js

Getting started

Clone or download the repository and run the files locally through a local web server (e.g. Live Server for VS code)

Usage

Start drawing a polyline by clicking on the canvas.

Finish the polyline by:

• click on the last point / or press Esc key -> as opened polyline
• click on the first point / or press Enter key -> as closed polyline

Select active polyline:

• click on the inactive polyline -> in edit or move mode

Deselect active polyline:

• Esc key -> when not drawing

Navigation panel buttons:

• Draw -> mode to draw polylines on canvas

• Edit -> mode to edit active polyline shape - drag by control points

• Move -> mode to drag whole polyline within the canvas

• Show grid -> toggle the grid visibility on and off

• Snap -> toggle snapping to the grid on and off

• Resolution -> set the grid resolution in pixels

• Undo / Ctrl+Z -> Step backward

• Redo / CTRL+Y -> Step forward

• Delete path -> delete active polyline

• Clear canvas -> delete all polylines

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT