How to Build SVG Badges in Power BI

What an SVG Badge Does

An SVG badge is a small image generated from a DAX measure or calculated column. Instead of returning plain text, the measure returns SVG markup wrapped in a data URI, which Power BI can render as an image when the field is configured correctly.

This makes SVG ideal for status indicators such as To Do, In Progress, Blocked, or Done, and also for priority tags such as Low, Medium, High, and Critical.

Why SVG Is So Useful

SVG works especially well in Power BI because it is lightweight, scalable, and easy to control with DAX logic. You can change color, icon, size, text, and shape based on the value of a field.

Compared with static icons or bitmap images, SVG gives you dynamic behavior without losing clarity. That is why it is commonly used for badges, trend arrows, circular progress rings, and custom indicators inside tabular visuals.

Basic SVG Badge Pattern

The usual pattern is to build the badge as a DAX measure that returns a string beginning with `data:image/svg+xml;utf8,`. After that, you add regular SVG tags such as `<svg>`, `<rect>`, and `<text>` to create the shape and label.

In Power BI, this measure is typically used in a table or matrix visual, with the data category set to Image URL so the SVG renders as an image instead of raw text.

Example: Status badge

Status Badge SVG = 
VAR StatusValue = SELECTEDVALUE(Tasks[Status], "Unknown")
VAR BgColor =
    SWITCH(
        StatusValue,
        "To Do", "#1F2937",
        "In Progress", "#3A2E00",
        "In Review", "#1E293B",
        "Blocked", "#3F1D1D",
        "Done", "#0F2A1D",
        "#1F2937"
    )
VAR TextColor =
    SWITCH(
        StatusValue,
        "To Do", "#60A5FA",
        "In Progress", "#FACC15",
        "In Review", "#38BDF8",
        "Blocked", "#F87171",
        "Done", "#4ADE80",
        "#D1D5DB"
    )
VAR Icon =
    SWITCH(
        StatusValue,
        "To Do", "◌",
        "In Progress", "◔",
        "In Review", "◑",
        "Blocked", "⚠",
        "Done", "✓",
        "•"
    )
VAR BadgeWidth = 120
RETURN
"data:image/svg+xml;utf8," &
"<svg xmlns='http://www.w3.org/2000/svg' width='" & BadgeWidth & "' height='24' viewBox='0 0 " & BadgeWidth & " 24'>" &
"<rect x='0' y='0' width='" & BadgeWidth & "' height='24' rx='12' fill='" & BgColor & "'/>" &
"<text x='" & BadgeWidth/2 & "' y='12' text-anchor='middle' dominant-baseline='middle' font-family='Segoe UI' font-size='10' font-weight='700' fill='" & TextColor & "'>" &
Icon & " " & StatusValue &
"</text></svg>"
    

How It Works

The DAX logic chooses the badge color, text color, and icon based on the current field value. The SVG then uses those values to draw a rounded rectangle and place text in the center.

Because the badge is created from data, it updates automatically as the report context changes. That makes it ideal for interactive reports where the same visual needs to reflect different rows, filters, and slicers.

Where to Put the Code

Create the SVG logic as a measure in Power BI Desktop. Then place that measure inside a table or matrix visual and set the field category to Image URL so Power BI understands that the output is an image string.

If the badge is based on a single row value, `SELECTEDVALUE()` is usually the right function. If the context can contain multiple rows, you should provide a fallback value to avoid blanks.

Step-by-step setup

1. Open Power BI Desktop.
2. Load your data table, such as Tasks or Projects.
3. Go to Modeling > New Measure.
4. Paste the SVG DAX measure.
5. Set the field’s Data Category to Image URL.
6. Place the measure into a Table or Matrix visual.
7. Test the badge with different filters and values.

Design Tips for Better Badges

Keep the badge width wide enough for the longest label, but not so wide that it wastes space in a table row. A fixed width works well for consistency, especially when the text values are short and predictable.

Use contrast carefully. The background should be dark or muted, while the text and icon should be bright enough to remain readable at small sizes. This is especially important for report users who will scan many rows quickly.

Unicode icons like ✓, ⚠, and ◔ are a simple starting point, but if you need full consistency across platforms, you can move to custom SVG paths later.

Best Use Cases

SVG badges are a great fit for status tracking, priorities, workflow stages, SLA indicators, health signals, and milestone labels. They are especially useful when you want the report to feel more polished without adding a heavy custom visual.

For executive dashboards, they create a compact and readable way to show meaning at a glance. For operational reports, they improve scanning speed and make important states easier to notice.

Common Mistakes

One common mistake is forgetting the `data:image/svg+xml;utf8,` prefix, which prevents Power BI from treating the output as an image. Another is returning SVG without setting the correct data category, which also stops rendering.

A third mistake is using text that is too long for the badge width, causing clipping or poor alignment. Always test your longest values before publishing the report.

SVG badges are the fastest way to make Power BI tables feel designed instead of default.