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

Switch 2: Compact rectangular switch

This switch uses the same idea as Switch 1 — a coloured track and a sliding white knob — but with smaller corner radii. The result is a crisper, more rectangular control that suits dense, business-style dashboards.

Try the compact switchDemo
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="5" width="70" height="40" rx="11" 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="5" width="38" height="40" rx="10" 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>'

How the expression works

  1. 1

    Data URI and viewBox

    'data:image/svg+xml;utf8,' &
'<svg ... viewBox="0 0 90 50" ...>'

    Tells Qlik the image is inline SVG and sets a 90×50 drawing grid that scales to the object.

  2. 2

    Rectangular track

    <rect x="8" y="5" width="70" height="40" rx="11" ...>

    rx=11 is much less than half the height (20), so the corners are softly rounded instead of fully round.

  3. 3

    Conditional track colour

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

    Muted plum when ON, light grey when OFF. # is written as %23 to keep the data URI valid.

  4. 4

    Rectangular knob

    <rect ... width="38" height="40" rx="10" fill="%23ffffff" ...>

    A white knob with matching rx=10 corners, drawn after the track so it sits on top.

  5. 5

    Conditional knob position

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

    Exactly the same variable logic as Switch 1: x=36 on the right when ON, x=13 on the left when OFF.

  6. 6

    Optional animation

    <animate attributeName="x" ... dur="0.2s" fill="freeze"/>

    Slides the knob and fades the track whenever Qlik re-renders the image. Remove the <animate> tags for an instant change.

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 is broken or blank+

Check every colour uses %23 instead of #, quotes are balanced, and the measure is shown as an image.

The knob sticks out of the track+

Keep the knob height (40) and y (5) equal to the track's, and keep x between 13 and 36 for this width.

The switch never changes+

The SVG only draws the state. Make sure vSwitch holds 0 or 1 and a separate Qlik button action sets it with =1-$(vSwitch).