L
Lupus AnalyticsDiscuss a project
← Lesson 01
SVG in Qlik · Lesson 02

Build a dynamic ON/OFF pill in Qlik.

SVG can draw text as well as shapes. In this lesson you'll combine a rounded rectangle with a <text> label, so the pill shows “OFF” or “ON” and changes colour based on a Qlik variable.

Live preview

Click the pill

This teaching demo runs the same SVG in your browser — it isn't connected to Qlik. In your app you still create the vSwitch variable and a button action that changes it.

vSwitch = 0
The expression

Copy this into your Qlik image measure

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,'%234052c5','%23eef0f5') & '" stroke="%23d9dce4" stroke-width="2">' &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23eef0f5','%234052c5') & '" to="' & If($(vSwitch)=1,'%234052c5','%23eef0f5') & '" 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','%23777e8b') & '">' &
    If($(vSwitch)=1,'ON','OFF') &
    '<animate attributeName="fill" from="' & If($(vSwitch)=1,'%23777e8b','%23ffffff') & '" to="' & If($(vSwitch)=1,'%23ffffff','%23777e8b') & '" dur="0.2s" fill="freeze"/>' &
  '</text>' &
'</svg>'
Step by step

How the expression works

  1. 01

    Data URI prefix and concatenation

    ='data:image/svg+xml;utf8,' &
'<svg ...>' &
  '<rect ...' &
  If(...) &
  '...'

    The prefix tells Qlik the image is inline SVG text. The & operator joins fixed text pieces (in single quotes) with the If() results, building one SVG string.

  2. 02

    viewBox and responsive size

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

    A 90×50 drawing grid that scales to fill the object while keeping its proportions and staying centred.

  3. 03

    The pill shape

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

    A rectangle with rx=19 — half its height of 38 — so both ends are perfectly round.

  4. 04

    Conditional background colour

    fill="' & If($(vSwitch)=1,'%234052c5','%23eef0f5') & '"

    Blue when ON, pale grey when OFF. Each # in a colour is written as %23, otherwise the data URI breaks.

  5. 05

    The <text> element

    <text x="44" y="32" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="700" fill="...">

    x=44 is the horizontal centre of the pill and text-anchor="middle" centres the word on it. y=32 is the baseline, placed slightly below the middle so the letters look vertically centred. Fill is white on blue, grey on pale.

  6. 06

    Conditional OFF / ON label

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

    The text content itself comes from an If(): the word changes along with the colours.

  7. 07

    Optional colour animation

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

    Fades the background and text from the old colour to the new one. Remove the <animate> tags if you prefer an instant change.

Qlik setup

Wire it up in your app

1. Create the variable

vSwitch must hold 0 (OFF) or 1 (ON). Start it at 0.

Variable
Name:        vSwitch
Definition:  0

2. Add a button action

A separate Button object with Set variable value → vSwitch flips the value. The SVG only displays it.

Button action value
=1-$(vSwitch)
Compare

Lesson 1 vs Lesson 2

Lesson 01 · Toggle ↗

Moves a knob. Two rectangles; the knob's x position slides between OFF and ON.

Lesson 02 · Pill

Changes text and background. One rectangle plus an SVG text label that switches word and colour.

Troubleshooting

If something doesn’t work

+The text is missing

Check the <text> element is inside the <svg> and closed with </text>, and that its fill differs from the background. Also check the quotes around If($(vSwitch)=1,'ON','OFF') are balanced.

+The text looks off-centre

Keep text-anchor="middle" and set x to the pill's centre (x + width / 2 = 8 + 36 = 44). Adjust y by a pixel or two if your font sits higher or lower.

+A colour doesn't show (unencoded #)

Every colour must use %23 instead of #, e.g. %234052c5. A raw # ends the data URI and everything after it is ignored.

+The pill doesn't change when clicked

The SVG only draws the state. Make sure a Button object sets vSwitch with =1-$(vSwitch), and that vSwitch holds exactly 0 or 1. Show =$(vSwitch) in a text box to check.

Next lesson
Lesson 03
Customising SVG shapes and colours
Coming soon