Skip to main content
Version: 25.1 (stable)

Dynamic Images Using SVGs

HELIO can help you add more dynamics to your images. You can use it to show the status of a part of your machine within an illustration or to emphasize certain parts of your illustration. HELIO uses SVG images and their layers for this purpose.

Let our team member Johannes guide you through the necessary steps or read on.

Let's go over how to set up and export your SVG image so HELIO knows which layers it should make available in the IDE.

1. Basics: How Does HELIO Analyze SVGs?​

SVG images can have many layers and odds are, you really don't need to address all of them within HELIO. So, the first thing we need to do, is tag those layers.

How HELIO Analyzes Your SVG

  • HELIO looks at the id attribute of each element in your SVG
  • If this id starts with helio:, you're basically telling HELIO to make this layer available for editing

2. Create Your Illustration​

  1. Create Your Image

Figma Design is one of the go-to tools for designing web-based user interfaces. So tt's likely that you and your team are using it to create your illustrations. If you do, just create your illustration in Figma Design, just like you normally would.

New To Figma?

You might want to check out this introduction video to get started with the tool:

  1. Prefix Your Layers

Figma let's you easily name the layers of your illustration. With the right export settings those names will turn into the ids of your SVG.

So simply add helio: to the beginning of each layer you want to make available in HELIO:

  1. Export With Correct Settings

Export the SVG and make sure to include the 'id' attribute in your export. Otherwise the tags will be ignored and HELIO won't know which layers to address:

3. Import It and Make It Dynamic​

  1. Add An Image

Add the exported SVG file like any other image. For example you could:

  1. Import the SVG

Once you import an SVG image with prefixed layers, HELIO will make the layers accessible within the Properties Panel of the Image element like in this example:

  1. Make Your SVG Layers Dynamic

If you have tagged your SVG's layers correctly, they should show up in HELIO under Layers. For each of these layers you can now add an On click action and a Display Condition.

In this example we have:

  • Added a Component Property to our Image Page called Direction to use for this, but be sure to use whatever best suits your needs.
  • Added the Direction Component Property to both Display conditionS on our Direction-A and Direction-B layers, while inverting it on one of the layers.

Finally we've added a On Click action that will actually toggle our Direction Component Property.

Give It a Try!

Now it's time to test our dynamic image. Simply switch over to Test mode and click on any layer of your SVG that you've added an On click action to, and watch what happens.

If we press the Button layer in our example, HELIO will switch between the Direction-A and Direction-B layers and we are able to display the flow direction within our image. Isn't that nice?

Mission accomplished!

Now you've learned the basics, go ahead and try it out for yourself.