Use SVG Images in Power BI: Part 1

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.

BarChartImage

BarChartSVGText

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.

SVGHeightWidth

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.

SVGAdjustedHeightWidth

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.

SVGFillColor

Transparency? Use fill-opacity.

SVGFillOpacity

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!

Read on for Part 2…

IconFilter

Advertisements

2 thoughts on “Use SVG Images in Power BI: Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s