SVG in Qlik · Lesson 01

Build a dynamic toggle button with SVG in Qlik.

SVG (Scalable Vector Graphics) is a way to describe images with text: shapes, colours, and positions. Because Qlik expressions produce text, you can build an SVG on the fly and have it react to your data and variables — crisp at any size, with no image files to host.

Live preview

Try the toggle

This preview runs the same SVG in your browser to demonstrate the concept. In Qlik, you still need to create the vSwitch variable and a button action that changes it.

OFFvSwitch = 0ON

The expression

Copy this into your Qlik image measure

Qlik expression

='data:image/svg+xml;utf8,' &
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">' &
  '<rect x="8" y="4" width="72" height="42" rx="21" fill="' & If($(vSwitch)=1,'%234052c5','%23e7eaf2') & '" stroke="%23d7dae1" stroke-width="2">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23e7eaf2','%234052c5') & '" to="' & If($(vSwitch)=1,'%234052c5','%23e7eaf2') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<rect x="' & If($(vSwitch)=1,'36','13') & '" y="4" width="40" height="42" rx="13" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5">' &
    '<animate attributeName="x" from="' & If($(vSwitch)=1,'13','36') & '" to="' & If($(vSwitch)=1,'36','13') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
'</svg>'

Step by step

How the expression works

01
Data URI prefix
```
'data:image/svg+xml;utf8,
```
Tells Qlik the image is inline SVG text, not a file URL. Everything after the comma is the image itself.
02
SVG canvas and viewBox
```
viewBox="0 0 90 50" ... preserveAspectRatio="xMidYMid meet"
```
Defines a 90×50 drawing grid. Width/height 100% plus “meet” lets the toggle scale to any object size without distorting.
03
Track rectangle
```
<rect x="8" y="4" width="72" height="42" rx="21" ...>
```
The pill-shaped background. rx=21 (half the height) gives the fully rounded ends.
04
Conditional track colour
```
If($(vSwitch)=1,'%234052c5','%23e7eaf2')
```
Blue when ON, light grey when OFF. The # is written as %23 because a raw # would end the data URI.
05
Knob rectangle
```
<rect ... width="40" height="42" rx="13" fill="%23ffffff" ...>
```
The white handle drawn on top of the track. Later elements in SVG paint above earlier ones.
06
Conditional knob position
```
x="' & If($(vSwitch)=1,'36','13') & '"
```
Moves the knob right (x=36) when ON and left (x=13) when OFF.
07
SVG animation
```
<animate attributeName="x" from="..." to="..." dur="0.2s" fill="freeze"/>
```
Each time the expression re-renders, the knob slides and the track fades from the old value to the new one. fill="freeze" keeps the end state.

Qlik setup

Wire it up in your app

1. Create the variable

In edit mode, open Variables and create vSwitch with a starting value of 0 (OFF).

Variable

Name:        vSwitch
Definition:  0

2. Add a button action

The SVG only draws the state. Add a separate Button object with the action Set variable value → vSwitch, using this value to flip between 0 and 1.

Button action value

=1-$(vSwitch)

3. Place the expression in an object that renders images (for example a Text & image measure set to show as an image) and position the button over it or next to it.

Troubleshooting

If something doesn’t work

+The image shows as broken or blank

Check that every # is encoded as %23, quotes are balanced, and the object is set to show the expression as an image (e.g. a Text & image object with the measure set to Image, or a table column with Representation: Image).

+The toggle never changes

Confirm vSwitch exists and holds exactly 0 or 1. Add a text measure =$(vSwitch) to see its live value. Check the button action targets vSwitch, not a similarly named variable.

+The animation doesn’t play

Some Qlik clients cache the image or render it without SMIL animation. The final state is still correct. Try another browser, and make sure the expression output actually changes when the variable changes.

Next lessons