Use SVG Images in Power BI: Part 3

In addition to using SVG in the HTML Viewer custom visual as outlined in previous posts (Part 1, Part 2), Power BI allows you to work with SVG images as Image URLs. The following technique is available for use with any visual that renders Image URLs as an image. This puts SVG on par with how we currently use non-vector image types such as PNG, employing them as indicator columns in the Table visual or in other creative ways.

To work with SVG in this manner, extract the text of an SVG image as outlined in Part 1. You’ll need to add everything between the <svg> and </svg> tags to a column. To illustrate this, I’ve added the column and dropped it into a Table visual.

Having the text of the SVG is not good enough though. Notice how the SVG alone cannot be categorized as an Image URL. It appears as a broken image.

Instead, the SVG needs to be added as a data URI. If you are familiar with embedding Image URLs using Base64 as outlined by Jason Thomas and Gerhard Brueckl, it’s a similiar process. For SVG, Base64 is an option, but it is not required. It’s possible to add SVG as plain text by adding a short prefix to the beginning of your column:

data:image/svg+xml;utf8,

For SVG encoded as Base64, simply swap out utf8 for base64:

data:image/svg+xml;base64,

I’m illustrating this using a calculated column in DAX for convenience sake, but you could add this prefix in the data source or in Power Query as well.

When you change the Uncategorized text to an Image URL, the image appears.

In addition to advantages such as scaling without losing image quality, having SVG as plain text allows you to dynamically change the image using text replacement and/or concatenation. This leads to the ability to quickly and easily create and update images for indicators or other uses without having to edit image files in an outside program.

You can even add data from other columns, or in this case, DAX’s TODAY() function directly into the SVG.

Finally, here’s a more complex example inspired by some research I did recently for my BlueGranite colleague Meagan Longoria. The radius and opacity of the circle indicators/KPIs are adjusted based on data. As a column, it works in unique cases where user selections and filtering won’t affect the result. When the day comes where Power BI renders image URLs on measures and not simply columns though, the technique outlined here will become even more powerful and useful.

Hopefully you see some of the advantages of SVG in Power BI. In combination with or as a replacement for traditional image types, there are several current uses for vector-based images as icons, indicators, images, dynamic text, and so on. Let me know if you take advantage of some of these uses and find this post helpful.




7 thoughts on “Use SVG Images in Power BI: Part 3

  1. Thanks for the great series, Image URLs using SVG look like a great solution. I got excited and tried to do something I had wanted to do for a long time, Create a Bar Chart instead of a sparkline. Took me a while to get PBI to display my graphic because it is very picky about perfectly formatted tags, but I got it to work. My only challenge now is that he Table displays the image as if it was square. Row height is large, driven by the image. but in reality the image is only 100pxls tall. It looks like PBI is automatically formatting the grid cell into a square, works great for your sparkline but not what I need form my graphic.

    Do you know of any way to change this behavior

    Thanks

    Don McCall

    • Thanks for sharing! I was not aware of this contribution, but there is some good inspiration from Fabrice’s work in Excel.

Leave a Reply

Your email address will not be published. Required fields are marked *