Image URL: Use SVG images in Power BI

Microsoft Power BI is an innovative cloud-based business intelligence solution. Power BI is known for its self-service business intelligence capabilities and its features. The Power BI team frequently releases new features. This blog will discuss a recent feature – we can now classify the type of the data in measures with help of data categories.

Image URL:

Image URL is a new feature released with Power BI Desktop update on Aug 2018. Please do check out this blog for Power BI Desktop August features details.

You can create measures to generate shapes, sparklines dynamically using Scalable Vector Graphics (SVG) images with help of Image URL data category.

Using SVG Images in Power BI

How to create a measure to generate shapes dynamically?

Let’s consider the below example,

We have current year sales amount (Sales) and Prior year sale amount (Sale PY). We going to create a measure which will show the performance of the organization. It is based on the variance between Sales and Sales PY.

Conditions:

Var % > 10% is good. The Sales is increased 10% or more that Sales PY.

Var % < -10% is Poor. The Sales is decreased 10% or more that Sales PY.

Based on the above conditions, we will indicate the performance with arrows. Please do have a look at the below image,

Using SVG Images in Power BI

Now, create a measure for showing the performance.

Using SVG Images in Power BI

Here are the sample codes,

Down arrow:

“data:image/svg+xml;utf8, <svg xmlns=’http://www.w3.org/2000/svg’ x=’0px’ y=’0px’ width=’50’ height=’20’> <polygon points=’10,20 43,20 25,0′ style=’fill:Green;stroke:Green;stroke-width:0;fill-rule:evenodd;’ /> </svg>”

Up arrow:

“data:image/svg+xml;utf8, <svg xmlns=’http://www.w3.org/2000/svg’ x=’0px’ y=’0px’ width=’50’ height=’20’> <polygon points=’10,0 40,0 25,20′ style=’fill:Red;stroke:red;stroke-width:0;fill-rule:evenodd;’ /> </svg>”

Now change the data category to Image URL. You can find the option in the Modelling ribbon,

Using SVG Images in Power BI

Finally, pull the measure into a table/matrix to visualize it. You can find example SVG codes here. With this new feature, you can also create measures with Smileys that will serve the same purpose as we saw earlier. Here is the sample screenshot,

Using SVG Images in Power BI

There are many online SVG converters available. You can use those to convert images to SVG. It will help you to generate custom shapes or images.

 

This is a simple way to use SVG images in Power BI. Hope this blog helps you to understand the Image URL data category and gives a simple tutorial to create a measure to generate shapes dynamically. Please reach out Cittabase for more information or questions on Power BI features.



6 Comments

  • […] Web URL: You can create a measure to generate dynamically URLs and mark the data category as a Web URL. You can use this feature for navigating to other Power BI reports. You can link other Power BI reports. You can pass values to filter other reports by using URL filter parameters. Image URL: This is a great feature. You can create a measure to create shapes, sparklines dynamically using SVG images. For more details, Use SVG images in Power BI. […]

  • Nemanja An

    Thank you for pointing this out! However, my issue is that svg code is huge (74k characters) and it can’t be stored in power query. Do you know any alternative how to overcome this issue?
    Main problem was that png image was distorting depending on device so we wanted to try with svg format.
    Thanks in advance

  • Jamie Savage

    This is a great concept and something I would like to use in my Power BI reports. The issue I am having though is the svg images increase the row height in my table visual. While I can control the size of the image I can’t seem to reduce the height of the rows and I am left with a big space between each row. Is there any way to control the row height? Thanks 🙂

  • Axal

    Does this “Image URL” trick also works when we want to display and image from a column in SQL Server ?
    Also will it works if we’re using Direct Query for the connection.

    Thanks,

Comments are closed.