How to make an SVG interactive and clickable

Before you start, make sure you have access to both Affinity and Flourish and have followed the Affinity MCP setup instructions. In the Affinity desktop app, Enable MCP server needs to also be switched on so your LLM can connect to and work with Affinity.

Install the Flourish Connector in Claude or ChatGPT, or use our documentation to connect it manually to another MCP-compatible tool.

Then, confirm that your LLM can access both tools. Once they’re connected, you’re ready to frame your brief and start building your illustration.

Can you see the Affinity MCP server and the Flourish MCP server?

*Confirm you have access to both tools before we start.

There are a few ways to create your SVG. You can make the illustration yourself in Affinity, ask your LLM to create something from scratch using Affinity MCP, or give it an existing image to recreate. In this example, we’ll use the last approach.

Download sample image: Sales funnel and marketing stages

To follow along, save the reference image to your device. Attach it to your LLM and ask it to recreate the illustration as an editable SVG in Affinity, rather than a flattened image. This requires the Affinity app to be opened with the MCP feature enabled.

Recreate this illustration as an SVG in a new Affinity document, matching the shapes, colors, and labels in the reference as closely as possible.

* Confirm illustration has been recreated and wait for next steps.

Once your base illustration has been recreated as vector layers in Affinity, you can continue refining it in two ways. Ask your LLM to make changes through Affinity MCP, or edit the illustration directly in the Affinity app when you want more hands-on visual control.

For example, you can use a prompt to quickly update your colors:

Can you change the colors of the illustration to follow this palette and order: #135ae1, #2197ff, #9852d9, #f54e8b, #fa6502, #f2b90f, #058896, #09aa64

* Confirm the changes have been made and wait for next steps.

For changes that benefit from more visual guidance, such as adjusting the layout, positioning, or spacing, you can make edits directly in the Affinity app.

Before bringing your SVG into Flourish, you’ll need to structure its layers so the Interactive SVG template can recognize the parts you want to make interactive. Flourish uses SVG groups and their IDs to identify individual elements, so clear grouping is what allows you to connect parts of the illustration to your dataset and control what happens when someone clicks or hovers.

For this example, we’ll create one group for each funnel stage, one for the titles, and one catch-all group for anything else. If you’re working with your own SVG, think about which parts of the illustration you want to treat as separate interactive elements, then group and name them accordingly.

Group the elements into logical categories based on the parts of the illustration that should behave as separate interactive elements. Keep related shapes, text, labels, and other elements together within the same group.

Create:
- One group for each stage, containing all elements that belong to that stage.

- One group called "titles" containing only the overall section headers at the top of the illustration ("Sales funnel" and "Marketing stages"), including their header backgrounds and text.

If there are any remaining elements that don't logically belong to a stage or the overall titles, place them in a group called "other". Don't create this group if there are no remaining elements.

Remove any enclosing artboard group element so each of these groups sits at the top level of the SVG.

Give each group a clear, descriptive ID. List all group element IDs and remove any special characters from the IDs.

* Confirm the required SVG structure has been followed and wait for next steps.

The Flourish Interactive SVG template uses a data table to connect each clickable SVG group with the information you want to display, using the group ID we defined previously. Instead of building this table manually, your LLM can read the SVG structure and generate it for you.

For this example, we’ll create one row for each interactive stage and leave out non-content groups such as backgrounds or overall titles. Use a prompt like:

Create a data table based on the SVG: a CSV with one row per group. Remove the background, title and any other non-content groups.

The table should include these columns:
- ID: the exact SVG group ID
- Heading: a clear title for the group
- Description: a short explanation of what the group represents, which can be displayed when the element is clicked in Flourish

* Show the generated CSV for check and wait for next steps.

With the SVG file and CSV ready, ask the LLM to use the Flourish MCP Connector to create an Interactive SVG visualization. The Flourish Connector will:

• Bind the ID column in the Data tab to the SVG's layer group IDs
• Map the Heading column in the Data tab to each group's title
• Use the description column for the panel content
• Replace the template’s placeholder text with relevant copy drawn from the content of the SVG

With the Flourish MCP, use the Interactive SVG template to create a clickable visualization from this CSV and SVG.

Match each row to its shape using the ID column, and use the Heading column as the title shown when a shape is clicked.

Use the Description column as the content shown when a shape is clicked.

Don't leave any "reveal on click" or "extra layer" behavior turned on.

Tell me back in plain terms what's linked to what, so I can check it's right without needing to know the template's internals.

Double check the SVG is complete and nothing is missing, mislabeled, or left over from earlier drafts.

Make sure the image isn't sitting in a much bigger empty canvas than it needs — it should fill the frame, not look small with dead space around it.

Replace the template’s placeholder text with relevant copy drawn from the content of the SVG.

Connect the Flourish Connector through Claude or ChatGPT, or follow our documentation to connect it manually to another MCP-compatible tool. Then try the workflow with your own illustration – from an editable SVG in Affinity to a clickable, interactive experience in Flourish.