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

Switch 6: Concentric detail switch

This switch builds its knob from three circles that share the same centre. Because each circle uses the same conditional cx, they move together and read as a single, detailed knob.

Try the concentric 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="72" height="40" rx="20" 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>' &
  '<circle cx="' & If($(vSwitch)=1,'59','29') & '" cy="25" r="18" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5">' &
    '<animate attributeName="cx" from="' & If($(vSwitch)=1,'29','59') & '" to="' & If($(vSwitch)=1,'59','29') & '" dur="0.2s" fill="freeze"/>' &
  '</circle>' &
  '<circle cx="' & If($(vSwitch)=1,'59','29') & '" cy="25" r="7" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2">' &
    '<animate attributeName="cx" from="' & If($(vSwitch)=1,'29','59') & '" to="' & If($(vSwitch)=1,'59','29') & '" dur="0.2s" fill="freeze"/>' &
  '</circle>' &
  '<circle cx="' & If($(vSwitch)=1,'59','29') & '" cy="25" r="2.5" fill="%23aeb2ba" stroke="%23aeb2ba" stroke-width="2">' &
    '<animate attributeName="cx" from="' & If($(vSwitch)=1,'29','59') & '" to="' & If($(vSwitch)=1,'59','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

    Rounded track

    <rect x="8" y="5" width="72" height="40" rx="20" ...>

    rx=20 is half the height, so both ends are fully round.

  3. 3

    Conditional track colour

    If($(vSwitch)=1,'%234052c5','%23e7eaf2')

    Blue when vSwitch is 1, pale grey when 0. # is written as %23 so the data URI stays valid.

  4. 4

    Outer knob

    <circle ... cy="25" r="18" fill="%23ffffff" stroke="%23c5c7cb">

    The large white circle (r=18) forms the main knob.

  5. 5

    Inner ring

    <circle ... cy="25" r="7" fill="%23ffffff" stroke="%23c5c7cb">

    A smaller outlined circle (r=7) drawn on top adds a ring detail.

  6. 6

    Center mark

    <circle ... cy="25" r="2.5" fill="%23aeb2ba">

    A tiny grey dot marks the centre. It is drawn last, so it sits on top.

  7. 7

    Shared conditional cx

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

    All three circles use the same If(): 59 (right) when ON, 29 (left) when OFF, so they stay concentric.

  8. 8

    Optional animation

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

    Slides the knob from the old position to the new one whenever 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

The circles drift apart+

All three circles must use identical cx values and identical animate from/to values. If one differs, the rings will no longer share a centre.

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 switch never changes+

The SVG only draws the state. Confirm vSwitch is 0 or 1 and that a separate Qlik button action toggles it with =1-$(vSwitch).