SVG based Power BI Semantic Model Columns and Measures are great but there is a Problem!

[tharunkumarRTK]

SVG specifications in semantic model measures and columns can help you bypass a few limitations of Power BI's default visualizations, enabling the creation of insightful and customised visualizations. Here are some examples of how SVGs can be incredibly useful:

Example 1:

Suppose you want to use a font and animation that Power BI does not natively support. By creating SVG specifications, you can apply unique fonts and other design elements that elevate your visualizations and make them more engaging.

For instance,

Example 2:

You’re presenting enrolled date, completed dates, current date and  expiry date of a learning course in a table or matrix, adding an SVG-based timeline bar can convey the information more effectively. Instead of showing plain dates, a visual timeline helps users immediately grasp the duration and sequence of events without needing additional explanations.

Each icon represents an event

While SVG specifications open up exciting possibilities—enabling unique customization and enhanced insights—they also introduce challenges that could hinder the user experience. Let’s explore two significant problems and their respective solutions:

Problem 1: Tooltip Displays SVG Code in Matrix Visuals

When you use SVG-based columns or measures in a matrix visual, hovering over them often displays the SVG code in the tooltip. This can be confusing and unintuitive for end users, as they might not understand the raw SVG specifications being displayed.

Solution

1. Use Custom Tooltips: Create a report page to serve as a tooltip, which will replace the default tooltip with a more informative and user-friendly alternative. Custom tooltips can show relevant insights instead of the SVG code.

2. Disable the tooltip : If custom tooltips are causing performance issues, consider disabling the tooltip. This will eliminate tooltips entirely, ensuring the SVG code is not displayed to end users. While this removes additional information that tooltips might provide, it keeps the visualization clean and intuitive.

‘Format your Visual’ -> General -> Tooltip

You can also solve this problem by making the background colour of the tooltip 100% transparent.

Problem 2: SVG Code Appears in Exported Data

When exporting a matrix or table visual that includes SVG-based measures or columns, the exported data contains the raw SVG code. This is not user-friendly and can be especially problematic for stakeholders who are unfamiliar with SVG specifications.

Unfortunately there is no proper solution for this problem, you have to train the report users to ignore the SVG code. There might be few scenarios where this would become even more problematic. For example: When you add a column created with SVG specifications into a table visual

And when you try exporting this visual then it will only have one column with the SVG code

One possible workaround would be adding the actual column along with the SVG based custom column

And hide it some how, as you can see I disabled the text wrap and reduced the width of this column as much as possible

It would appear like this and after exporting the data from this visual user will find both the SVG based custom column and the actual column.

It’s important to note that SVGs based columns and measures need to be categorized as Image URLs. This means they can only be used in visuals that support images, such as matrix, table and the new card visual — not in all visual types.