SVG (Scalable Vector Graphics) is a great way to add a bit of flavor and pizzazz to your boring Power BI reports. I have been using them for a while and really love how easy and fun they are to work with. So today, let me share the technique and provide sample measure code that you can readily use to make your first SVG DAX graphic in Power BI.
What we are going to build – Demo of SVG DAX
We are going to create this rectangle bar chart with SVG. It is a simple graph that shows a KPI (ex: Attendance Percentage).
What you need?
- Any recent version of Power BI Desktop
- A measure or set of measures that you want to visualize with SVG
Creating your first SVG DAX Measure – Step-by-step Instructions
Step 1: Make a measure to visualize
If not already done, create a measure to visualize with SVG. In our example, we want to see attendance percentage as a rectangle. So I have the measure [attendance percentage] in my model.
Attendance Percentage = DIVIDE([Total Attendance], [Total Days]) //Example KPI measureStep 2: Create the SVG Measure
Create a new measure for our SVG. Use below code as starting point and customize it as per your model.
SVG Rectangle =
var att_pct = [Attendance Percentage] // your KPI goes here
var rect_width = 300 * att_pct // scaling the KPI to our SVG rectangle width. 100% = 300pixels
var att_pct_disp = FORMAT(att_pct, "0%") // formatting KPI to display inside the rectangle
return
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'>
<rect x='5.522' y='4.682' width='"&rect_width &"' height='50' style='fill:#DE913A; stroke: rgb(0, 0, 0);' rx='5.277' ry='5.277'/>
<text style='fill: #111111; font-family: "Arial", sans-serif; font-size: 28px; font-weight: 700; white-space: pre;' x='14.165' y='40.696'>"&att_pct_disp&"</text>
</svg>"Step 3: Set Measure Category to Image URL
Now that we have the [SVG Rectangle] measure in our model,
- Select the
[SVG Rectangle]measure - Go to Measure Tools > Data Category
- Set it to Image URL
Boom! Now your table or matrix will show SVG bars
Step 4: Use the SVG Measure inside a visual
Set up a table / matrix visual. Add your SVG rectangle measure to the visual and we can instantly see the rectangles drawn. See this quick demo.
Which Visuals can I use to see SVG Images?
Currently (as of May 2025), the below Power BI visuals are supported for SVG based DAX measures.
- Table
- Matrix
- New Card Visual (sometimes buggy)
- New Button Slicer Visual
SVG DAX Measures – Video Tutorial
I made a detailed explanation of SVG measures with few different examples and code explanation. You can watch it below or on my YouTube channel.
Sample File – SVG DAX Measures
Click here to download Sample Power BI Workbook with the SVG DAX measure examples. Customize the measures or create new to learn how to apply this technique. Checkout the SVG Project on my Github for all the other files and additional resources.
When and Why Use SVG?
SVGs let you:
- Build pixel-perfect visuals in Power BI
- Avoid external custom visuals
- Add creative KPIs (think calendar heatmaps, progress bars, mini-charts, and more)
- Control layout and formatting via code
Watch Out For…
- Performance: SVGs add some overhead, especially with large datasets.
- Measure length: Power BI has limits (~32k characters per measure).
- Visual support: Works best in tables and matrix visuals; new card visuals are hit-or-miss.
- Tooltips: Without customization, Power BI may show raw SVG code as tooltip.
Pro Tips
- Use a tool like Boxy SVG Editor to design and export SVGs
- When copying SVG code from elsewhere, Replace all
"with'to simplify embedding in DAX - Explore SVG templates from Kerry Kolosko to fast-track your visuals
What’s Next?
This is part 1 of my SVG + DAX journey. In the next post, we’ll break down a full SVG-powered attendance dashboard—calendar heatmap, employee cards, and all. We are going to build this in the next part:
Until then, experiment and impress your colleagues with a whole new level of custom Power BI visuals.
11 Responses
Ciao Hui,
Collecting Excel tricks under the title “Notable Excel Websites (Non-MVP) Edition” is a brilliant idea…
Thank you in the name of all The FrankensTeam.
On our site there is a box with a picture and text highlighting:
This is a no-MVP site
we think ourselves “bad boys” a bit 🙂
For those who would like to know why our site is a no-MVP site, enough to click on the link:
http://goo.gl/lxDszY
Thank you again!
Thanks a lot
I really enjoyed this (newsletter). I must admit that I rarely read an Excel newsletter (and I subscribe to quite a few) all the way though, but this grabbed my attention and before I realized it, I was engrossed in it. I must also admit that most of this I don’t understand, yet. But, it excites me when I do learn something new in Excel. I can’t wait to see how much of this I can implement into my (constantly-evolving) ‘House Budget’ & ‘Family Medical’ worksheets that I have developed over the past few years! I sure hope to see more of these type of newsletters in the future! Thanks!
Thanks for doing this Hui! I appreciate being included.
I like Tom’s tip a lot. I posted about a tool I wrote to automate this at http://yoursumbuddy.com/tables-edit-query-dialog/
EXCELLENT !
Hui, This post is Superb! More over I have always been a fan of Roberto’s work and have learnt a lot from him.
Here are some of my recent contributions
1. Customising markers in a chart – http://www.goodly.co.in/customize-markers-in-a-chart/
2. Charting Hacks to work faster – http://www.goodly.co.in/5-charting-hacks-to-help-you-work-faster/
3. 7 Date formulas to make life easy – http://www.goodly.co.in/date-formulas-in-excel/
4. Customised scrollbar using VBA – http://www.goodly.co.in/customized-scroll-bar-in-excel/
5. Adding Direct Legends – http://www.goodly.co.in/customized-scroll-bar-in-excel/
Hope everyone enjoys!
I like the Excel Ninja Menus.
1. Select a cell or range then move till the 4-way cross appears. Right-Click and drag the selection to another place in the worksheet then, like a ninja, a menu full of skills and throwing stars pops up allowing me to do all kinds of awesomeness.
2. When you click the fill box on a Date and right click and drag it down, a lot of amazing Date options pop up.
I also brand my Excel to remind myself that I’m awesome. In my personal macro workbook I place the following code.
Private Sub Workbook_Open()
Application.Caption = “SuperKrishna’s Awesomeness”
End Sub
My favorite tip goes along with #17. If you try to copy subtotaled data (and in earlier Excel versions filtered data),when you paste it all the data displays instead of just the summarized data.
To get around this, select your summarized data, click on Find and Select tab and then select Go to Special. Click Visible cells Only and click OK. Now paste and you will see that only the summarized data has been copied.
You can also go CTRL+G and then click the Special icon at the bottom of the dialog box.
What a great idea, Chandoo! I’d love to be included in your next edition:) Perhaps a VBA exclusive version?
@Ryan
I will review this concept about 6 months out from the original post and be sure to keep your site in mind
Hui…
That sounds great, Hui:) I just realized I gave credit to Chandoo for the idea and I should have attributed it to you.
Sorry about that!