AmirAliRashidi / svg-commenter

SVG Commenter is an Angular project that enables users to add customizable text labels to SVG images.

SVG Commenter

SVG Commenter is an Angular project that enables users to add customizable text labels to SVG images.

Technologies Used

• Angular Material
• ngx-material-color-picker
• fabric.js
• xml2js
• amCharts 5

Features

• 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.

Demo

You can view a live demo of the website here

Development

1. Clone the repository:

   git clone https://amiralirashidi.github.io/svg-commenter

2. Navigate to the project directory: cd svg-commenter

3. Install dependencies: npm install

4. Run Server: ng serve

This will compile the project and host it on http://localhost:4200/.