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.




One thought on “Use SVG Images in Power BI: Part 3

Leave a Reply

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