How to use SVG images in PowerBi

Recently I gave a talk on Power Bi Days; and I wanted to share it with it all

1. Here is the you tube https://youtu.be/HbJM1eFUk9U where the presentation is saved – watch the video and follow along with this blog and Github files
2. Here is the GitHub Repository where all files are saved

My inspiration…!

1. David Eldersveld who has a 3-part blog on using SVG’s in Power BI talking about introducing SVG’s and use of Inkscape: https://dataveld.com/2018/01/13/use-svg-images-in-power-bi-part-1/
2. Kasper de Jonge who has this blog about KPI’s: https://www.kasperonbi.com/showing-kpis-in-a-table-or-matrix-with-power-bi/
3. Brian Grant on sparklines: https://www.csgpro.com/blog/2018/08/building-basic-svg-sparkline-small-multiples-measures-in-dax

Contents and Useful Links

• What is an SVG?
• What is Inkscape?
• How to change colours of SVG Images in Power BI
• How we can create trends and images to use in Tables and Matrix visuals
• How to create trend lines in Power BI
• How to create custom images using Inkscape and then applying data driven DAX Calculations to bring the images to life

Useful Link 1: Icon Libraries

Useful Link2: Inkscape is professional quality vector graphics software which runs on Linux, Mac OS X and Windows desktop computers.

1. What’s an SVG?

SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.

Under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text.

As it is human-readable, easily understood and modified.

1a. Example SVG’s

Here we can see the code that the SVG image file is made of, take note of the various human readable content

2.What is Inkscape?

Inkscape is professional quality vector graphics software which can then be used to view the SVG XML Content. I use it to draw images.

3.Colours of SVG Images

The first example in the video walks you through how to change the colour of a star.

4.KPI Indicators
The second example in the video walks you through how to set up KPI indicators using SVG.

5.Trend Lines

The third example in the video walks you through how to set up trend lines using SVG.

6. Custom Images

The fourth example in the video walks you through how to set up a custom image.

Thanks for reading! 🙂

Advertisement