Lessons/SVG Switches/Lesson 3

Outlined track

Rounded track with a teal outline and white knob. Track fill swaps pale → teal; outline stays.

State logic:: Track fill swaps pale → teal; outline stays.
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','%23f5f6f7') & '" stroke="%233fc4ae" stroke-width="2.5">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23f5f6f7','%2314b99f') & '" to="' & If($(vSwitch)=1,'%2314b99f','%23f5f6f7') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<circle cx="' & If($(vSwitch)=1,'91','29') & '" cy="30" r="15" fill="%23ffffff" stroke="%23d8dedb" stroke-width="1.5">' &
    '<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 and viewBox="0 0 120 60" defines a 120 × 60 drawing area for the shapes.
2
```
stroke="%233fc4ae" stroke-width="2.5">
```
The track's outline is drawn with stroke; unlike the fill, the stroke value is fixed, so the teal outline stays visible in both states.
3
```
If($(vSwitch)=1,'%2314b99f','%23f5f6f7')
```
The fill reads your Qlik variable: vSwitch = 1 turns the track teal, 0 keeps it pale. Colours are written %23 because # would break the data-URI address.
4
```
<circle ... fill="%23ffffff">
```
The <circle> is the white knob; its own outline colours never change, only its position does.
5
```
<animate attributeName="cx" ...>
```
<animate> slides the knob's cx between 29 and 91 over 0.2s, and a second <animate> fades the track's fill, so the switch glides on every click.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> gets a new timestamp each recalculation, so Qlik treats every click as a fresh 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.