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

Switch 3: ON/OFF text pill

This third switch design differs from the first switch because there is no sliding knob. Instead, the pill's background colour and centred OFF/ON text respond directly to the Qlik variable vSwitch.

Demo ON/OFF text pillDemo
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="6" width="72" height="38" rx="19" 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>' &
  '<text x="44" y="32" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="700" fill="' & If($(vSwitch)=1,'%23ffffff','%23536074') & '">' &
    If($(vSwitch)=1,'ON','OFF') &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23536074','%23ffffff') & '" to="' & If($(vSwitch)=1,'%23ffffff','%23536074') & '" dur="0.2s" fill="freeze"/>' &
  '</text>' &
'</svg>'

How the expression works

  1. 1

    Data URI prefix

    ='data:image/svg+xml;utf8,

    Starts the expression as an inline SVG image. Qlik receives one text value and displays it as the visual pill.

  2. 2

    SVG canvas and viewBox

    viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"

    Defines a 90×50 drawing area that scales cleanly inside the object without stretching the pill.

  3. 3

    Rounded rectangle

    <rect x="8" y="6" width="72" height="38" rx="19" ...>

    Draws the compact pill body. The radius is half the height, so both ends are fully rounded.

  4. 4

    Conditional background colour

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

    Uses muted plum when vSwitch is 1 and pale grey when it is 0. The colour hash is encoded as %23 so the data URI stays valid.

  5. 5

    Centered text

    <text x="44" y="32" text-anchor="middle" font-family="Arial,sans-serif" ...>

    Places the label in the centre of the pill. text-anchor="middle" centres the text horizontally, while y sets the text baseline.

  6. 6

    Conditional OFF / ON label

    If($(vSwitch)=1,'ON','OFF')

    The label changes with the same variable: ON for 1, OFF for 0.

  7. 7

    Optional colour animation

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

    Fades the background and text colours whenever Qlik re-renders the SVG. Remove these animate tags if you want 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 text is not aligned+

Keep text-anchor="middle" and x=44 for this pill size. Adjust y by one or two pixels if your Qlik font rendering places the baseline too high or low.

A colour is missing or the image is broken+

Check that every colour starts with %23, not #. A raw # can break the data URI because it is treated as a URL fragment marker.

The preview does not change+

The browser preview only demonstrates the visual state. In Qlik, make sure vSwitch is set to 0 or 1, and configure a separate Qlik button action to change its value.