SVGmanupulation

This project demonstrates SVG (Scalable Vector Graphics) manipulation using HTML, CSS, and JavaScript. The project allows you to interact with an SVG canvas, pan around, zoom in and out, and add draggable rectangles. Additionally, a mini map is provided to display both the entire SVG and the current viewing area.

Getting started

Clone this repository to your local machine using:

git clone https://github.com/your-username/svg-manipulation-project.git

->Open the index.html file in a web browser using open with liveserver to launch the SVG manipulation application.

Features

1 Pan around the SVG canvas by clicking and dragging.

2 Zoom in and out of the SVG canvas using the scroll wheel.

3 Right-click on the SVG canvas to add draggable rectangles.

4 A mini map displays both the entire SVG and the current viewing area.

#USAGE

Open the application by running index.html in a web browser.

-> Interact with the SVG canvas:

1 Click and drag to pan around.

2 Use the scroll wheel to zoom in and out.

3 Right-click to add draggable rectangles.

4 The mini map in the bottom-right corner provides an overview of both the entire SVG and the current viewing area.