Use Dynamic SVG in the view

Here you can see how to use Dynamic SVG to change colors or other attributes in an SVG based on values from data points. This is used to create more informative and visual displays.

Written By Evolo Support

Last updated 2 days ago

What You Can Use It For

You can use Dynamic SVG to:

  • display operating status, such as a green color when a fan is running

  • display errors, such as a red color for an alarm or error status

  • change the visibility, color, or other attributes of a custom SVG

  • create more dynamic process images and status displays.

Before you begin

Make sure the SVG you’re using has clear and unique IDs for the elements you want to control. You’ll need these IDs when setting up the rule in Dynamic SVG.

Here’s how

  1. Open the view builder.

  2. Add a Dynamic SVG container to the view.

  3. Upload the SVG file you want to use.

  4. Add a rule for the element you want to control.

  5. Select the data point that will control the change.

  6. Enter the ID of the SVG element you want to change.

  7. Select which attribute to change.

  8. Specify the value that will trigger the change.

  9. Select the color or string to use.

  10. Save and test the view.

Fields you must fill in

Data Point

Select the data point that will control the change in the SVG.

SVG Element ID

Enter the ID of the element in the SVG that you want to change. This must be the same ID as in the SVG code.

SVG Attribute ID

Select which attribute to change. Common examples include:

  • fill

  • stroke

  • opacity

When value is

Specify which data point value should trigger the change.

Display color / text

Select the value to set for the attribute when the data point matches. This can be a color code or a text string. For example, you can use:

  • #00FF00

  • hidden

  • visible

Example: Change the line color

Example SVG code:

<g id="active" stroke="#ADADAD">
 <circle id="circle" stroke-linejoin="round" />
 <path stroke-linejoin="round" />
</g>

Example setup:

  • Data point: FanStatus

  • SVG element ID: active

  • SVG attribute ID: stroke

  • Value: 1

  • Color / string: #00FF00

Result: When FanStatus = 1, the line turns green.

Tip

Use short and clear IDs in the SVG.
Feel free to test the SVG with a single element first before building more complex logic.
Use hexadecimal colors when you want precise control over color choices.

Troubleshooting

Nothing happens in the viewport

Probable cause:
The ID of the element in the SVG does not match what you entered.

Solution:
Verify that the SVG element ID exactly matches the ID in the SVG code.

The element isn’t getting the correct value

Probable cause:
The data point value does not match the value you set in the rule.

Solution:
Test the data point and verify that the value is actually equal to or greater than the threshold you selected