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!
Great! – simple to re-size/-position/-colour/… we’ll see what will come from this post.
Thank you! Let me know how you end up using it.
Good work David
Thank you!
Hi, i tried to add svg image to the Power BI, but svg image is too large. It has 74k characters. Is there any alternative how to store this file in power bi/ssas model? Thanks in advance!
Not that I’m aware of. Power BI can only handle 32k in a text field.
Great resource for expanding Power BI design capabilities. One question: is there a reason you used “vh”for both width and height? I’ve found that using “vw” for width works even better since you can scale the vector to both dimensions when scaling the container.
Thanks! No intentional reason I used vh for both. This was an oversight in my part. Thank you for catching it.
i need to get svg iamge in required shape and dispaly the number on the shape also
for ex: no of students = 100
the number will show required kind of color and shape
Is it just me or it is not possible to copy-paste the code…
I have an SVG code in a column. When I assign that column to Viewer Values all I get is the SVG, no image. Any idea?
Have you included the SVG data url prefix in the string, and then set the field type to Image URL?
How do you get the SVG data into a column? And where is the HTML Viewer visualization? All I have so far is an SVG file, but I can’t follow your instructions, where you say Next, add the HTML Viewer custom visual to your Power BI report and add the column that contains the SVG data to the visual.
Easiest way would be to add it as a DAX calculated column, although you can also add it as a column in Power Query. Hitachi no longer offers the HTML Viewer custom visual. Use the HTML Content visual in its place.