Graphed LogoGraphed
Login

How to Use SVG in Power BI

Cody Schneider•

Power BI’s standard visuals are great, but sometimes you need to create custom, data-driven visuals that go beyond the default options. Using Scalable Vector Graphics (SVGs) inside your reports is a powerful way to add that custom flair, from dynamic icons to in-cell charts. This guide will walk you through exactly how to harness the power of SVGs in your Power BI reports, step-by-step.

What Are SVGs and Why Use Them in Power BI?

Unlike standard image files like PNGs or JPEGs which are made of pixels, an SVG is an image defined by code. It’s an XML-based markup language that describes two-dimensional vector graphics. Because it's code, you can dynamically change parts of it - like colors, sizes, or shapes - using data inside Power BI.

Here’s why this is a game-changer for your reports:

  • Fully Dynamic Visuals: Change the color of an icon based on a KPI's status (e.g., green for "on track," red for "at risk"). You can't do that with a static PNG icon.

  • Custom Shapes and Icons: You have complete freedom to use any shape or icon that can be represented as an SVG. No more compromises with the standard icon sets.

  • Infinite Scalability: Vector graphics scale to any size without losing clarity or becoming pixelated. Your custom visuals will look crisp and professional on any screen.

  • In-Cell Data Visualization: Create visuals like progress bars or status dots directly within a table or matrix, providing quick, scannable insights right next to your numbers.

The Basic Workflow: Getting Started with SVGs in Power BI

Using an SVG in Power BI involves combining your SVG code with a DAX measure. The measure constructs the final SVG code as a text string, which Power BI then renders as an image. Don't worry if you're not a coder, the process is more straightforward than it sounds.

Let's break down the core steps.

Step 1: Get Your SVG Code

First, you need the code for the SVG image you want to use. You can get this from several places:

  • Export from a Design Tool: Tools like Adobe Illustrator, Figma, or Inkscape let you export graphics as SVG code.

  • Online Icon Libraries: Many free icon libraries (like Bootstrap Icons or Material Design Icons) allow you to download the SVG code directly.

  • Write it Yourself: For simple shapes like circles or rectangles, you can easily write the code yourself.

For this example, let's use a simple circle SVG. The code looks like this:

Step 2: Prepare Your Data Table

You’ll need a table in Power BI with the data you want to use to control the SVG. For now, imagine we have a simple table named Metrics with a StatusColor column containing hex codes like "#2ECC71" for green or "#E74C3C" for red.

Step 3: Create the DAX Measure

This is where the magic happens. We’ll create a DAX measure that inserts our data into the SVG code. The goal is to create a text string that starts with data:image/svg+xml,utf8, followed by our SVG code. Power BI recognizes this prefix and renders the text as an image.

In this measure, we'll replace the hardcoded fill="blue" with a dynamic value from our StatusColor column.

Step 4: Set the Data Category

This is a small but crucial step. After creating your measure, select it in the Fields pane. Go to the "Measure tools" tab in the ribbon, find the "Data Category" dropdown, and set it to Image URL. This tells Power BI to treat the text output from our DAX measure as an image.

Step 5: Add the Measure to a Visual

Now you can use your measure. Drag the Dynamic Circle Icon measure into a Table, Matrix, or Gallery visual. Power BI will render the SVG code, and you'll see a circle colored according to the data in your StatusColor column!

Practical Example 1: Dynamic KPI Status Indicators

Let's apply this to a real-world scenario. Imagine you have a table of projects with their completion percentages. You want an icon that is green if ≥ 80% complete, yellow if ≥ 50%, and red if less than 50%.

Assume you have a Projects table with a [PercentComplete] column.

Your DAX measure would look like this:

Remember to set the Data Category to "Image URL." Now, when you add this measure to a table alongside the project name and completion percentage, you get an instant, easy-to-read status indicator for each project.

Practical Example 2: Creating an In-Cell Bar Chart

Ready for something more advanced? Let's create a simple horizontal bar chart inside a table cell to visualize sales performance. We'll use two SVG rectangles: one for the background and one for the data bar, whose width is calculated from the sales value.

Assume you have a Salespersons table with a [TotalSales] column.

Here's the DAX measure to create the in-cell bar:

When you set this measure's category to "Image URL" and add it to a table, you get a clean, scalable bar chart right in your table, making it incredibly easy to compare performance across different reps at a glance.

Tips and Common Pitfalls

As you start playing with SVGs, keep these points in mind to avoid common frustrations:

  • Keep Code Simple: Power BI has a character limit for DAX strings (around 32,000 characters). Overly complex SVGs can easily exceed this limit. Minimize your SVG code and remove any unnecessary tags or formatting.

  • Use a Text Editor: Before moving to DAX, build and test your complete SVG code (with placeholder data) in a text editor like VS Code. Many editors have SVG preview extensions that save a lot of time.

  • Double-Check Your Quotes: A frequent source of errors is mismatched quotes. DAX uses double quotes for strings, so it's a best practice to use single quotes for all attributes inside your SVG code.

  • Data Category is Non-Negotiable: If your SVGs aren't rendering, the first thing to check is whether the measure's Data Category is set to "Image URL."

  • URL Encoding the Fill Color: Some hex color codes contain a hash symbol (#), which can cause rendering issues in some browsers. It's safe practice to URL encode these values. You can wrap your color variable in DAX's ENCODEURL() function to automatically handle this.

Final Thoughts

Mastering the use of SVGs in Power BI moves your reports from standard to standout. You've now seen how to create dynamic icons and data-driven in-cell charts, giving you the tools to build far more intuitive and visually appealing dashboards for your audience.

While mastering techniques like custom SVGs gives you incredible control, we know you sometimes need to get answers fast without writing DAX or wrangling code. At Graphed, we built our tool for exactly that moment. We let you connect your marketing and sales data sources and create live dashboards using simple, natural language. This way, you can focus less on the technical setup and more on the story your data is telling.