Power BI SVG Measures: 7 Use Cases, 17 Rules, and an AI Prompt

Before we go any further, let me save you hours of frustration.

If you write a Power BI SVG DAX measure that returns a perfectly formatted SVG string, and all you see in Power BI is the literal text, you forgot to set the Data Category.

Without this single step, Power BI will treat your carefully crafted DAX as plain text and display the raw SVG code instead of rendering the image. It is the most common reason beginners think their SVG measure is “broken”.

Action:

1. In the Power BI model view, select your measure.
2. In the “Properties” or “Formatting” pane, find Data category.
3. Set it to “Image URL”.

1. Where Can You Use Power BI SVG DAX Images? (The 7 Places)

I have mapped out all 7 entry points where you can leverage SVG images inside Power BI.

1. Table Visual: Mini bar charts, KPI traffic lights, and trend arrows right inside your rows.
2. Matrix Visual: Hierarchical icons and charts that auto‑scale across collapsible rows and columns.
3. Button Slicer & List Slicer: Design gorgeous web‑like segmented tabs and toggle buttons.
4. New Card Visual: Inject custom, resolution‑independent KPI graphics and accents.
5. Azure Map Visual Markers: Render custom high‑definition geo‑pins and locator symbols. Sizing works differently here. See the note in the checklist below before assuming the standard 100% rule applies.
6. Image Visual: Render clean standalone vector art that never pixelates on zoom.
7. SVG Icon Theme.json Injection: The hidden gem. Global icon libraries managed directly in your Theme file for enterprise‑wide branding.

Each of these contexts has slightly different requirements (e.g., sizing, interactivity), but the foundational DAX principles remain the same.

2. The 17‑Point Power BI SVG Measures Checklist

After breaking and fixing hundreds of Power BI SVG measures, I have distilled the rules into three priority tiers.

Critical (red) breaks the measure. Important (yellow) causes glitches. Best Practice (blue) ensures maintainability.

VAR _AxisMax =
    CALCULATE(
        MAXX( ALLSELECTED( 'Table'[Category] ), [Your Measure] ),
        REMOVEFILTERS( 'Table'[Category] )
    )
VAR _AxisMin =
    CALCULATE(
        MINX( ALLSELECTED( 'Table'[Category] ), [Your Measure] ),
        REMOVEFILTERS( 'Table'[Category] )
    )

Skip the manual grind? Jump straight to Section 3. The AI prompt template applies all 17 rules automatically, so you can focus on the design, not the debugging.

3. The Power BI SVG Measures AI Prompt Template

One of the biggest challenges when starting with Power BI SVG measures is getting the DAX syntax right, especially the percent‑encoding and the data URI prefix.

I have been using this prompt template with ChatGPT, Claude, and other LLMs to generate production‑ready SVG measures. It bakes in every single one of the 17 rules above, plus a conditional check for axis normalization when the visual actually needs it.

How to use it:

1. Copy the entire block below.
2. Paste it into your favourite AI chat.
3. Append a clear description of your visual (e.g., “A green checkmark for values > 100, red cross for values < 100, size 50x50, for a Table visual”).
4. Run the output through the “Final Pre‑Flight Scan” from Section 2.

You are an experienced Power BI developer writing a DAX measure that renders as an inline SVG image.

Follow these rules strictly, regardless of what visual I ask you to build.

RULE 0 — MANDATORY PREFIX & POWER BI SETUP
- The DAX RETURN must start with: "data:image/svg+xml;charset=utf-8,". The trailing comma is critical.
- The measure MUST have its Data Category set to "Image URL" in the Power BI model.

RULE 1 — ENCODING
- Every '#' becomes '%23'. Every '%' becomes '%25' (including width="100%25" and "72%25").
- Scan the final string for every '%' and confirm it is followed by two hex digits.
- Alternative: CSS named colors (red, blue, orange, black, steelblue, etc.) need no encoding at all, since there's no '#' to escape. Fine for simple cases; use hex when a specific brand/theme color is required.

RULE 2 — DAX STRING CONSTRUCTION
- Use SINGLE QUOTES for every SVG attribute value (e.g., fill='%23000').
- Splice variables with: attr='" & VarName & "' (Close string, ampersand, variable, ampersand, reopen string).

RULE 3 — SIZING & VIEWBOX
- width="100%25" height="100%25" (unless fixed size explicitly requested).
- Always include viewBox. Add display="block".
- Given W x H, use: viewBox="-2 -2 W+2 H+2" overflow="visible" (together; the padding alone only covers the top/left edge).
- preserveAspectRatio="none" ONLY for bars/lines, never for icons/circles/text.

RULE 4 — LOGIC & COMPOSITION
- Order: Configuration → Calculations → Colors → Geometry → RETURN.
- Annotate color VARs with comments (e.g., "%23686868" -- Charcoal).
- Wrap RETURN in IF(HASONEVALUE(<column>), <svg>, BLANK()).
- For sorting, add <desc>FORMAT([Value], "000000000000")</desc> right after <svg>.
- Don't declare unused namespaces (e.g. xmlns:xlink with no xlink:href anywhere). Dead weight on every row.

RULE 5 — PERFORMANCE & COMPATIBILITY
- No XML prolog. No unused namespaces. Minify markup.
- Avoid filters, raster images, external refs, and foreignObject tricks (unless tested).
- Phantom Tooltip Fix: If a tooltip appears even after disabling it, adjust the 'Image size' in the Format pane to force a re-render.

RULE 6 — AXIS NORMALIZATION (conditional - only if the visual needs it)
- If the visual plots a value as a position or width along a shared scale (bar chart, gauge, linear progress track, sparkline), calculate the axis min/max ONCE across the full comparison scope before computing any position - e.g. CALCULATE(MAXX(ALLSELECTED(<category column>), <measure>), REMOVEFILTERS(<category column>)), and the equivalent MINX for the minimum. Use that shared range to convert each row's value into a position, not each row's own value in isolation.
- If the visual has a fixed, self-contained range that doesn't depend on other rows (a 0-5 star rating, a single-value badge, a fixed 0-100% ring), this does not apply - skip it.

DESIGN PHILOSOPHY
Prefer the easiest-to-maintain, least-likely-to-break implementation, not the shortest or cleverest.

Now build the following visual:

[DESCRIBE YOUR VISUAL HERE — chart type, measures/columns, colors, logic, target size/column]

4. Community Resources & Templates

If you want to skip the manual creation and learn from the best, here is a curated list of free SVG resources, template galleries, and tools from the Power BI community.

A curated list of community‑driven repositories, template galleries, and AI tools to accelerate your Power BI SVG workflow.

1. Dashboard-Design (Sajjad Ahmadi) – Power BI dashboards, design files & visualization resources.
2. DAXLIB (SQLBI) – UDF library with community‑built SVG functions.
3. PowerLib (Iwa Sanjaya) – IBCS‑style SVG chart templates.
4. Kerry Kolosko SVG Templates – Curated gallery of SVG chart templates.
5. Avatorl Github Page (Andrzej Leszkiewicz) – IBCS and Deneb SVG templates.
6. PBI Core Visuals SVG HTML (David Bacci) – Advanced core‑visual examples using DAX, SVG & HTML.
7. Powerbi Macguyver Toolbox (Kurth Buhler,…) – C# scripts to generate SVG visuals in Tabular Editor.
8. Power BI SVG Visual Generator Skill (Kurth Buhler,…) – AI agent skill for generating SVG visuals via DAX.