How to create groups with IDs in SVGs

The Interactive SVG template allows you to create interactive diagrams from your own SVG assets. To make elements clickable, you'll first need to group them into layers using a vector graphics application like Figma or Adobe Illustrator.

This help doc will demonstrate using Figma, but the process is similar in other applications.

1

Open your SVG in Figma and identify your elements. In this example, there are three coloured arrows associated with three coloured circles.



2

Group elements together by selecting one element, holding the Ctrl key on Windows or the Cmd ⌘ key on Mac, and clicking further elements. Then, right click and select "Group selection". 

We want to be able to click anywhere on the orange circle or arrow, or the text saying 'Orange' to display the same information, so we are grouping these elements together. 






3

Once you have grouped all your elements, double click the group name and rename the group layers so they are more easily identifiable. These names will act as IDs that you will use in Flourish to identify which information to associate with which parts of the image.






4

When you are happy with your SVG, click Export and change the file format in the dropdown box to SVG.



5

Before you export, click on the three dots and tick the  "Include "id" Attribute" option. This ensures that your group IDs are preserved when you bring the image into Flourish. Now you can click export to save your SVG. 



If you are using Adobe Illustrator, this last step works a little differently. When you have finished naming your groups, click File > Export, name your file and change the file format to SVG. When you click Export, a new window will open showing SVG options. Make sure that the dropdown next to Object IDs says " Layer names" before you click OK.

Your SVG is now ready to upload to the Interactive SVG template. Head over to our overview help doc to get started bringing your SVG to life with interaction.