Use SVG Images in Power BI: Part 2

In Part 1, you saw how to view SVG images using the HTML Viewer custom visual in Power BI. Apart from some conveniences like changing the color and resizing without losing quality, SVG may seem like a lot of work. At least, that may be true if you are only modifying one image. With a set of hundreds of images at your fingertips that can appear like Power BI’s Images or Shapes, this method becomes more powerful.

Icons, Icons, Icons

While it’s simple enough to add one SVG image, why stop there? There are numerous open source icon sets that are good candidates for incorporation into your Power BI reports. Some of the ones that I have explored are icon fonts but which happen to also have SVG available for download from GitHub. Font Awesome and Open Iconic in particular are two that I reference in this post. In any case, you can try using the following method with whatever collection of SVG files you can find.

For the example in this post, I have selected Open Iconic. The icons are MIT licensed.

Go to Open Iconic’s website and selected Download. Extract the zip file to reveal the contents. As mentioned previously, Open Iconic is an icon font, so you see references to the font folder, font license, and so on. You also see a folder labeled svg, which is what you can use as a data source for Power BI.


The svg folder contains 223 separate SVG files. If you modified all of these files manually for use in Power BI using the method shown in Part 1, that would be some intense work. Instead, Power BI helps out.


In Power BI Desktop, go to Get Data and select Folder. Browse for the svg folder and click OK.


Click Edit. What you are primarily concerned about is the Content field, which appears as Binary in the preview window.


Add a step after Source to extract the Content column. I chose to add it as a separate column named “SVG” rather than modify the existing column.

= Table.AddColumn(Source, “SVG”, each Text.FromBinary([Content], BinaryEncoding.Base64))


Scroll over and see some of the decoded content in the SVG column, then click Close and Apply.


Add the HTML Viewer custom visual to the report and drag the SVG column into it. Notice how all 223 Open Iconic icons appear in the visual. Unfortunately, they are 8 pixels by 8 pixels!


The Open Iconic icons have the opposite problem as the Font Awesome icons from my first post. Open Iconic is too small and Font Awesome is too large compared to the HTML Viewer visual’s size. As described in Part 1, we’ll Goldilocks it and make it just right by changing the height and width attributes to 90vh. This can be done in Power Query or using DAX.

If you opt for Power Query, add one additional step for replacing text:

= Table.ReplaceValue(#”Custom1″,”width=””8″” height=””8″””,”width=””90vh”” height=””90vh”””,Replacer.ReplaceText,{“SVG”})

If you choose DAX, add a calculated column, and then replace the former SVG field with the new calculated one in the HTML Viewer visual.

NewSVG = SUBSTITUTE(svg[SVG], “width=””8″” height=””8″””, “width=””90vh”” height=””90vh”””)


I recommend the DAX method because you can easily modify the icons based on data values (think of dynamic KPIs or a similar use case). Before you get too optimistic about using DAX though, note that the HTML Viewer only accepts a column and not a measure. This restricts what you can do somewhat.

As seen in Part 1, it is possible to modify the SVG to change colors, transparency, etc. With our icon dataset, it is possible to modify all 223 icons at once. For example, use an alternative SUBSTITUTE() formula to change the color.

NewSVG = SUBSTITUTE(svg[SVG], “width=””8″” height=””8″””, “width=””90vh”” height=””90vh”” fill=””#01B8AA”””)


Note that you can scroll and view all of the images. What are the odds you will use all of these icons? You can apply a Filter to select a single icon out of the iconset (or play with the SVG attributes to get more than one image to appear without having to scroll).


While it does not add too much to the PBIX, you could also filter out unused images in Power Query if you do not want all of them added to the data model. You’re only saving KB though and sacrificing some convenience. I personally like being able to view all of the icons in Power BI and then use a Visual Level Filter in the report to narrow down a selection.

After doing all this work, I have saved you the trouble of repeating these steps for Open Iconic. Here is a link to a GitHub repository containing the Open Iconic SVG paths in a ready to consume dataset that you can import into Power BI. If you are interested in following these steps with a different set of permissively licensed SVG files, please share your progress in a comment here. I would appreciate hearing if people find this method useful.

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

  1. Great post. While going through one of the webinars for power bi I came across a section where they displayed a picture (just the border ) of a bird and using the what if parameters they use o increase the size o the beak or head. I think we can achieve HTML but was wondering are they changing the entire image in the background or just the beak.

Leave a Reply

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