Lessons/SVG Switches/Lesson 7

Label and chevrons

Outlined pill with a text label and double chevrons. Label reads OFF/ON; chevrons go from faint to solid.

State logic:: Label reads OFF/ON; chevrons go from faint to solid.
Animation:: Background fill fades (no moving knob).

Switch previewDemo

vSwitch = 0

This preview is not connected to a live Qlik app. In Qlik, a separate button action changes vSwitch between 0 and 1.

The Qlik expression

Paste into an object that displays a measure as an image.

Qlik expression

='data:image/svg+xml;utf8,' &
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">' &
  '<desc>' & Num(Now(1)*86400000,'0') & '</desc>' &
  '<rect x="10" y="11" width="100" height="38" rx="19" fill="' & If($(vSwitch)=1,'%23f4fbf9','%23ffffff') & '" stroke="%233fc4ae" stroke-width="2">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23ffffff','%23f4fbf9') & '" to="' & If($(vSwitch)=1,'%23f4fbf9','%23ffffff') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<text x="42" y="35" text-anchor="middle" font-family="Arial,sans-serif" font-size="11" font-weight="700" letter-spacing="1" fill="%2337a995">' & If($(vSwitch)=1,'ON','OFF') & '</text>' &
  '<path d="M78 23l7 7-7 7m8-14l7 7-7 7" fill="none" stroke="%2337a995" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" opacity="' & If($(vSwitch)=1,'1','0.35') & '"/>' &
'</svg>'

How the expression works

1
```
<svg ... viewBox="0 0 120 60">
```
The <svg> tag opens the image and viewBox="0 0 120 60" sets the 120 × 60 drawing area.
2
```
<text ...>If($(vSwitch)=1,'ON','OFF')</text>
```
The label is real SVG <text>. Its content is an If() on your Qlik variable, so it reads ON when vSwitch is 1 and OFF when it is 0.
3
```
font-family="Arial" font-size="11"
```
Text attributes set the look: font family, size, bold weight and letter spacing work like they do in a document.
4
```
<path d="M78 23l7 7-7 7m8-14l7 7-7 7" ...>
```
The <path> draws the double chevrons. Their opacity is switched between 1 and 0.35, so they look faint when OFF and solid when ON.
5
```
<animate ...> (none)
```
This switch has no <animate> tags and no knob — the text and colours simply change the moment Qlik recalculates the image.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> carries a fresh timestamp on every recalculation, so Qlik treats each click as a new image and the state always updates.

Qlik setup

vSwitch must be 0 (OFF) or 1 (ON).

1. Create the variable

Create vSwitch in Variables. If it has no initial value, set it to 0.

Variable

Name:        vSwitch
Definition:  0

2. Add a button action

Set variable value → vSwitch, with this value.

Button action value

=1-$(vSwitch)

3. Display the SVG expression as an image next to or beneath the button. The hidden timestamp makes the image fresh on every recalculation so any animation can replay in both directions.

Troubleshooting

The switch does not change state

Check that vSwitch starts at 0 and the button action sets vSwitch to =1-$(vSwitch). The SVG image itself does not change the Qlik variable.

The animation does not replay

Keep the hidden timestamp line in the copied expression and ensure the image recalculates when vSwitch changes. SVG animation support depends on your Qlik rendering context.