How to Hide SVG Elements in WinCC Unified with hmi-bind:display

What is this post about?

The display connection of the SVGHMI Converter shows or hides an SVG element from a WinCC Unified property. Use it to show a warning icon only above a threshold, hide a motor shaft when the motor is off, or light status indicators from the bits of a PLC status word.

There are three types of control: Bool (on/off), Number (show when a value meets a comparison) and Bit № (show from selected bits of an integer). This guide covers all three, the SVGHMI code the converter generates for each, and a complete valve example you can download.

The display attribute

The SVG display attribute controls whether graphic and container elements are rendered.

If display="none", the element and all of its descendants are not rendered. Any other value (the converter uses inline) makes the element visible.

If you apply display="none" to a group, the group and everything inside it disappear. A child with display="none" stays hidden even when its parent is visible.

In this example the yellow square on the right is not shown, because its display attribute is set to none:

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>
</svg>

To control the attribute from WinCC, an SVGHMI widget binds it with hmi-bind:display and an expression in double curly braces. The converter writes these bindings for you.

Configuration fields

Upload your SVG to the converter and add a Display connection.

Element's ID

Select the target element from the dropdown or type its ID.

If the element is not in the list, open the SVG in a vector editor, select it and give it an id. Any element works: rect, circle, path, text, or a group g. When you target a group, all of its children are shown or hidden together.

Strict search (checkbox):

• Checked — matches exactly one ID.
• Unchecked — partial match: every element whose ID starts with the entered text. For example, MotorStatus matches MotorStatus1, MotorStatus2 and MotorStatus_Alarm.

WinCC Property

The name of the property you will see in WinCC Unified after placing the widget on a screen. It must not be empty, must not contain spaces or special characters, and must not start with a digit. Examples: ShowWarning, MotorVisible, StatusWord.

Type of control

Bool, Number or Bit №. Each generates different binding logic, described below.

Hide element by binary condition

The simplest option: the element is visible or hidden by a boolean property.

Settings:

• Default value — True (visible) or False (hidden) when the widget starts.
• Inverse behavior — flips the logic: the element is visible when the property is False.

Generated SVGHMI code, visible when True:

<g id="warning" hmi-bind:display="{{ParamProps.ShowWarning ? 'inline' : 'none'}}">
  <!-- content -->
</g>

With Inverse behavior, visible when False:

<g id="warning" hmi-bind:display="{{ParamProps.ShowWarning ? 'none' : 'inline'}}">
  <!-- content -->
</g>

The converter also declares the property for WinCC:

<hmi:paramDef name="ShowWarning" type="boolean" default="true"/>

Hide compared to a number

Shows the element when a numeric property meets a comparison. This suits threshold alerts, for example a temperature warning at 80 °C and above.

Settings:

• Comparison — ==, !=, >, ≥, < or ≤.
• Value — the number to compare with.

SVGHMI is XML, so < and > cannot appear inside an attribute value. The converter writes the comparison as a function instead:

Example — show a warning when the temperature is 80 or more:

<g id="warning" hmi-bind:display="{{ge(ParamProps.Temperature, 80) ? 'inline': 'none'}}">
  <!-- warning icon -->
</g>

Comparison: ≥ 80
Temperature 65 → 65 < 80 → hidden
Temperature 85 → 85 ≥ 80 → visible
Temperature 75 → 75 < 80 → hidden again

If you need a condition the form does not offer, for example a range, edit the generated expression in a text editor: {{and(ge(ParamProps.Temperature, 80), lt(ParamProps.Temperature, 120)) ? 'inline': 'none'}}. Note that and() and or() take exactly two arguments; nest them for more.

Hide by bit state

The most powerful option: show an element from individual bits of a 32-bit integer. This is made for PLC status words, where each bit of an INT or DINT is a separate flag — running, fault, maintenance and so on.

Settings:

• 32 checkboxes, numbered 1 to 32. Checkbox N tests the value 2^(N−1): checkbox 1 tests 1, checkbox 2 tests 2, checkbox 3 tests 4, checkbox 5 tests 16.
• Inverse behavior — flips the logic.

The element is visible when any of the selected bits is 1. With Inverse behavior it is the other way round: the element is visible while all selected bits are 0. Always select at least one checkbox.

Generated SVGHMI code for one selected bit (checkbox 3, value 4):

<g id="fault" hmi-bind:display="{{ has(ParamProps.StatusWord,4) ? 'inline' : 'none' }}">
  <!-- content -->
</g>

For several bits the converter nests or() calls, because or() takes two arguments:

• checkboxes 1 and 3 → or(has(P,1),has(P,4))
• checkboxes 1, 2 and 3 → or(has(P,1),or(has(P,2),has(P,4)))

has(value, mask) is true when value & mask is not zero.

Example: valve status word

Here is a full example with a valve and the status word I use for it:

I use four of these bits: 5 shows the warning icon, 6 the fault icon, and 7 and 8 (both timeouts) share one icon.

Add a Display connection, switch Type of control to Bit № and tick checkbox 5. The element with ID warning is now shown when bit 5 is set.

One more connection for the element with ID fault, controlled by checkbox 6.

The last connection uses two checkboxes, 7 and 8, so the timeout icon appears when either timeout bit is set.

To colour the valve body as well, add a Fill connection. I turn Strict search off, because the body consists of several elements named bgColor1, bgColor2, bgColor3 and so on.

Click Convert: the report shows that every connection found its elements.

In WinCC Unified, writing 16, 32 or 64 to the status word property switches on bit 5, 6 or 7 — and the matching icon appears.

Download the original picture and the converted widget to follow the example yourself:

Display-SVGHMI.pro.svg

Display-SVGHMI.pro.svghmi

Example: motor shaft visibility

Hide the motor shaft while the motor is stopped:

1. Motor housing — always visible, no display connection.
2. Motor shaft — Bool control, property ShowShaft, default True.
3. In WinCC, bind ShowShaft to the PLC tag Motor_01_Running.

Tips

Group related elements. If several elements should appear and disappear together, wrap them in one <g> and add a single connection to the group instead of one per element:

<g id="MotorAssembly" hmi-bind:display="{{ParamProps.ShowMotor ? 'inline' : 'none'}}">
  <rect id="Housing"/>
  <circle id="Shaft"/>
  <path id="Fan"/>
</g>

Multi-level warnings with Number control. Give each severity its own element and threshold:

• Info icon: gt(ParamProps.Level, 100)
• Warning icon: gt(ParamProps.Level, 200)
• Critical icon: gt(ParamProps.Level, 300)

Troubleshooting

The element does not hide or show:

• Check that the property name in WinCC matches exactly; names are case-sensitive.
• Check that the element ID still exists in the SVG: if it was renamed or removed, the binding silently does nothing.
• For Number control, check the property's start value: if it already meets the condition, the element is visible from the start.

Bit control does not react as expected:

• Remember the numbering: checkbox 1 is the value 1, checkbox 2 is 2, checkbox 3 is 4. Mixing up the bit position and the bit value is the most common mistake.
• Test with known integer values before connecting the property to a PLC tag.

Summary

You can now control an element's visibility three ways: with a single boolean, by comparing a number, or from chosen bits of your status word.

• SVGHMI Converter
• WinCC: SVG to SVGHMI widget converter — overview of all connections
• Rotation of dynamic SVG in WinCC
• SVGHMI structure deep dive
• HMI Widget Library

FAQ

How do I hide an SVG element in WinCC Unified?

Bind the display attribute: hmi-bind:display="{{ParamProps.ShowWarning ? 'inline' : 'none'}}". The SVGHMI converter writes this for you with a Display connection of type Bool.

Why does SVGHMI use gt() and ge() instead of > and <?

SVGHMI is XML, so < and > cannot appear inside an attribute value. Comparisons are written as functions: eq, ne, gt, ge, lt and le, for example ge(ParamProps.Temperature, 80).

Which value does each bit checkbox test?

Checkbox N tests the value 2^(N−1): checkbox 1 tests 1, checkbox 2 tests 2, checkbox 3 tests 4. The element is visible when any selected bit is 1; with Inverse behavior it is visible while all selected bits are 0.