In my recent BlueGranite post on Bookmarks, I demonstrated how you can employ Power BI’s HTML Viewer custom visual for data-driven images. In a series of two posts on the DataVeld blog, I’ll demonstrate additional ways to use the HTML Viewer with dynamic, vector-based images:
- Part 1 (this post) – How to use and modify SVG images instead of PNG, JPEG, etc.
- Part 2 (here) – How to quickly add hundreds of open source SVG icons to Power BI (whether for helping with Bookmarks or to egregiously expand your library of chartjunk).
SVG – Scalable Vector Graphics
The sample images in this post are SVG. As vector images, they will scale and maintain the same quality regardless of the visual container size. This offers an advantage over formats like PNG or JPEG, which may appear distorted as you enlarge the image dimensions.
Unless you happen to have access to Adobe Illustrator, you can create or convert your own SVG images using a free and open source application called Inkscape.
Once you have the SVG file, open it in a text editor. Here is a sample bar chart icon that I obtained from Font Awesome as it appears in both image and text form.
What’s all that garbage in <path>? There are better references than this blog post to help explain the ins and outs of SVG. For use in Power BI, know that you should not modify anything about the viewBox or <path> unless you want crazy things to happen. For what I’m attempting to demonstrate, copy and paste everything from the <svg> to </svg> tag. Either put it into a data source and then import it, or use the Enter Data capability in Power BI.
Next, add the HTML Viewer custom visual to your Power BI report and add the column that contains the SVG data to the visual. You’ll get something like the visual on the left.
Yikes! What happened? Notice how the default height of 1792 pixels and width of 2048 pixels far exceed the visual container dimensions. To fix this, change the text of the width and height to both be 90vh (90% of the vertical height of the HTML Viewer). It will now dynamically scale as you resize the visual in Power BI. You can play around with this value, but I selected 90vh because 100vh overflows and shows a scrollbar at all times, and 95vh showed a scrollbar when the visual size was small in Power BI.
That’s better! Here is where things get interesting. What if you want to change the color? Simply add a fill attribute to the SVG.
Transparency? Use fill-opacity.
None of these image modifications had to be done with outside image editing software–it was simply a matter of modifying text.
Once you have the SVG setup the way you want, you could even position a transparent Shape on top and create a Bookmark link!
Even at a small scale with a single image, hopefully you can see some advantages for using SVG images in Power BI. It may seem like a lot of work if you only add a single image though… In Part 2, I will look at how to rapidly build upon some of the modifications above to make a dataset containing hundreds of SVG icons, which you can also modify together using Power BI. Try changing hundreds of static PNG files at once, and you’ll find it will not be as simple as SVG!