Hi Community! 👋I wanted to share something I recently discovered while building screening dashboards in Power BI, and I think many of you may have hit the same wall.🎯 What I Was Trying to DoI wanted to render pill-shaped status badges inside a native Power BI table visual — something like this: | Service | Vessel | Screen Status ||----------|-------------|----------------|| ACL | GULSEUM | ✅ Success | ← green pill badge| ACL | GULSEUM | ⚠️ Warning | ← amber pill badge| LCL | GIVEN | ❌ Failed | ← red pill badgeAfter exploring several options (Deneb, HTML Content visual, conditional formatting), I landed on the SVG calculated column technique — inspired by Bogdan Kostić's work. The idea is brilliant:Create a calculated column that outputs an SVG stringSet the column Data Category = Image URLPower BI renders it as an image inside the table cellHere is a simplified version of the DAX: daxScreeningStatus Badge = VAR Status_ = YourTable[ScreeningStatus] RETURN SWITCH( Status_, "Success", "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#28a745'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Success</text></svg>", "Warning", "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#e6a817'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Warning</text></svg>", "Failed", "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#dc3545'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Failed</text></svg>", BLANK() )The result in the report looked exactly like I wanted — clean pill badges! ✅🚨 The Problem — Export Breaks EverythingThe moment a user clicks Export Data from the table visual, here is what they get in Excel: | Service | Vessel | ScreeningStatus Badge ||---------|-------------|---------------------------------------------------------------------|| ACL | GULSEUM | data&colon;image/svg+xml;utf8,<svg width='100' height='24'... || ACL | GULSEUM | data&colon;image/svg+xml;utf8,<svg width='100' height='24'... |The entire SVG string exports as raw text — completely unreadable for business users! 😅This affects:❌ Export to Excel❌ Export to CSV🔍 Why This HappensThe SVG calculated column stores the entire SVG drawing instruction as a text string in the data model. When Power BI renders the table visual, it reads the Image URL data category and draws the image. But when exporting, Power BI exports the raw underlying value — which is that long SVG text string — not the rendered image.This is actually the correct behavior from Power BI's perspective — it is exporting the data, not the visual. But for our use case it is a frustrating limitation. Has anyone else hit this SVG export issue?Is there a native Power BI way to render pill/badge shapes that also exports cleanly?Is there any way to override what value exports when a column has Image URL data category?

Hi subu_das, This is a core design limitations of Power BI. While in Power BI it renders and generates the SVG image but while you download it's downloaded text hence images are conerted to text instead of images. What you can do it by instead of providing the download option (Disable header Icons) on the main table (Which is using SVG images), you can provide a toggle or a button which can change the visual to a downloadable version (Using Bookmarks). in this downloadable table replce the column (SVG images) with some other column (Status) which has text, and then user can downlaod it from there with correct statuses. 🌟 I hope this solution helps you unlock your Power BI potential! If you found it helpful, click 'Mark as Solution' to guide others toward the answers they need.💡 Love the effort? Drop the kudos! Your appreciation fuels community spirit and innovation.🎖 As a proud SuperUser and Microsoft Partner, we’re here to empower your data journey and the Power BI Community at large.🔗 Curious to explore more? [Discover here].Let’s keep building smarter solutions together!

subu_das

Frequent Visitor

5 months ago

Solved

SVG Calculated Columns in Power BI Table Visual — Export Shows Raw SVG URL Instead of Data Value

Hi Community! 👋

I wanted to share something I recently discovered while building screening dashboards in Power BI, and I think many of you may have hit the same wall.

🎯 What I Was Trying to Do

I wanted to render pill-shaped status badges inside a native Power BI table visual — something like this:

| Service  | Vessel      | Screen Status  ||----------|-------------|----------------|| ACL      |  GULSEUM | ✅ Success      |  ← green pill badge| ACL      | GULSEUM | ⚠️ Warning      |  ← amber pill badge| LCL      | GIVEN  | ❌ Failed       |  ← red pill badge

After exploring several options (Deneb, HTML Content visual, conditional formatting), I landed on the SVG calculated column technique — inspired by Bogdan Kostić's work. The idea is brilliant:

Create a calculated column that outputs an SVG string
Set the column Data Category = Image URL
Power BI renders it as an image inside the table cell

Here is a simplified version of the DAX:

dax

ScreeningStatus Badge =
VAR Status_ = YourTable[ScreeningStatus]
RETURN
SWITCH(
    Status_,
    "Success",
        "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#28a745'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Success</text></svg>",
    "Warning",
        "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#e6a817'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Warning</text></svg>",
    "Failed",
        "data&colon;image/svg+xml;utf8,<svg width='100' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='24' rx='12' fill='#dc3545'/><text x='50%' y='50%' fill='#fff' font-family='Segoe UI' font-size='11' dominant-baseline='middle' text-anchor='middle'>Failed</text></svg>",
    BLANK()
)

The result in the report looked exactly like I wanted — clean pill badges! ✅

🚨 The Problem — Export Breaks Everything

The moment a user clicks Export Data from the table visual, here is what they get in Excel:

| Service | Vessel      | ScreeningStatus Badge                                              ||---------|-------------|---------------------------------------------------------------------|| ACL     | GULSEUM | data&colon;image/svg+xml;utf8,<svg width='100' height='24'...            || ACL     | GULSEUM | data&colon;image/svg+xml;utf8,<svg width='100' height='24'...            |

The entire SVG string exports as raw text — completely unreadable for business users! 😅

This affects:

❌ Export to Excel
❌ Export to CSV

🔍 Why This Happens

The SVG calculated column stores the entire SVG drawing instruction as a text string in the data model. When Power BI renders the table visual, it reads the Image URL data category and draws the image. But when exporting, Power BI exports the raw underlying value — which is that long SVG text string — not the rendered image.

This is actually the correct behavior from Power BI's perspective — it is exporting the data, not the visual. But for our use case it is a frustrating limitation.

Has anyone else hit this SVG export issue?

Is there a native Power BI way to render pill/badge shapes that also exports cleanly?

Is there any way to override what value exports when a column has Image URL data category?

Need Help

Tips and Tricks

grazitti_sapna
5 months ago
Hi subu_das,

This is a core design limitations of Power BI. While in Power BI it renders and generates the SVG image but while you download it's downloaded text hence images are conerted to text instead of images.

What you can do it by instead of providing the download option (Disable header Icons) on the main table (Which is using SVG images), you can provide a toggle or a button which can change the visual to a downloadable version (Using Bookmarks). in this downloadable table replce the column (SVG images) with some other column (Status) which has text, and then user can downlaod it from there with correct statuses.

🌟 I hope this solution helps you unlock your Power BI potential! If you found it helpful, click 'Mark as Solution' to guide others toward the answers they need.
💡 Love the effort? Drop the kudos! Your appreciation fuels community spirit and innovation.
🎖 As a proud SuperUser and Microsoft Partner, we’re here to empower your data journey and the Power BI Community at large.
🔗 Curious to explore more? [Discover here].
Let’s keep building smarter solutions together!
subu_das
5 months ago
Thanks i have submitted an idea to Power BI.

11 Replies

grazitti_sapna
Super User
5 months ago
Hi subu_das,

This is a core design limitations of Power BI. While in Power BI it renders and generates the SVG image but while you download it's downloaded text hence images are conerted to text instead of images.

What you can do it by instead of providing the download option (Disable header Icons) on the main table (Which is using SVG images), you can provide a toggle or a button which can change the visual to a downloadable version (Using Bookmarks). in this downloadable table replce the column (SVG images) with some other column (Status) which has text, and then user can downlaod it from there with correct statuses.

🌟 I hope this solution helps you unlock your Power BI potential! If you found it helpful, click 'Mark as Solution' to guide others toward the answers they need.
💡 Love the effort? Drop the kudos! Your appreciation fuels community spirit and innovation.
🎖 As a proud SuperUser and Microsoft Partner, we’re here to empower your data journey and the Power BI Community at large.
🔗 Curious to explore more? [Discover here].
Let’s keep building smarter solutions together!
subu_das
Frequent Visitor
5 months ago
Thanks i have submitted an idea to Power BI.
subu_das
Frequent Visitor
5 months ago
Hello grazitti_sapna,

Thanks for your response.

If we create a bookmark for export then a user needs to click on the bookmark (Export) and then on ... dots and click export option. Are you suggesting to use this option or is there a way where if click export bookmark the file gets exported to excel?
- grazitti_sapna
  Super User
  5 months ago
  Hi subu_das,
  
  One way is doing that once the user hits the toggle the other table gets unhidden and user can download the table by clicking on ... option.
  
  Another way is that you can create an export button, as soon as the user hits it the file is downloaded either to sharepoint/onedrive or any other shared location using Power automate, also you can automate in such a way that the user recieves the table on their email as .csv/excel attachment.
  
  Refer this video
  - subu_das
    Frequent Visitor
    5 months ago
    Hello grazitti_sapna,
    
    I have worked on Power Automate flow the issue with PA is that when a user click on the export button (PA) a file is created and saved on sharepoint/ one drive and later sent via email. Ok for CSV but issue with excel is every row is considered as an action and for 2000 rows it takes 1 hours to just update the file.
    I was looking for user convenience which is not possible currently and they are used to default export data which they use in other reports.

Forum Discussion

SVG Calculated Columns in Power BI Table Visual — Export Shows Raw SVG URL Instead of Data Value

🎯 What I Was Trying to Do

🚨 The Problem — Export Breaks Everything

🔍 Why This Happens

11 Replies

Related content

TMDL - calculated column

Direct Lake Model - Calculated Column/Tables

IF calculated column

Power Query or Calculated columns

Dynamic Variable in Calculated Columns