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! 🙂

Advertisements

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close