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

Switch 4: Outlined circular switch

A minimal, monochrome switch: the track stays white in both states and only the circular knob moves. State is shown by position alone, which works well on light, low-colour dashboards.

Try the outlined 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="4" width="74" height="42" rx="21" fill="%23ffffff" stroke="%2334363a" stroke-width="3"/>' &
  '<circle cx="' & If($(vSwitch)=1,'60','29') & '" cy="25" r="16" fill="%23ffffff" stroke="%235a5c60" stroke-width="2.5">' &
    '<animate attributeName="cx" from="' & If($(vSwitch)=1,'29','60') & '" to="' & If($(vSwitch)=1,'60','29') & '" dur="0.2s" fill="freeze"/>' &
  '</circle>' &
'</svg>'

How the expression works

  1. 1

    Data URI and viewBox

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

    Inline SVG on a 90×50 grid that scales to fit the Qlik object.

  2. 2

    Outlined track

    <rect x="8" y="4" width="74" height="42" rx="21" fill="%23ffffff" stroke="%2334363a" stroke-width="3"/>

    A fully rounded pill (rx = half the height) with a dark 3px outline.

  3. 3

    Track stays white

    fill="%23ffffff"

    The track fill is fixed text, not an If(), so it is white in both states. Only the knob signals ON or OFF.

  4. 4

    Circular knob

    <circle cy="25" r="16" fill="%23ffffff" stroke="%235a5c60" stroke-width="2.5">

    A circle centred vertically (cy=25) with a grey outline, drawn on top of the track.

  5. 5

    Conditional cx position

    cx="' & If($(vSwitch)=1,'60','29') & '"

    Circles are positioned by their centre, cx. 60 puts the knob on the right (ON), 29 on the left (OFF).

  6. 6

    Optional animation

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

    Animates cx so the knob slides between positions when Qlik re-renders the image.

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

It's hard to tell ON from OFF+

That's by design — only position changes. If you need more contrast, make the circle's fill an If() as well, e.g. a coloured knob when ON.

The circle is clipped+

Keep r=16 and cx between 29 and 60 so the circle stays inside the 74-wide track.

The switch never changes+

Confirm vSwitch is 0 or 1 and that a separate Qlik button action toggles it with =1-$(vSwitch).