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.
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.
Do you have a link to the webinar? I’m not familiar with that content.
One of Will Thompson’s webinars at the Data Insights Summit was doing something similar with the Unicorn – changing tail, the horn, etc.
Thanks. Will posted that report publicly as well. It’s on Page 2 of his “Unicorn Forecaster” on the DSG: https://community.powerbi.com/t5/Data-Stories-Gallery/Unicorn-Forecaster/td-p/234551
I have reproduced the series of steps to load up the SVG files, changed the height/width to 90vh etc in PowerQuery. When I view the icons either via HTML or as a DAX Column with the type change to Image – the size of the icon remains as 8×8 … it’s not scaled up “large” as per your screen shots.The viewBox settings of 0 0 8 8 remains… I’ve removed this and it has not made any difference.
Instead of using vh, which is proportional like %, use px for the width and height. Then, you can use the third and fourth number in the viewBox to resize it accordingly.
That’s worked… thank you.
You’ve likely explained elsewhere that the larger you make the viewBox the smaller your image appears. Changing the viewBox doesn’t change the size of the image … a smaller viewBox will make your image appear larger… because you’re closer to it… as such. Hope that helps someone else too.
Thanks David. I don’t believe I’ve written about the viewBox, but having a description of how changes will affect the image would be helpful. Thanks!
Can we use this with SSAS, If yes would you please let me know how to do it.
Hello! Great post! But for me (newbie) I can’t find how make this step:
“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))”
Could anybody help me please?