[00:00] In this lesson, I'll demonstrate how to dynamically color part of an SVG in Vision to give a visual indication to users of a changed state. I'll start by pulling in an SVG from the Symbol Factory. I'll demonstrate this with a motor. So I'll find one I like from the motor section and go ahead and drag it into my window. To review, SVGs are made up of several individual components. I can double click the motor and drill into the components within each group. Once I select the path that I want to color I can go down to the Property Editor and create a binding on the Fill Paint property. You could set up any type of binding here, but for my example, I have an OPC tag that will represent the state of my motor. I'll select a tag binding and I can pick my tag. You'll notice that there's a number to color translation area below the tag picker and this can be used to pick which tag values correspond to which colors. I can add or remove cases here and also select a fallback color. For value of 0 I'll pick red.

[01:08] Or one, I'll pick green. And then I'll add another row for a value of 2 and I'll select yellow and then make it blink orange. I'll hit OK here and then I can start changing the value of my tag. You can see my tag in the tag browser here. It currently has a value of zero in the motor is red. If I change it to 1 the color will change to green finally if I change it to two it will blink yellow and orange.