SVG in Qlik · Learning portal

Make your Qlik data visual

Learn how Scalable Vector Graphics (SVG) work, then see how Qlik expressions can use them to create clear, responsive visuals.

Explore the examples Start with SVG Basics

What is SVG?

Text-based

An SVG is a short piece of text that describes a picture — so anything that produces text, like a Qlik expression, can create one.

Built from shapes

Drawings are made of elements such as rectangles, circles, paths, lines and text.

Scales cleanly

Because shapes are vectors, not pixels, the picture stays crisp at any size.

Styled by attributes

Attributes set position, size, fill, stroke and typography — e.g. x, width, fill, stroke, font-size.

Can animate

SVG can include animation, as long as the browser or app displaying it supports it.

How SVG works with Qlik

A Qlik expression can assemble SVG markup into a data:image/svg+xml;utf8, data URI that an image-capable Qlik object can display. The expression can insert values from variables or measures, so the visual updates when its inputs change.

1
Canvas
Create the SVG markup and its viewBox.
2
Shapes
Add shapes, text and styling.
3
Logic
Use Qlik expression logic to insert values or choose visual states.
4
Output
Return the completed SVG as a data URI for the Qlik object.

Illustrative progress bar — Qlik expression

='data:image/svg+xml;utf8,' &
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40">' &
  '<rect x="0" y="0" width="200" height="40" rx="20" fill="%23DFDEE9"/>' &
  '<rect x="0" y="0" width="' & Round(200 * Sum(Actual) / Sum(Target)) & '" height="40" rx="20" fill="' & If(Sum(Actual) >= Sum(Target), '%23705578', '%23EDBCB5') & '"/>' &
'</svg>'

Illustrative only — replace Actual and Target with your own fields. SVG animation support depends on the Qlik rendering context.

Explore the examples

Previews only — not connected to a live Qlik app

Weekly Progress

Rounded <rect> bars, a dashed <path> for guide lines, <circle> markers, <text> day labels and a highlighted value badge. Swap the sample numbers for Qlik measures.

Time Tracker

A progress ring made with stroke-dasharray and stroke-dashoffset, centred <text> for the time, and <path> play, pause and clock icons.

Length of Stay: 4.9 days, September 2026. Scale 4.7 to 5.6. Meets goal.

Meets goal · Goal < 5 days

Illustrative healthcare data · Apr–Sep 2026 · no patient data or live Qlik connection.

Dynamic KPI Gauge

A latest-month healthcare KPI with a selected-data scale and goal-based teal or coral arc.

Explore the gauge expression →

vSwitch = 0

State Switch

Qlik If() logic reads vSwitch to choose the track colour and knob position. Click the preview to toggle between 0 and 1.

Topics

1 lesson

SVG Icons and Buttons

Crisp icons, badges and button graphics for dashboards.

Coming soon

SVG Animation

Small transitions with SVG <animate>.