Interactive SVG – An overview

What is it for?

This template is great for creating interactive diagrams from SVG images. You can use SVG assets of your own, bringing them to life through interaction in just a few steps. This template allows you to make elements clickable to displaying different information alongside the image. 

How to get started

1

You'll need an SVG image that has different elements grouped together and named with an ID attribute. For more information on how to do this, see our help doc on creating groups with IDs in SVGs.

If you don't have any of your own SVGs, you can find images to use from websites like unDraw or the Noun Project.

2

Once you have your SVG grouped and ready, choose the Interactive SVG starting point from the template chooser & upload for SVG under "Graphic" in the settings panel. Here you also have the option to change the width of your image.

Under "Mobile view", you can change the breakpoint at which the layout changes, choose to add a different image and specify a different image width for mobile devices.

3

Under the mobile settings you can also choose how the SVG behaves on smaller devices. The  Interactive mode acts the same as Desktop - clicking parts of the image to display information. Show all shows all the information at once without interaction, and Accordion will display the Headings for all parts of the image, with the option to click on each Heading to display the Content.

(1:  Interactive ; 2: Show all ; 3: Accordion )

4

In the Data tab, each row represents a clickable element. As you enter each of your group IDs in column A, identified elements will begin to flash in the preview in the bottom right corner of the Data tab.

5

Add the information you want to display for each element in the columns for Heading 1, Heading 2 and Content. You can add text in these columns, or use HTML to add other content.

To add an image to your Content column, you will need to wrap a link to your image in an HTML tag. If your image isn't already somewhere else on the internet, you can generate a URL by right clicking, choosing "Upload image" and selecting your image.

In your HTML image tag, you may also want to specify a height or width for your image.

<img src="https://public.flourish.studio/uploads/48099dbd-6c03-442a-8423-07f79e37bafc.png" height="100px"><br>

It's even possible to embed other Flourish visualizations next to your SVG. Just copy and paste the iframe embed code from a published visualization into one of these columns. You may want to adjust the height before you copy the iframe code. 

6

It is also possible to add links to each SVG layer through the data sheet. In order to achieve this, you can create a column that contains the hyperlinks and bind it to the Link data binding. This way, when you click on the layer, the URL will be opened. Please note that this will override any reveal layers or popups. 

7

In the Preview tab, use the settings panel to customise your interactive SVG. Under "Advanced", you can add custom styles by editing the CSS. 

For example, you can change how transparent you'd like the un-clicked elements to be by changing the opacity of the class .clickable-element.faded.

You can use this setting to change the styles of your content as well. If we want our Heading 2 to be italicised and our Content to have some padding at the top, we can use CSS like this:

.text-block h2 {
font-style: italic;
}

.text-block .content {
padding-top: 12px;
}