Lessons/SVG Switches/Lesson 5

Square slider

Square-cornered track, an outlined icon and a rectangular slider. Track fill and icon stroke change colour.

State logic:: Track fill and icon stroke change colour.
Animation:: Slider x moves 18 → 72; 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="13" width="100" height="34" rx="5" fill="' & If($(vSwitch)=1,'%2314b99f','%23e5e7e8') & '" stroke="%23cbd3d0" stroke-width="2">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23e5e7e8','%2314b99f') & '" to="' & If($(vSwitch)=1,'%2314b99f','%23e5e7e8') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<rect x="16" y="19" width="21" height="22" rx="3" fill="none" stroke="' & If($(vSwitch)=1,'%23d8fff6','%23899591') & '" stroke-width="1.5"/>' &
  '<path d="M21 30h11" stroke="' & If($(vSwitch)=1,'%23d8fff6','%23899591') & '" stroke-width="1.5"/>' &
  '<rect x="' & If($(vSwitch)=1,'72','18') & '" y="17" width="32" height="26" rx="4" fill="%23ffffff" stroke="%23d1d8d5" stroke-width="1.5">' &
    '<animate attributeName="x" from="' & If($(vSwitch)=1,'18','72') & '" to="' & If($(vSwitch)=1,'72','18') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
'</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
```
<rect ... rx="5" ...>
```
Unlike the other switches, rx is only 5, so the track keeps squarer corners. Its fill swaps grey → teal with the state.
3
```
<rect ... fill="none" stroke="...">
```
This second rect and the short <path> underneath it draw a small icon inside the track; their stroke colour changes with the state so the icon stays visible on both fills.
4
```
If($(vSwitch)=1,'%23d8fff6','%23899591')
```
The icon's stroke reads your Qlik variable: a pale mint on teal when vSwitch is 1, a grey on grey when it is 0. Colours use %23 because # would break the data-URI address.
5
```
<rect x="..." width="32" height="26">
```
The slider is a white rectangle, not a circle. Only its x position changes between 18 and 72 — everything else about it stays fixed.
6
```
<desc>Num(Now(1)*86400000,'0')
```
The hidden <desc> gets a new timestamp every recalculation, so Qlik treats each click as a fresh image and the slide 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.