Graphed LogoGraphed
Graphed LogoGraphed
How It WorksAgentsIntegrationsPricing

What is SVG in Power BI?

Cody Schneider••7 min read

Ditching standard charts for custom, data-driven shapes directly inside your Power BI reports might sound complicated, but it's remarkably achievable using SVG images. Scalable Vector Graphics, or SVGs, allow you to create dynamic, conditionally formatted visuals that go far beyond built-in capabilities. This article will walk you through what SVGs are, why they are so powerful in Power BI, and provide step-by-step instructions to build your own from scratch.

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

What is an SVG Image, Anyway?

Unlike standard image formats like JPG or PNG, which are made of pixels, an SVG is a vector-based image defined by XML code. Think of it not as a grid of colored dots, but as a set of instructions. Instead of saying "this pixel is red, this pixel is blue," SVG code says "draw a circle here with a red fill" or "create a rectangle with these dimensions and a blue border."

This code-based approach provides three massive advantages:

  • Scalability: Since it's a set of drawing instructions, you can scale an SVG to any size - from a tiny icon to a giant billboard - and it will never lose quality or become blurry. The instructions are simply re-rendered for the new size.
  • Small File Size: Text-based code is incredibly lightweight compared to pixel data, making SVGs load quickly and keeping your Power BI reports efficient.
  • Manipulability: This is the most important part for us. Because an SVG is just text, we can change parts of that text programmatically. We can alter its color, size, shape, or position using code - or in our case, using a DAX measure.

This last point is what makes SVGs a game-changer inside Power BI. You aren't just embedding a static image, you're writing a DAX formula that generates the image code on the fly based on your data.

Why Bother with SVGs in Power BI?

At first, it might seem like a lot of work for a simple visual. But once you understand the possibilities, you'll see it opens a new level of reporting creativity.

Conditional Formatting on Steroids

Power BI’s built-in conditional formatting is great for changing the color of a bar chart or a value in a table. With SVGs, you can use your data to change literally any property of your visual. You can dynamically alter:

  • Fill Color: Create status indicators that change from green to yellow to red.
  • Size or Length: Build custom progress bars where the width is controlled by a measure.
  • Position: Make a dot move up or down on a chart based on a KPI's value.
  • Shape: Use DAX logic to switch between a circle, a square, or a star shape depending on a category.
  • Opacity: Fade out an icon if its related data is below a certain threshold.

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Completely Custom Shapes and Icons

You are no longer limited to the standard chart types and icons. Need to create a specific shape that visualizes your manufacturing process? Want to display a series of chevrons that fill up to show progress through a sales funnel? With SVGs, if you can imagine it and describe it in code, you can build it and connect it to your data.

Enhanced Information Density

By nesting multiple shapes and even text inside a single SVG, you can create information-rich visuals that occupy a small amount of space in your report. For example, a single SVG in a table cell could show a progress bar, the percentage value as text, and a colored status indicator all at once, generated by a single DAX measure.

Getting Started: Your First SVG in Power BI

The core concept is simple: you write a DAX measure that outputs SVG code as a single line of text. Power BI then renders that text as an image. Here are the three key steps to make it work.

Step 1: The DAX Measure is Your Canvas

Your journey begins with a DAX measure. The entire logic for your visual will live here. You will use DAX variables and string concatenation (&) to build the SVG's XML code. For Power BI to recognize this text string as an image, you must prepend it with a special header:

"data:image/svg+xml,utf8,"

This tells Power BI to interpret the text that follows not as a string, but as an SVG image ready to be rendered.

Step 2: Assign the Measure to a Visual

Your dynamic SVG measure can’t exist on its own - it needs to be placed inside a visual that can display images. The most common choices are the native Table or Matrix visuals. You can also use custom visuals from AppSource like the HTML Content visual for more advanced control.

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

Step 3: Set the Data Category to 'Image URL'

This is the most crucial and most-often-missed step. After creating your DAX measure, you must select it in the Fields pane. This will bring up the "Column tools" tab in the ribbon. From there, you must change the Data category from "Uncategorized" to "Image URL". If you skip this, Power BI will just show your SVG code as plain text.

Practical Example 1: A Dynamic KPI Status Indicator

Let's build a simple but effective visual: a colored circle that acts as a KPI indicator. It will be green for good performance, orange for mediocre, and red for poor.

First, assume you have a base measure that calculates performance, like this:

Sales Performance % = DIVIDE ( SUM ( Sales[Actual Sales] ), SUM ( Sales[Target Sales] ) )

Now, let's create our SVG measure. We will use a VAR to determine the color based on the Sales Performance % and then inject that variable into our SVG code.

TrafficLightIndicator = 
VAR Performance = [Sales Performance %]
VAR CircleColor =
    SWITCH (
        TRUE (),
        Performance < 0.7, "#D94553", // Red
        Performance < 0.9, "#FDB83A", // Orange
        "#5ABF78"  // Green
    )
VAR SvgCode = 
    "data:image/svg+xml,utf8," & 
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>" &
        "<circle cx='50' cy='50' r='45' fill='" & CircleColor & "' />" &
    "</svg>"

RETURN SvgCode

Let’s break that down:

  • VAR CircleColor: A SWITCH statement checks the Performance value and assigns a hex color code to CircleColor.
  • VAR SvgCode: This builds the final text string.

Now, just add this TrafficLightIndicator measure to a table, set its data category to "Image URL," and it will render your shiny, data-driven status dots.

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Practical Example 2: An In-Cell Progress Bar

Let's try a slightly more advanced visual: a fully customizable progress bar that sits inside a table cell.

DynamicProgressBar = 
VAR Percentage = [Sales Performance %] // Using our measure from 0 to 1+
VAR ClampedPercentage = MIN(Percentage, 1) // Ensure it doesn't go over 100%
VAR BarWidth = ClampedPercentage * 100 // Scale width for our 0-100 viewBox
VAR BarColor = IF(Percentage > 0.9, "#5ABF78", "#A9A9A9")
VAR DisplayText = FORMAT(Percentage, "0%") // Format the percentage as text

VAR SvgCode = 
    "data:image/svg+xml,utf8," & 
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'>" &
        "<!-- Background of the bar -->" &
        "<rect x='0' y='0' width='100' height='20' fill='#f0f0f0' rx='5'></rect>" &
        "<!-- Dynamic foreground bar -->" &
        "<rect x='0' y='0' width='" & BarWidth & "' height='20' fill='" & BarColor & "' rx='5'></rect>" &
        "<!-- Percentage text overlay -->" &
        "<text x='50' y='14' font-family='Verdana' font-size='10' fill='white' text-anchor='middle'>" &
            DisplayText &
        "</text>" &
    "</svg>"

RETURN SvgCode

Here’s what’s happening:

  1. Percentage pulls in the KPI value (0 to 1+).
  2. ClampedPercentage ensures the value doesn't exceed 1 (100%).
  3. BarWidth scales the fill of the progress bar.
  4. BarColor changes based on performance.
  5. DisplayText shows the percentage as text.
  6. The SVG contains:

This approach gives you fine control over the look and feel, beyond Power BI's standard data bars.

Tips for SVG Success in Power BI

  • Start Simple: Begin with basic shapes to learn syntax.
  • Use a Vector Editor: Design in tools like Inkscape or Illustrator, then copy the SVG XML code.
  • Variables Are Your Friend: Break down complex code into small, readable steps.
  • Debug with a Card Visual: If your SVG is blank, display the measure as text in a Card to inspect the output for errors.

Final Thoughts

Learning to use SVGs in Power BI moves you from simple reporting to true visualization craft. Combining DAX with SVGs lets you create beautiful, tailored visuals that communicate insights more effectively than standard charts.

While mastering SVGs is powerful, tools like Graphed allow you to automate the process further by linking your data sources and creating dashboards through simple descriptions, turning the heavy lifting into a conversational flow—getting you from data to insight in seconds.

Related Articles