Show and Hide SVG Elements in WinCC Unified

Introduction

The display connection controls whether an SVG element is visible or hidden based on a WinCC Unified property. This is one of the most useful features of the SVGHMI Converter — it lets you show warning icons only when a threshold is exceeded, hide a motor shaft when the motor is off, or toggle status indicators based on PLC status word bits.

The converter supports three control types: Boolean (simple on/off), Number (show when a value meets a condition), and Bit (show based on individual bits in an integer).

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 manually.

If the element isn't in the list, open the SVG in a vector editor, select it, and assign an id. You can target any element type: rect, circle, path, text, or groups (g). When you target a group, all children are shown/hidden together.

Strict search (checkbox):

• Checked — matches one exact ID
• Unchecked — partial matching: selects all elements whose ID starts with the entered text. For example, MotorStatus matches MotorStatus1, MotorStatus2, MotorStatus_Alarm.

WinCC Property

The property name that will appear in WinCC Unified when you place the widget. Rules:

• Must not be empty
• No spaces or special characters
• Cannot start with a digit

Examples: ShowWarning, MotorVisible, AlarmActive

Default Value

Depends on the control type:

• Boolean — True or False
• Number / Bit — integer from -2,147,483,648 to 2,147,483,647

Type of Control

Choose between Boolean, Number, or Bit. Each generates different binding logic — see below.

Boolean Control

The simplest option: element is visible or hidden based on a boolean value.

Settings:

• Default Value: True (visible) or False (hidden) at startup
• Inverse behavior (checkbox): flips the logic

Generated SVGHMI code:

Normal behavior — visible when True:

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

Inverted — visible when False:

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

Auto-generated parameter:

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

Number Control

Shows or hides an element based on a numeric comparison. This is useful for threshold-based alerts — for example, showing a temperature warning only when the value exceeds 80°C.

Settings:

• Comparison operator: select from >, <, >=, <=, ==, !=
• Condition value: the threshold to compare against
• Default value: the initial value at startup

Generated SVGHMI code:

Since SVGHMI is XML-based, the < and > characters cannot appear directly in attribute values. The converter uses function equivalents instead:

Example — show a warning when temperature >= 80:

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

Auto-generated parameter:

<hmi:paramDef name="Temperature" type="number" default="65"/>

Practical example:

Condition: >= 80
Default Value: 65

At startup (65): 65 < 80 → hidden
Temperature rises to 85: 85 >= 80 → visible
Temperature drops to 75: 75 < 80 → hidden again

Bit Control

The most advanced option: shows or hides an element based on individual bits in a 32-bit integer. This is designed for working with PLC status words — a common Siemens pattern where each bit in an INT or DINT represents a different flag (running, fault, maintenance, etc.).

Settings:

• 32 checkboxes for bits 0–31 — select which bits to monitor
• Inverse behavior: flip the logic
• Default value: initial integer value

Logic:

• Normal mode: element is visible when any of the selected bits is set to 1
• Inverse mode: element is visible when all selected bits are 0
• No bits selected: element is always visible (safety fallback)

Generated SVGHMI code:

For a single selected bit (e.g., bit 2 = value 4):

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

For multiple bits (e.g., bits 0, 2 — bitmask 5, binary 101):

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

The has(value, bit) function performs a bitwise AND: (value & bit) !== 0.

Bitmask generation: the converter takes the selected bits and builds nested or(has(...)) calls:

• Mask 5 (binary 101) → or(has(P, 1), has(P, 4))
• Mask 7 (binary 111) → or(has(P, 1), or(has(P, 2), has(P, 4)))
• Mask 4 (binary 100) → has(P, 4) (single bit — no or() needed)

Practical example — pump station status:

Bit assignments in PLC:
  Bit 0: Running
  Bit 1: Local/Remote
  Bit 2: Auto/Manual
  Bit 3: Fault
  Bit 4: Maintenance

To show a "Fault" icon, select only Bit 3.
The icon becomes visible when bit 3 is set (value & 8 !== 0).

Example: Motor Shaft Visibility

An Example: hide the motor shaft element.

Setup:

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

You can combine this with other connections: use fill color to change the motor housing color based on status, and rotary animation to spin the shaft when running.

Tips

Group related elements. If several elements should be shown/hidden together, wrap them in a <g> group and apply the display binding to the group — instead of adding separate connections to each element:

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

Use Number control for multi-level warnings. Create separate elements for each severity level with different thresholds:

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

Troubleshooting

Element not hiding/showing:

• Check that the property name matches exactly in WinCC (case-sensitive).
• Verify the element ID exists in the SVG — if the element was renamed or removed, the binding silently fails.
• For Number control, check the default value — if it already satisfies the condition, the element will be visible from the start.

Bit control not working as expected:

• Verify bit positions: Bit 0 = 1, Bit 1 = 2, Bit 2 = 4, etc. A common mistake is confusing bit position with bit value.
• Test with known integer values to confirm the logic before connecting to PLC tags.

Additional Resources

• SVGHMI Converter
• SVGHMI Structure Deep Dive — full format overview
• HMI Widget Library