Lessons/SVG Switches/Lesson 6

Check badge

Pale track, a check badge on the left and a sliding knob. Badge fills teal and the tick appears when ON.

State logic:: Badge fills teal and the tick appears when ON.
Animation:: Badge fill fades; knob cx slides.

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="%23e8efed" stroke="%23dce5e2" stroke-width="1.5"/>' &
  '<circle cx="30" cy="30" r="12" fill="' & If($(vSwitch)=1,'%2314b99f','%23ffffff') & '" stroke="%233fc4ae" stroke-width="1.5">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23ffffff','%2314b99f') & '" to="' & If($(vSwitch)=1,'%2314b99f','%23ffffff') & '" dur="0.2s" fill="freeze"/>' &
  '</circle>' &
  '<path d="M24 30l4 4 8-9" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="' & If($(vSwitch)=1,'1','0') & '"/>' &
  '<circle cx="' & If($(vSwitch)=1,'91','29') & '" cy="30" r="14" fill="%23f8f9f8" stroke="%23bfcac6" 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; viewBox="0 0 120 60" defines the 120 × 60 drawing area for all shapes.
2
```
<rect ... fill="%23e8efed" .../>
```
The pale track never changes colour — notice it has no If() and no <animate>. Only the badge and knob react to the switch.
3
```
<circle cx="30" ...>
```
This circle is the badge on the left. Its fill reads your Qlik variable and turns teal when vSwitch is 1. Colours use %23 because # would break the data-URI address.
4
```
<path d="M24 30l4 4 8-9" ...>
```
The <path> draws the tick mark. It is always white; its opacity is switched between 1 and 0 with If($(vSwitch)=1,...), so the tick only shows when the switch is ON.
5
```
<animate attributeName="cx" ...>
```
<animate> slides the right-hand knob's cx between 29 and 91 on every click, and a second <animate> fades the badge's fill.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> holds a fresh timestamp each recalculation, so Qlik reloads the image on every click and the animations replay 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.