SVG Commenter is an Angular project that enables users to add customizable text labels to SVG images.
- Angular Material
- ngx-material-color-picker
- fabric.js
- xml2js
- amCharts 5
- Default Background: The canvas tag comes with a default background.
- Adding Text Labels: Users can add text labels with custom colors and backgrounds.
- Edit Mode: Users can edit label positions, colors and backgrounds or delete label with right-click.
- Preview Mode: Users can't edit in preview mode but can click on labels for selected actions.
- Double Click Action: Double-clicking allows users to set color or chart mode.
- Chart Mode: If the action is set to a chart, a modal with default chart will display.
- Color Mode: Background color changes based on the element ID entered by the user.
- Clear Page: A button is provided to clear all labels on the page and revert background color to normal.
You can view a live demo of the website here
-
Clone the repository:
git clone https://amiralirashidi.github.io/svg-commenter
-
Navigate to the project directory:
cd svg-commenter
-
Install dependencies:
npm install
-
Run Server:
ng serve
This will compile the project and host it on http://localhost:4200/.