RRobert Mika SVG in Qlik blog
Robert Mika SVG in Qlik blog
Extra/SVG Switches/Lesson 01

Switch 1: Sliding rounded rectangle

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.

Try the toggleDemo
vSwitch = 0

This preview demonstrates the appearance only and is not connected to a live Qlik app. In Qlik, a separate button action must change vSwitch between 0 and 1.

The Qlik expression

Paste into a measure displayed as an image.

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,'%23705578','%23dfe2ec') & '" stroke="%23d5d8e3" stroke-width="2">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23dfe2ec','%23705578') & '" to="' & If($(vSwitch)=1,'%23705578','%23dfe2ec') & '" dur="0.2s" fill="freeze"/>' &
  '</rect>' &
  '<rect x="' & If($(vSwitch)=1,'36','13') & '" y="4" width="40" height="42" rx="13" fill="%23ffffff" stroke="%239da6b5" 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>'

Variation: Switch 5

Small variation, not a new design
vSwitch = 0

Switch 5 is the same design as this switch with one tiny change: the knob corner radius is rx="12" instead of rx="13". Everything else — track, positions and vSwitch logic — works exactly as explained here.

Switch 5 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="12" 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>'

How the expression works

  1. 1

    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.

  2. 2

    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.

  3. 3

    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.

  4. 4

    Conditional track colour

    If($(vSwitch)=1,'%23705578','%23dfe2ec')

    Muted plum when ON, light grey when OFF. The # is written as %23 because a raw # would end the data URI.

  5. 5

    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.

  6. 6

    Conditional knob position

    x="' & If($(vSwitch)=1,'36','13') & '"

    Moves the knob right (x=36) when ON and left (x=13) when OFF.

  7. 7

    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

Done in your Qlik app, separate from the preview above. vSwitch must be 0 (OFF) or 1 (ON).

1. Create the variable

In edit mode, open Variables and create vSwitch starting at 0.

Variable
Name:        vSwitch
Definition:  0

2. Add a button action

Button → Set variable value → vSwitch, with this value.

Button action value
=1-$(vSwitch)

3. Place the expression in an object that renders images (e.g. a Text & image measure shown as an image), next to or under the button.

Troubleshooting

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.