Lessons/SVG Switches/Lesson 1

Outlined dot

Rounded track with an outline and a dot knob. Track fill and knob fill turn teal when ON.

State logic:: Track fill and knob fill turn teal when ON.
Animation:: Knob cx slides 29 → 91; 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="10" width="100" height="40" rx="20" fill="%23f2f3f5" stroke="%2372cbbb" stroke-width="2.5">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23f2f3f5','%2314b99f') & '" to="' & If($(vSwitch)=1,'%2314b99f','%23f2f3f5') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<circle cx="' & If($(vSwitch)=1,'91','29') & '" cy="30" r="14" fill="' & If($(vSwitch)=1,'%2314b99f','%23ffffff') & '" stroke="%2372cbbb" 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 starts the image and viewBox="0 0 120 60" sets a drawing area 120 units wide and 60 tall. Every shape below is placed inside it.
2
```
<rect ... rx="20">
```
The <rect> is the switch track. rx="20" rounds the corners so far the rectangle becomes a pill, and stroke draws its outline.
3
```
fill="%23f2f3f5"
```
Colours are written as %23 instead of # because the SVG is packed into a web address (a data URI), and a bare # would break the address.
4
```
If($(vSwitch)=1, ...)
```
Each changeable part reads your Qlik variable. When vSwitch is 1 the first value is used (ON), otherwise the second (OFF).
5
```
<animate attributeName="cx" ...>
```
<animate> makes the knob's cx (horizontal centre) slide between 29 and 91 over 0.2s, so the dot glides instead of jumping.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> holds a fresh timestamp on every recalculation, so Qlik treats each click as a new image and the animation replays both ways.

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.