Skip to main content
Version: 7.9

Tint SVG

Animating the Tint on a Grayscale Symbol

Lets say you have chosen one of the many grayscale symbols, such as the 3-D Valve symbol from the Valves category, and you want to tint the valve green when the valve is open, red when the valve has a fault, and keep it gray when the valve is closed. Suppose you have a tag called ValveStatus, that is 0 for closed, 1 for open, and 2 for faulted.

  1. Drag the symbol onto the screen.

  2. Duplicate the symbol by selecting it and choosing Duplicate from the Edit menu, or pressing CTRL-D.

  3. Now, select the duplicate symbol, which will be above the original.

  4. Press the Union button (union button icon) in the toolbar or find the Union item under the Shape menu. This will flatten the duplicated shape into a single shape.

    animate grayscale tint step 4

  5. Remove the outline by setting the Stroke Paint property to No Paint.

  6. Bind the Fill Paint property to your ValveStatus Tag.

  7. Add three entries into the number-to-color translation table:

    • 0% opaque white for 0
    • 40% opaque green for 1
    • 40% opaque red for 2

    animate grayscale tint step 7

In summary, what we did to tint the symbol was to make a flat shape that had the exact same outline as the symbol, and used semi-transparent fills to achieve a tint effect for the underlying symbol.

tint SVG result