Lessons/SVG Switches/Lesson 2

Solid track

Solid rounded track with a white outlined knob. Track fill swaps grey → teal.

State logic:: Track fill swaps grey → teal.
Animation:: Knob cx slides; track fill fades.

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="12" width="100" height="36" rx="18" fill="' & If($(vSwitch)=1,'%2314b99f','%23e8e9ec') & '">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23e8e9ec','%2314b99f') & '" to="' & If($(vSwitch)=1,'%2314b99f','%23e8e9ec') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<circle cx="' & If($(vSwitch)=1,'91','29') & '" cy="30" r="16" fill="%23ffffff" stroke="%23d7dcda" stroke-width="2">' &
    '<animate attributeName="cx" from="' & If($(vSwitch)=1,'29','91') & '" to="' & If($(vSwitch)=1,'91','29') & '" dur="0.2s" fill="freeze"/>' &
  '</circle>' &
'</svg>'

How the expression works

1
```
<svg ... viewBox="0 0 120 60">
```
The <svg> tag opens the image; viewBox="0 0 120 60" sets a 120 × 60 drawing area that all shapes sit inside.
2
```
<rect ... rx="18" ...>
```
The <rect> is the solid track. rx="18" rounds it into a pill and its fill is swapped between pale grey and teal by the If() below.
3
```
If($(vSwitch)=1,'%2314b99f','%23e8e9ec')
```
This is the ON/OFF logic: when your Qlik variable vSwitch is 1 the track turns teal (%2314b99f), otherwise it stays grey. Colours use %23 because # would break the data-URI address.
4
```
<circle ... fill="%23ffffff">
```
The <circle> is the white knob; stroke and stroke-width give it a soft outline so it reads against the track.
5
```
<animate attributeName="cx" ...>
```
Two <animate> tags run on each click: the knob's cx slides 29 → 91 and back, while the track's fill fades between its two colours.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> carries a fresh timestamp every recalculation, so Qlik reloads the image on each click and the animation replays in both directions.

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.