SVG in Power BI Visuals: How to Build Them (and Maintain Them Without Pain)

Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics and supporting interactivity and animation.

SVG measures are among the cleanest ways to add “micro visuals” (bars, KPIs, icons, sparklines) directly within tables, matrices, and certain card scenarios—without custom visuals. The trick is: you’re not really drawing in Power BI… you’re returning an image URL that contains SVG markup.

This post shows a basic, production-ready setup, along with a maintenance approach so you don’t end up with 20 slightly different SVG measures nobody wants to touch.

---

Check out some of our FREE templates and materials.

Join newsletter

PRACTICE MATERIAL BELOW!👇

---

Visualizing Performance: Enhance Power BI Dashboards with SVG Icons for Dynamic KPI Tracking and Insightful Sparklines.

1. When SVG in Power BI makes sense

Great use cases

• KPI arrows (up/down/flat) in a table or matrix

• “Data bars” with full design control (rounded corners, labels, gradients)

• Sparklines inside a table row (tiny trend chart)

• Status pills (green/amber/red) that match your brand

  
  

Where it can bite you

• Performance: SVG measures are text-heavy. Hundreds of rows × complex SVG can slow visuals.

• Visual support varies: Tables/matrices are the safest bet; other visuals depend on feature support and settings. Microsoft’s guidance for dynamic images focuses on tables, matrices, slicers and multi-row cards.

• Mobile: Power BI mobile apps have limitations for dynamic images.
  

2. The basic pattern (what you’re actually building)

An SVG measure typically returns something like:

• data:image/svg+xml;utf8,<svg ...>...</svg>  (human-readable, but needs careful encoding)or

• data:image/svg+xml;base64,.... (heavier, but avoids many encoding issues)

Then you set the measure’s Data category to Image URL, and Power BI renders it as an image.

3. Demo dataset (download)

Use this small dataset for practice (12 months × category × region, with target vs actual):

Download Power BI demo file: powerbi-svg-demo-data

Columns:

• Date, Month, Year, Category, Region

• Target_KEUR, Actual_KEUR, Delta_KEUR
  

4. Step-by-step: Build a KPI SVG indicator (basic example)

Step 1 — Load the CSV

1. Power BI Desktop → Get data → Text/CSV → select the file

2. Set data types:

   • Date = Date

   • Target_KEUR / Actual_KEUR / Delta_KEUR = Decimal number
     

Step 2 — Create measures

Create these DAX measures:

Actual = SUM ( 'powerbi-svg-demo-data'[Actual_KEUR] )
Target = SUM ( 'powerbi-svg-demo-data'[Target_KEUR] )
Delta = [Actual] - [Target]
Delta % = DIVIDE ( [Delta], [Target] )

Step 3 — Create the SVG measure

This example draws a small rounded “pill” with a colored dot + % text.

KPI SVG =
VAR v = [Delta %]
VAR Color =
    SWITCH (
        TRUE(),
        ISBLANK ( v ), "#B0B0B0",
        v >= 0.05,      "#2E7D32",
        v <= -0.05,     "#C62828",
                        "#F9A825"
    )
VAR Label =
    IF ( ISBLANK ( v ), "n/a", FORMAT ( v, "0.0%" ) )
VAR Svg =
    "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='45' viewBox='0 0 100 45' preserveAspectRatio='xMinYMid meet'>"
        & "<rect x='0' y='0' rx='11' ry='11' width='100' height='45' fill='#F5F5F5'/>"
        & "<circle cx='12' cy='16' r='12' fill='" & Color & "'/>"
        & "<text x='40%' y='40%' dominant-baseline='middle' font-family='Segoe UI' font-size='24' fill='#222'>" & Label & "</text>"
    & "</svg>"
RETURN
    "data:image/svg+xml;utf8," &  Svg 

Step 4 — Tell Power BI it’s an image

1. Click the KPI SVG measure in the Fields pane

2. Measure tools → Data category → Image URL 
   

Step 5 — Put it in a Table/Matrix

1. Add a Table visual

2. Add fields:

   • Category, Region, Month

   • Actual, Target, Delta %, KPI SVG

3. Resize the “KPI SVG” column to fit the pill.

💡 Pro tip: Turn off text wrapping and reduce row padding for a clean “indicator column” look.

5. What to consider (so it doesn’t break later)

Encoding pitfalls (most common “broken image” cause)

If your SVG contains spaces, #, %, quotes, or non-ASCII characters, your utf8 string can break.

Safer options:

• Replace # with %23 in color hex codes

• Avoid double quotes inside SVG (use single quotes consistently)

• If you keep getting broken images, switch to base64 (more reliable, more verbose)

• Experiment and adjust this part because of the width/height:

<svg xmlns='http://www.w3.org/2000/svg' width='100' height='45' viewBox='0 0 100 45' preserveAspectRatio='xMinYMid meet'>"
        & "<rect x='0' y='0' rx='11' ry='11' width='100' height='45' fill='#F5F5F5'/>"
        & "<circle cx='12' cy='16' r='12' fill='" & Color & "'/>"
        & "<text x='40%' y='40%' dominant-baseline='middle' font-family='Segoe UI' font-size='24' fill='#222'>" & Label & "</text>"
    & "</svg>"

(If you’re seeing a “broken image” icon in the table, it’s usually encoding or invalid SVG markup.)

Visual support (and why tables are the default choice)

Tables and matrices are the most stable place for SVG measures. Microsoft’s dynamic-image guidance focuses on these visuals (plus slicers and multi-row cards). Some newer/alternative visuals can be inconsistent across versions (community threads regularly mention regressions).

Performance rules of thumb

• Keep SVG small (width/height tight)

• Avoid complex paths for large row counts

• Prefer one SVG measure reused everywhere (see maintenance pattern below)
  

6. Maintenance strategy: Don’t create “SVG spaghetti”

Here’s a simple way to keep SVGs maintainable.

One reusable “style” measure + one “render” measure

Create a tiny set of helper measures you can reuse:

KPI Color =
VAR v = [Delta %]
RETURN
SWITCH (
    TRUE (),
    ISBLANK ( v ), "#B0B0B0",
    v >= 0.05, "#2E7D32",
    v <= -0.05, "#C62828",
    "#F9A825"
)

Then your SVG measure just “renders”:

KPI SVG (Maintained) =
VAR Color = [KPI Color]
VAR Label = IF ( ISBLANK ( [Delta %] ), "n/a", FORMAT ( [Delta %], "0.0%" ) )
VAR Svg =
"<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24'>
  <rect rx='12' ry='12' width='120' height='24' fill='#F5F5F5'/>
  <circle cx='14' cy='12' r='6' fill='" & Color & "'/>
  <text x='28' y='16' font-family='Segoe UI' font-size='12' fill='#222'>" & Label & "</text>
</svg>"
RETURN
"data:image/svg+xml;utf8," & Svg

✅ Result: when branding changes (colors/fonts), you update one place.

7. Wrap-up

SVG measures are a lightweight way to add custom visuals—especially for KPI indicators within tables/matrices. The key to sanity is standardising: one renderer measure, helper measures for style, and templates if you scale.

This is what comes at the very end. You can do unlimited things here.

SVG custom icon measure in Power BI Matrix visual