Put Your First SVG in a Qlik Button

vSwitch = 0

This picture is a rounded rectangle with a white circle on top. It isn't an image file — SVG describes shapes using text-based code, so the browser (or Qlik) reads the text and draws the shapes.

The SVG expression only displays the graphic. The click is handled by a separate Qlik Button placed on top of it.

1. Drag a Button object onto the sheet and size it to cover the SVG image exactly.
2. Clear its label text, set the background colour to transparent (opacity 0%), and disable the border.
3. Create vSwitch with a starting value of 0 if it has no initial value. Under Actions and navigation, add Set variable value, choose vSwitch, and use =1-$(vSwitch).
4. Leave edit mode and click the pill: the invisible button runs the action.

Each click alternates vSwitch between 0 and 1. These browser examples demonstrate the SVG, not a connected Qlik app. For more designs, see the SVG Switches lessons.

Copy the SVG code and paste it into the Button's Options setting — that is where the button reads its image expression from. Use the exact expression shown in the next step, and click Apply so the button renders the pill.

Each line is a piece of text in single quotes, joined to the next with &. The first line tells Qlik the text is an SVG image.

='data:image/svg+xml;utf8,' &
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">' &
  '<style>' &
    '@keyframes track { from { fill: ' & If($(vSwitch)=1,'%23dfe2ec','%2316b89f') & '; } to { fill: ' & If($(vSwitch)=1,'%2316b89f','%23dfe2ec') & '; } }' &
    '@keyframes knob { from { cx: ' & If($(vSwitch)=1,'28','92') & 'px; } to { cx: ' & If($(vSwitch)=1,'92','28') & 'px; } }' &
    '.track { animation: track 0.22s ease-out both; }' &
    '.knob { animation: knob 0.22s ease-out both; }' &
    '@media (prefers-reduced-motion: reduce) { .track, .knob { animation: none; } }' &
  '</style>' &
  '<rect class="track" x="2" y="2" width="116" height="36" rx="18" fill="' & If($(vSwitch)=1,'%2316b89f','%23dfe2ec') & '"/>' &
  '<circle class="knob" cx="' & If($(vSwitch)=1,'92','28') & '" cy="20" r="14" fill="%23ffffff"/>' &
  '<desc>' & Num(Now(1)*86400000,'0') & '</desc>' &
'</svg>'

• <svg xmlns="…" viewBox="0 0 120 40">Opens the drawing. viewBox sets an imaginary canvas 120 units wide and 40 tall. Every shape is placed on this grid, and the whole picture scales to fit the Qlik object.
• x="2" y="2"Rectangle position: 2 units in from the left and 2 down from the top, leaving a small margin.
• width="116" height="36"Rectangle size. 2 + 116 + 2 = 120, so it fills the canvas width with the margin on both sides.
• rx="18"Corner radius. Half the height (36 ÷ 2) makes the ends fully round — a pill shape.
• fill="#16b89f"Fill colour of the rectangle — a teal green.
• cx="…" cy="20"Circle centre: 28 units across when OFF, 92 when ON, and 20 down so it stays vertically centred.
• r="14"Circle radius. 14 units makes a 28-unit-wide circle that fits inside the 36-unit-tall pill.
• fill="#ffffff"Fill colour of the circle — white.
• If($(vSwitch)=1,…,…)Chooses the ON or OFF position and track colour. %23 is the URL-safe form of # in the image expression.
• @keyframes track / knobChanges the track colour and slides the circle from the previous state to the new state in 0.22 seconds.
• prefers-reduced-motion: reduceShows the new state immediately instead of animating when reduced motion is enabled.
• <desc>…Now(1)…</desc>Adds an invisible refresh value so returning to a previous state loads a fresh SVG and replays the transition.

Shapes are drawn in order, so the circle (written second) appears on top of the rectangle.

1. Open your sheet and click Edit sheet.
2. Drag an image-capable object onto the sheet — for example a Text & image object.
3. Add an image, choose the option to set it from an expression / URL, and click the fx button.
4. Paste the expression from step 4 and click Apply. The pill appears in the object.
5. If the image sits on top of another object, open Appearance → Presentation / Styling and set the background to transparent (or opacity 0%), and turn off the border, so only the shape shows.

Menu names can differ slightly between Qlik versions.