Our Interactive SVG template comes with a Reveal mode that allows you to show hidden layers revealing new elements when a user clicks on a specific element of the SVG.
This feature can be very useful in different scenarios – for example, when you need to add additional information to a section, or when you want to change the existing elements of the diagram with a click. We’ll look at different use cases but first, we’ll go over how to set up your SVG file to include reveal layers.
In this article
Layering SVGs
The reveal mode works by displaying hidden layers on click. These hidden layers need to be added to the Data tab in a separate column that will be bound to the Reveal layer column binding. Building your SVG correctly is a crucial step to make sure the revealed layers work and, although every chart is different, there are some tips that can help you when designing yours:
- Group common elements together: make sure that all pertinent elements are grouped in a single layer in your file.
- Use easy layer names: one tip is to repeat the layer name with additional elements for the reveal layer. For example, a layer named Circle1 can have a Reveal layer named revealCircle1.
How are layers revealed
In the Flourish editor you can choose whether to keep the base diagram visible or not after revealing the new layers by tweaking the CSS properties of the SVG.
In the Settings panel go to Advanced > Edit CSS. Take a look at the .clickable-element.faded class. This determines the opacity of all the layers that are not the revealed one. By default, it will be set to 40% (0.4).
You can turn the opacity down to 0 if you don’t want those layers to show on reveal, or set it up to 1 if you want them to be fully opaque all the time.
Now that we’ve taken a look at how the reveal mode works, it’s time to explore some possible use cases for it.
When and how to use the Reveal mode
- 1
-
To add information to the existing diagram: in this scenario, you want to use the reveal mode to make elements appear on your diagram. In this example we reveal a new set of bubbles after clicking on the blue bubble of the original diagram.
For this mode, you can either keep the base layer visible at 100% opacity, reduce its opacity to highlight the revealed elements, or remove it completely and use a duplicate bound to the revealed layer.
- 2
-
To expand on the contents of a particular element on the diagram: in this case, you can dissect or inspect a specific element of the base diagram. In this example, we can see the smaller circles that are contained inside the purple and pink circle.
Once again, in this case you can either keep the base layer fully visible, reduce its opacity or remove it completely and use a duplicate bound to the revealed layer.
- 3
-
To change or replace the elements in the existing diagram: in this case the reveal layers disrupt the existing structure of the base layer. In this example, we can see how clicking on the blue circle reveals a new assortment of shapes that replaced the previous one.
Here it is recommended to remove the opacity of the base layer to give way to the revealed one.