Dynamic SVG

Dynamic SVG allows you to change colors or attributes in an SVG based on values from data points. This makes it possible to create more advanced, customized visualizations and animations directly in the view. Application Highlight operational states (e.g. green color when a fan is running). Indicate errors (e.g. red color when a data point is reporting an error). Create dynamic animations or status markers in custom SVG graphics. Setup Upload an SVG into the view with the Dynamic SVG container Fill..

Written By Aleksander Bless

Last updated 14 days ago

With Dynamic SVG, you can change colors or attributes in an SVG based on values from data points. This makes it possible to create more advanced, customized visualizations and animations directly in the view.

Use Case

  • Highlight operational states (e.g., green color when a fan is running).

  • Indicate errors (e.g., red color when a data point reports an error).

  • Create dynamic animations or status indicators in custom SVG graphics.

Setup

  1. Upload an SVG to the view using the Dynamic SVG Container

  2. Fill in the fields to define how the data point should control the attributes:

  • Data Point: Select the desired data point to control the change.

  • SVG element ID: The ID of the element in the SVG you want to change.

  • SVG attribute ID: The attribute to be changed (e.g., stroke, fill, opacity).

  • Value: Which data point value should trigger the change (can be equal to or greater than a specified value).

  • Color/String: Select a color or string to use when the value matches.

Example: Change stroke color

SVG code:

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

Setup in the Dynamic SVG form:

  • Data Point: FanStatus

  • SVG element ID: active

  • SVG attribute ID: stroke

  • Value: 1

  • Color/String: #00FF00 (green)

Result: When the FanStatus data point is 1, the stroke turns green.

Tip

  • Use clear and unique IDs in the SVG to avoid conflicts.

  • You can use both hexadecimal colors (#RRGGBB) and string values (e.g., hidden, visible).