You need to: - Place an HTML element on the page
- Paste svg code to HTML
- Place this element in a group
- Assign unique id's to the HTML element and the group

To use the plugin, you need to set two main properties:

svg_id: The identifier of the <svg> container with which the plugin will interact.
group_id: The identifier of the group or container that holds the HTML element and will be used for scaling and panning.

Main Features
Zooming: Users can scale the SVG content using the provided '+' (zoom in) and '-' (zoom out) buttons. Zooming is implemented by changing the scale of the SVG.
Panning: Panning allows users to move the visible area of the SVG by clicking and dragging the content with a mouse or finger on touch devices.
Element Clicks: Clicking on SVG elements toggles their activity state, visually indicated by a change in color. The plugin tracks active elements and updates a list of active element IDs.

Working with Active Elements
The plugin supports a "toggle" logic for SVG element activity. Clicking an element makes it active (color changes), and clicking it again deactivates it (returns to the original color). Active element IDs are stored in an array and are accessible through the click_on state.

Creating and Styling Zoom Buttons
Zoom buttons are dynamically created and styled, with the possibility to customize colors, size, and other CSS properties through the plugin's properties.

Initialization and Events
The plugin automatically initializes after the document is fully loaded. Events are generated for SVG elements that are clicked, allowing developers to perform additional actions or processing in Bubble.

Publishing States and Events
svg_ids: list of all id's that are present on the svg
click_on: A state containing an array of active SVG element IDs.
svg_element_is_clicked: An event triggered when an SVG element is clicked.

Usage Example
To use the plugin, simply add it to your Bubble project, configure the svg_id and group_id properties according to your SVG content and prepared elements on the page. After that, you will be able to interact with SVG elements, zoom and pan content, and retrieve data about active elements for further logic in your application.

Editor link:
https://bubble.io/page?type=page&name=svg_map&id=nch-plugins-tests&tab=tabs-1