SVG on Hat Full of Data

Power BI – Improve a card with SVG

Tue, 29 Jul 2025 11:00:32 +0000

The not so new card in Power BI, introduced in 2023, includes some lovely features. The first is the simplest of adding multiple values and having cards laid out evenly in a row in a single visual. The second awesome feature adding an image to a card with SVG.

Starting Point

This report is visualising web site views per year. In the report there are three measures, Views, Views YTD LY and Growth. In the picture above we can see views have gone down by 19% but its not very visual and takes up three cards. This post is to walk through changing that first card to show an arrow indication growth direction and the %. Something similar to the cards shown below for 2 different time periods. I am no graphic designer but these cards tell the story more effectively in my opinion. See the bottom of the post for the even prettier version.

Create the SVG Measure

Before we can create a card with SVG we need to write the measure that contains the SVG. So here is where we cheat and refer to post I wrote years ago, called SVG in Power BI Part 2 – KPI Shapes. This uses a measure called Growth and draws either a Green arrow pointing up or a red arrow pointing down. The final code from this blog is

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


Arrow = 
// Variables to store arrow paths
var uparrow = ""
var downarrow = ""

// Select arrow to use
var arrow = IF([Growth]>=0,uparrow,downarrow)

// Insert arrow into SVG
var svg ="data:image/svg+xml;utf8," &
 ""
 & arrow & 
 ""

RETURN svg

That would create the arrow using the Growth measure, I also want to add text below the arrow. So we increase the viewBox to be 130 tall so line 11 becomes

1

""

To add in the text I make use of another previously written post SVG in Power BI – Part 4 – Adding SVG Text. I create a text tag that is middle anchored to 50,130 and shows the Growth measure formatted as a percentage.

1
2


var growthtext = "" 
 & FORMAT([Growth],"0.00%") & ""

So the final measure looks like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


Arrow = 
// Variables to store arrow paths
var uparrow = ""
var downarrow = ""

// Select arrow to use
var arrow = IF([Growth]>=0,uparrow,downarrow)

// Add text
var growthtext = "" & FORMAT([Growth],"0.00%") & ""
// Insert arrow into SVG
var svg ="data:image/svg+xml;utf8," &
 ""
 & arrow & growthtext &
 ""

RETURN svg

Measure Data Category

As with any SVG measures you need to remember to change the Data category of the measure to Image URL on the measures toolbar or in the Model view properties pane.

Add SVG to the Card

The final part is to add the SVG measure to the card. With the card selected head to the formatting settings. Turn on the Image and then change the Image type to Image URL. The click on the fx button under Image URL to select the SVG measure we created, Arrow.

The image is there, even though you can’t see it due to it being too small. Change the size of the image to fit your card. You can change the position, alignment and spacing to fit your card. Do make sure you remember that numbers in a report will change so allow for that.

Accessibility

I know accessibility in published Power BI reports is not great, but it is made even worse by not making use of the Alt text options. So I created a measure Arrow Alt Text that will describe the image. I then click the fx button under Accessibility and use the measure.

1
2
3
4


Arrow Alt Text = 
var ArrowText = IF( [Growth] >= 0 , "Green arrow shape pointing up ", "Red arrow shape pointing down " )
var Result = ArrowText & "with " & FORMAT([Growth],"0.00%") & " below."
Return Result

Even More Tricks

Guy in a Cube have a video that does a few more tricks to make it even prettier. Its a high speed video so expect to stop, rewind and understand all the tricks Adam uses. His shadow suggestions are great. Adding his tricks and my svg I changed the card to look like this.

References

Microsoft New Card Description

Conclusion

The new cards are very clever and in the right hands will enhance reports. Adding SVG is a great addition and I know clients who love adding their own graphics. The complexity of understanding which formatting features are available depending on if you pick one series or All is frustrating but that perhaps is a separate post all together.

Power BI – 5 Stars SVG

Sat, 25 Feb 2023 22:57:38 +0000

In the Feb 2023 Power BI Update they introduced image width in a table formatting. This means SVG images now don’t have to be square, so we can now do rectangle images. So I ported Stars SVG code I had in my Power Apps series and added this post to my Power BI SVG series

For this post we are using a table of events that have a rating score. I want to add a visual version of the rating to the table visual.

Resources for this post and video can be found at https://github.com/Laura-GB/DemoData/

YouTube Version

Draw 1 Star SVG

The first step is a measure to draw a single star. That starts with the SVG essentials similar to previous examples and the basic star shape. We need to remember to change Data Category the measure is an Image URL under data category and then add it to the table

1
2
3
4
5
6
7
8
9


Stars = 
// svg essentials
VAR svg_start = "data:image/svg+xml;utf8,"
VAR svg_end = ""
// star shapes
VAR Star1 = ""

RETURN
svg_start & Star1 & svg_end

The default image size will be too big. In the formatting for the table, change the image size. I’ve used 30 px, pick a size that works for you.

Draw 5 Stars SVG

In order to draw 5 stars in a row the view box needs to be expanded to fit them all in. So the svg_start needs to change to 500 100. This will mean that the above width will also need to change. One star is 30 px, so 5 stars will need a width of 150 px.

Then we need to draw 5 stars in a row. We can use GENERATESERIES to create a table with numbers 0,100..400 so we can draw a star at 0,0 and 100,0 etc. That can be used inside a CONCATENATEX to create 5 groups. Each group will use a transform, translate to position each star.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


Stars = 
// svg essentials
VAR svg_start = "data:image/svg+xml;utf8,"
VAR svg_end = ""
// star shapes
VAR Star1 = ""
VAR Star5 = CONCATENATEX(
 GENERATESERIES(0,400,100),
 "" & Star1 & ""
)
RETURN
svg_start & Star5 & svg_end

Grey Star Outlines

The first layer of stars is outline stars so we need to put the 5 stars in a group with a white fill and 1 point black outline.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


Stars = 
// svg essentials
VAR svg_start = "data:image/svg+xml;utf8,"
VAR svg_end = ""
// star shapes
VAR Star1 = ""
VAR Star5 = CONCATENATEX(
 GENERATESERIES(0,400,100),
 "" & Star1 & ""
)
// Defs

// Coloured Stars
VAR GreyStars = "" & Star5 & ""
RETURN
svg_start & GreyStars & svg_end

Define Clip Path

The gold stars need clipping to match the rating score. 5 stars is 500 wide so a rating of 2 needs the gold stars clipped at 200, and 3.5 at 350 etc. We use variable ClipWidth to store this. To clip an image we use the and tags. The clipPath includes an id so it can be used later. The clipped area is a rectangle from with a height of 100 and a width of ClipWidth.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


Stars = 
// svg essentials
VAR svg_start = "data:image/svg+xml;utf8,"
VAR svg_end = ""
// star shapes
VAR Star1 = ""
VAR Star5 = CONCATENATEX(
 GENERATESERIES(0,400,100),
 "" & Star1 & ""
)
// Defs
VAR ClipWidth = [Avg Rating] * 100
VAR Defs = "
 
 "
 
// Coloured Stars
VAR GreyStars = "" & Star5 & ""
RETURN
svg_start & GreyStars & svg_end

Draw Clipped Gold Stars

The last step is to draw the 5 gold stars using the clip path. So we use another group, apply a fill of gold and the clip path. The clip path name

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


Stars = 
// svg essentials
VAR svg_start = "data:image/svg+xml;utf8,"
VAR svg_end = ""
// star shapes
VAR Star1 = ""
VAR Star5 = CONCATENATEX(
 GENERATESERIES(0,400,100),
 "" & Star1 & ""
)
// Defs
VAR ClipWidth = [Avg Rating] * 100
VAR Defs = "
 
 "

// Coloured Stars
VAR GreyStars = "" & Star5 & ""
VAR GoldStars = "" & Star5 & ""
RETURN
svg_start & Defs & GreyStars & GoldStars & svg_end

Conclusion

The width addition to images in tables and matrix opens up lots of possibilities to use images in tables. There are lots of ideas for visuals to add to a table or matrix.Kerry Kolosko has some brilliant templates to get you started at https://kerrykolosko.com/portfolio/

Power BI Series

Power Apps – 12 Days of Components

Fri, 27 Dec 2019 23:37:45 +0000

Madly I decided I was going to do 12 videos on Power App components and they have had a heavy focus using SVG. This post is to provide the code and resources for each video.

Day 1 – Create a Component

Video walks through turning on components, adding an SVG image and then adding the component to a screen within the app.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 2 – Add an Input

This video adds an input, called BaubleColour which is a HEX string, to the Christmas tree component to allow the component user to select a colour for the baubles.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 3 – Use Table Input

This video uses a table of HEX strings called BaubleColours to provide a list of colours for the baubles. The colours are cycled through using a timer control.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 4 – Use SVG Transform

This video does a simple transform in SVG to make the star on the top of the tree rotate.

SVG Code

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "

)

Day 5 – Flexible Resizing of SVG

Using percentage values within the SVG make the image flexible when the component is resized.

SVG Code

1
2
3
4
5
6
7
8
9


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 
 
 "
)

Day 6 – Patterned Presents

Using SVG patterns and a list of patterns we can add patterns to the present wrappings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 " & LookUp(Parent.Patterns,PatternName=Parent.PatternName,Pattern) & "
 
 
 
 
 
 
 
 "
)

Excel File for SVG Patterns

Day 7 – Add a Tag using SVG Text and Rotate

Using SVG Text and rotate we can create another component to draw a tag that uses an input of the name to label each present.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & Parent.TagName & "
 "
)

Day 8 – Star Rating

Rate your New Year Resolution progress with a star rating drawn with a little SVG and a gallery.

1
2
3
4
5
6


With(
 {StarColour:If(
 ThisItem.Value
 "
 )
)

Day 9 – Fill a shape using SVG Clip

Fill up a heart in colour to visualise a percentage value using a component containing SVG using a clip path.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


With(
 {
 SVG: "",
 ClipWidth: 100 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & SVG & "
 " & SVG & "
 " & ClipWidth & "%
 "
 )
)

SVG Code to fill from the bottom up

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


With(
 {
 SVG: "",
 ClipHeight: 100 * Parent.Score,
 ClipY: 100 - 100 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & SVG & "
 " & SVG & "
 " & ClipHeight & "%
 "
 )
)

Day 10 – Fill Part stars using SVG Clip

Combining the star rating from Day 9 with the clip path from Day 10 we can improve the star rating to show part stars for a score of 2.5 etc.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


With(
 {
 StarSVG: "",
 ClipWidth: 100 * ('Day10 Star Rating Improved'.Score - ThisItem.Value + 1)
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & StarSVG & "
 " & StarSVG & "
 "
 )
)

Day 11 – Draw a Gauge

Draw a simple gauge to show a percentage value using an arch and rotating a line with a simple transform.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


With(
 {
 SVGArch: " ",
 SVGRotate: 180 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & SVGArch & "
 - "
 )
)

Day 12 – Add Colours to that Gauge

Lets add some colour to the gauge from day 11 of this series. We look at rotate again and how moving items partly outside the view box hides that part.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


With(
 {
 SVGArch: " ",
 SVGRotate: 180 * Parent.Score,
 RedRotate: -180 * (1 - Parent.RedScore),
 AmberRotate: -180 * (1 - Parent.AmberScore)
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & SVGArch & "
 " & SVGArch & "
 " & SVGArch & "
 
 "
 )
)

Conclusion

I thoroughly enjoyed building the different components and working out the SVG code to use. I hope you have enjoyed watching. Below is the link to download a zip of the MSApp file for the components.

https://hatfullofdata.blog/wp-content/uploads/2020/01/12-Days-of-Components.zip

Power Apps – Animating SVG Fill Colour and Size

Sat, 23 Nov 2019 23:54:27 +0000

This is the second post in the SVG in Power Apps series. In this post I will introduce animating SVGs by altering the colour and size of the SVG graphic using variables and a timer control.

Series

This series is to introduce ideas for using SVG within PowerApps to add graphics to your Apps.

Introduction to SVG in a PowerApp
Animating SVG colours and sizes
Multi-part SVGs
Rotation and Clip Paths

Selecting Fill Colour

For this post we shall start with a simple circle SVG shape to modify using controls. The code shall start as one circle and the image control will have a border.

The first control will be a drop down to select the colour. We add a drop down with a list of colours as the items and rename it to ColourDropDown.

We then modify the SVG code of the shape to use the selected colour in drop down. The code is now as follows.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

Now the circle changes colour based on the drop down value.

Animating SVG Size

The next stage to use a slider to resize the circle. We add a slider and change the Min and Max values to match the requirements and renamed the slicer to SizeSlicer.

We then modify the code to use the slicer value as the radius.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

Animating SVG Colour

Getting a user to select a colour or size is a simple introduction idea to modifying the SVG image. The next step is to create a simple animation using a timer to modify the size. On another screen we will add a SVG shape with the fill colour and size based on two variables.

First step is to add a button to setup the variables. Then we change the SVG code to use the 2 variables

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

The next step is to add a timer. In order to make the shape resize smooth I change the duration to 10, ie 10 milli-seconds. Also change the Repeat and Auto start to be on, so the animation will start automatically and continue to repeat.

The next step is calculate what will happen every 10 milliseconds. The size of the shape should increase by one until it reaches a maximum value and then reduce by one until it reaches a minimum. We will need to change the code behind the setup button to set the vvChange to 1.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


If(
 // Reaches maximum so start decreasing
 vvSize >= 60,
 UpdateContext({vvChange: -1}),
 // Reaches minimum so start increasing
 vvSize 

### Colour Animation

The colour of animating SVG can be specified using a hex rgb string. For example #FF0000 is red and #CCCCCC is grey. Power Apps do not include a function to translate from a number to a hex string so in a separate post I explain how to use a component as a function which can be found [here](https://hatfullofdata.blog/powerapps-function-component/) . I add this component and name it DECtoHEX_Blue.

So the we add code to the setup button to create variables vvBlueValue set to 0 and vvBlueChange set to 1. The component is to convert the vvBlueValue into a HEX string, so we put into the component custom property DEC to be vvBlueValue.

Then we add very similar code to the size changing. The final step in the code builds the colour string ready for the SVG.

```xml
If(
 // Reaches maximum so start decreasing
 vvSize >= 60,
 UpdateContext({vvChange: -1}),
 // Reaches minimum so start increasing
 vvSize = 255,
 UpdateContext({vvBlueChange: -2}),
 vvBlueValue 

The animation will now have a circle that grows and shrinks and cycles from black to blue and back again.

### Conclusion

This introduces a concept of using SVG and a timer to create animations for any app. These methods could be expanded to modify the position of elements within the SVG.

## More Power Apps Posts

- [Transparency Update](https://hatfullofdata.blog/powerapps-transparency-update/)

- [Using JSON Feature to Save Pictures](https://hatfullofdata.blog/powerapps-using-json-function-to-save-pictures/)

- [AI Builder Object Detect Model](https://hatfullofdata.blog/ai-builder-object-detect-model/)

- [Function Component](https://hatfullofdata.blog/powerapps-function-component/)

- [SVG in Power Apps series](https://hatfullofdata.blog/powerapps-svg-introduction/)

- [12 Days of Components](https://hatfullofdata.blog/power-apps-12-days-of-components/)

- [Build a Responsive App series](https://hatfullofdata.blog/power-apps-build-a-responsive-app-planning/)

- [Embed a Power BI Chart](https://hatfullofdata.blog/power-apps-embed-a-power-bi-chart/)

PowerApps – Function Component

Sat, 26 Oct 2019 18:24:41 +0000

This post is to describe how I solved a problem using a component. The problem was I wanted to have calculation I could reuse. In a more traditional programming environment I would write a function. Components are reusable so it kind of made sense to use one of them as a function component..

Calculation Details

The calculation I wanted to do was convert a decimal number to a hex number. PowerApps doesn’t have a function to do this so I worked out the calculation. I added a text input to take the decimal number and then a label to contain the calculation.

Create the Function Component

In my app I had already turned on components and added a new component. Shane Young does a great intro to components found here. I then added 2 custom properties. DEC is the decimal value as an input to my component like a parameter to a function and HEX as the returned value.

I then clicked on the HEX Value to enter in a the formula as the following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


With(
 {
 FirstBit:(DECtoHEX.DEC-Mod(
 DECtoHEX.DEC,
 16
 ))/16,
 SecondBit: Mod(
 DECtoHEX.DEC,
 16
 )
 },
 If(FirstBit>9,Char(55+FirstBit),FirstBit) &
 If(SecondBit>9,Char(55+SecondBit),SecondBit)
)

Using the Function Component

Back on the screen of my app I can use the component using a slider value as the input. I can hide the component as it doesn’t need to be seen.

I needed a HEX value to use in some SVG for an image. In this example I used a slider to determine red value from 0 to 255. I add the component and pass in the slider value into the DEC. I then use the HEX in the SVG code I’m using in an image. See my Introduction to SVG to explain the SVG part.

I could then add a slider and component for green, blue and transparency to make my image fully adjustable.

Conclusion

Components as function opens many possibilities and as 2 of my favourite PowerApp builders Hiro and Brian Dang use them I’m going to explore them some more.

Update

Thanks to Brian Dang for giving me a tidier version of the calculation using nested WITH functions. So the calculation inside the component is now:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


With(
 {
 CalcValue: Mod(DECtoHEX.DEC,16)
 },
 With(
 {
 FirstBit: (DECtoHEX.DEC-CalcValue)/16,
 SecondBit: CalcValue
 },
 If(FirstBit>9,Char(55+FirstBit),FirstBit) &
 If(SecondBit>9,Char(55+SecondBit),SecondBit)
)

PowerApps – SVG Introduction

Fri, 25 Oct 2019 08:23:17 +0000

This is the first post in the PowerApps SVG series. In this SVG Introduction post we will cover adding a simple SVG drawing to a PowerApp screen. Future posts will show how to manipulate that image.

Series

This series is to introduce ideas for using SVG within PowerApps to add graphics to your Apps.

Introduction to SVG in a PowerApp
Animating SVG colours and sizes
Multi-part SVGs
Rotation and Clip Paths

SVG Introduction

SVG stands for Scalable Vector Graphics and is a language to define a drawing. The drawings are defined by co-ordinates and dimensions which means they can be stretched without loosing definition.

I am not going to give a full introduction to SVG here in this post. I recommend you look at my intro SVG post at https://hatfullofdata.blog/svg-in-power-bi-part-1/ for resources and a brief overview.

Using SVG in a PowerApp

Given the resources in the post above we can write a very simple SVG statement that would work on a web page with the following code.

1
2

The above code draws a circle filled in with red. It is centered in the drawing area and if the area is 100px its radius will 40px, and if expanded to to 400px square the radius will expand to 160px.

In order to use the above code we need to do two things, firstly encode the code using the function EncodeUrl and then add a string onto the front stating the format of the image data. So the above code becomes

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

We use the above code by adding an image control to the app and replacing SampleImage with the above code.

The image can be re-sized and moved and it will remain a sharp red circle.

More Complex SVG images.

The above example is a very simple red circle. SVG is a complex language that can define very detailed shapes using paths. You can search online or use latest version of Microsoft Office’s Icons saved to disk to get SVG images. For this example I’m going to draw an owl. I saved an icon from PowerPoint as a picture to create this one but I could have found one on the internet.

When I open the SVG in a text editor I can see I have similar top part and bottom parts and and between them multiple paths and other drawing elements. I have replaced all double quotes ” with single quotes ‘.

In order to keep my image code simple I am creating a variable, vvSVGOwl, to store the SVG, in the start code of the app.

We can then use the variable in an image to draw the owl in the app. (Remember to execute your start code, I always forget!)

Conclusion

This post is a quick SVG introduction for PowerApps. Due to the SVG code being flexible and including lots of other options the possibilities for using SVG are endless.

SVG in Power BI Part 7 – Using a Theme File to add SVG Icons

Tue, 13 Aug 2019 13:01:24 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

As part of the July 2019 update there were changes to conditional formatting and I covered the use of SVG based measures to add icons in part 6 of this series. In this post I am going to cover adding to or swapping the built in icons using a theme file and some SVG.

Overview of Theme Files

Theme files are a JSON file with instructions for formatting your visuals. The formatting can include colours, fonts and now icons. Details of how to construct and use a theme file can be found in the links below.

https://docs.microsoft.com/en-us/power-bi/desktop-report-themes

https://powerbi.tips/tools/report-theme-generator-v3/

Adding New SVG Icons

Icons is a new section for the theme file. It is at the same level as the name. You need a name, url and description for the icon. I can see no evidence of the name or description being used. Please correct me if I am wrong.

The url can be SVG code in a similar format to the measures from previous posts. So in this example my first icon is a red quarter of a circle. Below is the SVG code for the shape.

1

data:image/svg+xml;utf8,

A simple theme file to create one extra icon would look like

1
2
3
4
5
6
7
8
9


{
 "name": "New Icons",
 "icons": {
 "complete025": {
 "url": "data:image/svg+xml;utf8, ",
 "description": "25% Complete"
 }
	}
}

This adds a single icon to the icons available in conditional formatting. It will be listed at the end of the icon list.

I then expanded the list of icons to cope with 25%, 50%, 75% and 100% going from red through amber to green.After applying the the theme to my report I created conditional formatting rules to a table to use my new icons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{
 "name": "Percent Icons",
 "icons": {
 "complete025": {
 "url": "data:image/svg+xml;utf8, ",
 "description": "25% Complete"
 },
 "complete050": {
 "url": "data:image/svg+xml;utf8, ",
 "description": "50% Complete"
 },
		 "complete075": {
				"url":"data:image/svg+xml;utf8, ",
				"description":"75% Complete"
		 },
 "complete100": {
 "url": "data:image/svg+xml;utf8, ",
 "description": "100% Complete"
 }
 }
}

Conclusion

Adding a few extra icons to report is great. I am concerned that adding lots of complex icons will just make the report slow.

In Microsoft’s announcement they say you can replace existing icons using a theme file. For this you need the resourceKey for the icons. I have not been able to find a list of icons and the example they give didn’t work for me.

SVG in Power BI Part 6 – New Icon Conditional Formatting

Tue, 06 Aug 2019 10:37:05 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

In July 2019 Power BI Desktop update they included new conditional formatting on table and matrix to include icons. These icons can be defined using SVG which is pretty cool. So this is a new post in my Power BI SVG series looking how we can use SVG icons in conditional formatting.

Quick Overview of Icon Conditional Formatting

Once you have added a table or matrix visual to your report you can in formatting in the Conditional Formatting Section turn on Icons. This will immediately add icons to the selected column. In the example below icons were added to Turnover column.

Clicking on Advanced controls link opens options behind the selection of icons. The default rules are for 3 icons at

In this post though I’m looking at using SVG to define and select the icon. So I will not be using rules but will be using a measure. The example is going to be based on a measure written in a previous post, KPI Shapes in Power BI The measure decides on an up or down arrow based on another measure called Growth.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


Arrow = 
// Variables to store arrow paths
var uparrow = ""
var downarrow = ""

// Select arrow to use
var arrow = IF([Growth]>=0,uparrow,downarrow)

// Insert arrow into SVG
var svg ="data:image/svg+xml;utf8," &
 ""
 & arrow & 
 ""

RETURN svg

The arrow is in its own column and doesn’t resize with font sizes. With the Icon update we can add the icon to any column.

Select your table visual
In visual format, expand Conditional Formatting
Select the column and turn on Icons
Click on Advanced Controls
Change Format to Field Value
Change Based on Field to the measure, eg Arrow
Click OK

Conclusion

Icons update is an exciting one and much needed. It cuts out the need for SVG for many, which is great. Now with a little SVG we can add some conditional formatting without having to add the extra column.

SVG in Power BI – Part 5 – Using SVG Rotate

Sat, 08 Jun 2019 21:36:23 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

In this post I will introduce the possibilities that SVG rotate gives. This post will walk through creating a dial. This post will be done in 2 stages, first a simple dial and then add colours.

Simple Dial

We will start with a simple dial, made up of an arch with a line to indicate a percentage.

The arch is made using a path which combines 2 arcs to make an arch. The arch is then nested in a group element that applies a fill.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Simple Dial = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
// arch shape
 var svg_arch = ""
// light blue arch
 var svg_blue_arch = "" & svg_arch & ""
return
 svg_start & svg_blue_arch & svg_end

We now need to add a line that will move based on a measure called Score using SVG rotate. So I start by calculating the rotation angle and drawing a line that matches the bottom left of the arch and then rotate it centered on the center point of the arch.

The rotation will be 0 to 180 degrees and the measure Score is a percentage so the calculation is [Score] * 180.

The line is drawn from 0,50 to 20,50 and then a transform is applied of a rotate which has 3 parameters, angle to rotate, x and y for the centre of the rotation. So the bottom part of my measure becomes

1
2
3
4
5
6
7


// light blue arch
 var svg_blue_arch = "" & svg_arch & ""
// draw line and rotate
 var svg_rotate = [Score] * 180
 var svg_line = "- "
return
 svg_start & svg_blue_arch & svg_line & svg_end

Show the Value

To make it very obvious what value is shown I’m going to add the value of the Score measure. The centre of the arch is 50,50 so I’ll put the middle of the text at 50,40. I used the FORMAT function to apply a percentage, “0%”, format to the score. (See the previous post in this series to look at SVG text)

The bottom part of the measure now becomes

1
2
3
4
5


var svg_line = ""
// Show Score value
 var svg_score = ""&FORMAT([Score],"0%")&""
return
 svg_start & svg_blue_arch & svg_line & svg_score & svg_end

Adding Colours

For this I researched being able to draw parts of an arch. In order to do that I would need to calculate the end points of each arch, which was possible but involved way more mathematics than I was willing to re-learn. My days of using Cos, Sin and Tan have long gone.

So I the trick I used was to draw the arch upside down out of sight and rotate the arch around into view. Different coloured arches can be rotated into view to show different colours.

To draw the arch up the other way I just changed 2 values in svg_arch variable. When drawing an arc in SVG the 5th number after the A specifies which way round the to reach the final point. So the svg_arch variable becomes.

1
2


// arch shape
 var svg_arch = " "

Then we add a coloured arch rotated for each part of the gauge. In my example I am going to show Green upto 100%, Amber starts at 75% and Red at 50%. So the complete measure code now is

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


Coloured Dial = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
// arch shape
 var svg_arch = " "
// coloured arches
 var svg_green_arch = "" & svg_arch & ""
 var svg_amber_arch = "" & svg_arch & ""
 var svg_red_arch = "" & svg_arch & ""
// draw line and rotate
 var svg_rotate = [Score] * 180
 var svg_line = ""
// Show Score value
 var svg_score = ""&FORMAT([Score],"0%")&""
return
 svg_start & svg_green_arch & svg_amber_arch & svg_red_arch & svg_line & svg_score & svg_end

Conclusion to SVG Rotate

This post ended up being longer than I expected so my series will expand to make use of a table to store the colour values in another post and drawing a clock into another post.

SVG in Power BI – Part 4 – Adding SVG Text

Tue, 21 May 2019 23:13:44 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

This is the fourth post in my series on using SVG in Power BI introducing adding SVG text and actually solves one of the niggles I had with doing KPI figures in Power BI. I didn’t get to do this part as part of my session which started this series. Here is the list of posts.

My niggle was the KPI visual. It is a fast way to have a red or green measure displayed. BUT, it requires a trend axis even if you don’t want one and it includes a tiny red exclamation mark or green tick. So I wanted the red / green and the goal shown with no trend or ticks and exclamation marks.

Simple Text Element

SVG Text elements need an x and y attributes to position the text and a style attribute that uses CSS notation to choose font properties. The example below has the word Hello where the bottom lower left corner is at 20,60.

1
2
3
4
5
6
7
8


Text Measure = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
// text element including a style tag
 var svg_text ="Hello"
return
 svg_start & svg_text & svg_end

Aligning SVG Text

If I am going to replace the KPI visual I need to place a number centred in the SVG graphic. The default alignment is the x and y are the bottom left. This can be changed using the text-anchor attribute for the text element; it can be set to start, middle or end.

Below is an example of the string ABC being aligned start, middle and end.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Text Measure = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
// text element including a style tag
 var svg_text1 ="ABC"
 var svg_text2 ="ABC"
 var svg_text3 ="ABC"
return
 svg_start & svg_text1 & svg_text2 & svg_text3 & svg_end

My KPI Visual

To replace the KPI shown at the start of this post I want a number in the middle of the square showing the measure, bottom left the goal and bottom right how close to the goal we were.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


My KPI = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
// 3 text elements, actual, goal and % close
 var svg_Indicator =""
 & FORMAT([Total Sales],"#,##0") & ""
 var svg_goal = "Goal"
 & ""
 & FORMAT([Target Sales],"#,##0") & ""
 var svg_close =""
 & FORMAT([KPI Close],"0%") & ""
return
 svg_start & svg_Indicator & svg_goal & svg_close & svg_end

Format function is used to format the number into comma, #,##0 and percent, 0% formats.

The last part is to colour the number based on the Indicator reaching the target. This was covered in Part 2 of this series so I’ll just give the final code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


My KPI = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""
 
// calculate colour for element
 var ind_colour = IF([Total Sales]"
 & FORMAT([Total Sales],"#,##0") & ""
 var svg_goal = "Goal"
 & ""
 & FORMAT([Target Sales],"#,##0") & ""
 var svg_close =""
 & FORMAT([KPI Close],"0%") & ""
return
 svg_start & svg_Indicator & svg_goal & svg_close & svg_end

My KPI in a Table

One advantage of the SVG text KPI over the KPI visual is it can be embedded within a table. The total line will work as long as the number measures work.

Conclusion

Adding SVG text to a visual does make the visual more informative and the above example makes conditional formatting and data layout possible in a table.

SVG in Power BI – Part 3 – Fill SVG Icon with Colour

Mon, 29 Apr 2019 22:30:35 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

In this post we will introduce using icons and filling the icon with colour to show a percentage value.

Getting Icon Code

You can download icons from lots of web sites. Search for SVG icons or ask your marketing teams for company graphics as SVG. If you are using Office 2016 or above the icons in PowerPoint can be saved as SVG files. Icons can be found on the Insert ribbon and once inserted on a slide, right click and save as a picture.

Once you have the SVG icon take a look at the SVG code. There will be an open tag with lots of attributes then one or more elements and then a closing tag . You need to do a search replace the double quotes into single quotes, e.g. and its long so I save it into a measure.

Draw 2 Elephants

We are going to draw 2 elephants, one grey and one coloured one on top. The coloured one we will clip to size to show it being filled up.

Next task is to create a measure in our report. Inside the measure we create 2 variables, one to store the svg start and one for the svg end. As a quick test we return the concatenation of the variables and the previous created measure to draw our icon.

1
2
3
4
5
6
7


Elephant Measure = 
// svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""

return
 svg_start & [EleSVG] & svg_end

1

If you use the custom visual Image from Cloud Scope you can add the measure and the icon will be shown in Power BI.

In order to draw a grey and red elephant we will nest the elephant in a group tag and give the element properties that the nested elements will inherit.

I add 2 more variables one for the grey elephant and one for the red one. and tweak the return to use the new elephant variables. It will draw both elephants but they are exactly over each other so you only see the red one.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


Elephant Measure = 
 // svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""

 // Coloured Elephants
 var grey_ele = "" & [EleSVG] & ""
 var red_ele = "" & [EleSVG] & ""

return
 svg_start & grey_ele & red_ele & svg_end

Clip the Red Elephant

We now want to only show a percentage of the red elephant based off a percentage measure, e.g. work complete. For this we need to create a clip-path. A clip-path defines which part of the shape will be visible. So in this case it will be a rectangle starting at 0,0 and will be height = 100 and width = percentage measure * 100.

So we create a variable to calculate the width and then a variable to store the defs tag that contains the clip-path. The red_ele variable is then tweaked to include a reference to the clip-path and the return is changed to include the defs variable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


Elephant Measure = 
 // svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""

 // defs
 var clip_width = [Work Complete] * 100 
 var defs = "
 
 "

 // Coloured Elephants
 var grey_ele = "" & [EleSVG] & ""
 var red_ele = "" & [EleSVG] & ""

return
 svg_start & defs & grey_ele & red_ele & svg_end

Now we have 2 measures, one that calculates a percentage and one that shows that percentage in colour.

Filling from the bottom up

The above example fills from the left. It is the easiest to calculate but if someone was asked to draw this idea they would probably fill in the colour from the bottom up.

Our icon is in a square which goes from 0,0 and is 100 wide and 100 tall. If we wanted to show 25% full the clip path would need to be 0,75 and 100 wide and 25 tall. So 2 values change the height is 25 = 100 * 25% and the starting y is 75 = 100 – height.

So to fill from the bottom I need to change the defs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


Elephant Measure = 
 // svg essentials
 var svg_start = "data:image/svg+xml;utf8,"
 var svg_end = ""

 // defs
 var clip_height = [Work Complete] * 100 
 var clip_y = 100 - clip_height
 var defs = "
 
 "

 // Coloured Elephants
 var grey_ele = "" & [EleSVG] & ""
 var red_ele = "" & [EleSVG] & ""

return
 svg_start & defs & grey_ele & red_ele & svg_end

Conclusion

This gives us a quick visual measure to show a percentage using an SVG icon.

SVG in Power BI Part 2 – KPI Shapes

Sun, 28 Apr 2019 21:59:41 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

In this post I will show to use SVG to create simple KPI Indicators. In this example I have very simple data of a list of 5 shops with Turnover and Costs. I have added a measure for Profit Margin as a percentage.

Create SVG Measure

We shall start with a simple SVG image of a dot and show how to create an SVG measure to use in a table.

Create a measure to store the SVG in a string.

1
2
3


RedDot = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> 
 <circle cx='50' cy='50' r='40' fill='red' /> 
 </svg>"

Prefix the SVG with code to declare that it is an SVG image.

1
2
3
4


RedDot = "data:image/svg+xml;utf8," &
 "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> 
 <circle cx='50' cy='50' r='40' fill='red' /> 
 </svg>"

On the Modelling ribbon tab, change the measure’s data category to Image URL.

Insert measure into a table. You will need to turn off the totals to make the total line not show svg code. I will fix this in a later post.

Change to be Reactive

The above example puts a red dot on every line. We will now adapt the measure to change the colour depending upon the measure Profit Margin measure to make this into a KPI shape.

We use a variable to store the colour and its value comes from an IF statement.
We insert the colour into the SVG statement
We return the SVG

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


KPI Dot = 
// Calculate the colour
var colour = IF([Profit Margin]>0.25,"Green","Red")
// Insert colour into SVG
var svg = "data:image/svg+xml;utf8," &
 "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> 
 <circle cx='50' cy='50' r='40' fill='" & colour & "' /> 
 </svg>"

RETURN svg

Up and Down Arrows

The above example changed a colour which is okay but it would be better if we could also change the shape of the icon. For this example I use another measure of Growth which compares Turnover to previous turnover. If the Growth is positive I want to display a green up arrow and if negative a red down arrow.

Set up variables for an up and down arrow
Select which arrow to use
Insert the arrow into the svg
Return the svg.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


Arrow = 
// Variables to store arrow paths
var uparrow = "<path d='M10 90 L50 10 L90 90 Z' fill='green' />"
var downarrow = "<path d='M10 10 L50 90 L90 10 Z' fill='red' />"

// Select arrow to use
var arrow = IF([Growth]>=0,uparrow,downarrow)

// Insert arrow into SVG
var svg ="data:image/svg+xml;utf8," &
 "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"
 & arrow & 
 "</svg>"

RETURN svg

Conclusion

This gives an introduction of using SVG within Power BI to create KPI shapes. There is lots more that could be done with SVG and this series will continue to add more features using svg.

SVG in Power BI - Part 1 SVG Basics

Mon, 22 Apr 2019 17:23:04 +0000

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

Introduction to SVG Basics
KPI Shapes in Power BI
Filling up with colour using SVG in Power BI
Using Text in SVG
Using SVG Rotate to create a dial in Power BI
SVG Icons in Conditional Formatting
Using a Theme to add SVG Icons
Feb 2023 Update - 5 SVG Stars

This post introduces the very basics of SVG. If you already know SVG, move along to my second post in this series.

SVG Basics

Before I get into the technical details of what SVG is, let me explain why SVG images are important. If you enlarge many image formats enough, they become fuzzy and pixelated. Because an SVG image is made up of lines and shapes defined by points, sizes, and colours, you can stretch them as big as you like and they stay sharp.

SVG stands for Scalar Vector Graphics, which is an XML-based markup format that can contain two-dimensional vectors.

Elements can be defined with an opening tag and a closing tag, for example <svg>...</svg>, or in a single self-closing tag, for example <rect ... />.

Example

1
2
3
4


<svg xmlns='http://www.w3.org/2000/svg'
 viewBox='0 0 100 100'>
 <circle cx='50' cy='50' r='40' fill='red' />
</svg>

The above example defines an area where the top-left is 0,0 and the bottom-right is 100,100. It contains a red circle with center at 50,50 and radius 40.

If an SVG statement contains more than one element, they are layered with the first item at the back and the last item at the front.

SVG Paths

The previous example drew a circle, and you can draw rectangles with <rect ... /> as well. The next step from SVG basics is drawing more complex shapes. For this, you need to define points, curves, and arcs. One method is the path element.

In a path element you can move the pen, draw lines, arcs, and curves. Below is a simple example that draws a green triangle.

1
2
3
4


<svg xmlns='http://www.w3.org/2000/svg'
 viewBox='0 0 100 100'>
 <path d='M10 90 L50 10 L90 90 Z' fill='green' />
</svg>

SVG Icons

Lots of icons available on the web are written in SVG and many can be downloaded. Be aware of copyright and always give credit where credit is due.

If you have PowerPoint you can insert icons onto a slide and save as a picture, which gives you SVG code.

SVG Resources

This has been a very short introduction to SVG. There are plenty of resources to assist in composing SVG creations.

W3Schools

W3Schools is a great resource to get started in SVG. The reason I return again and again is the Try It Yourself button, which gives a simple place to test your SVG.

Jenkov’s SVG Tutorial

This is a great site for learning different parts of SVG and how it works, including videos.

Conclusion

This was a brief introduction to SVG. It is a language worth understanding the basics of, and hopefully through this series you will find a new way to visualize your data.

SVG on Hat Full of Data

Power BI – Improve a card with SVG

Starting Point

Create the SVG Measure

Measure Data Category

Add SVG to the Card

Accessibility

Even More Tricks

References

Conclusion

Power BI – 5 Stars SVG

YouTube Version

Draw 1 Star SVG

Draw 5 Stars SVG

Grey Star Outlines

Define Clip Path

Draw Clipped Gold Stars

Conclusion

More Power BI Posts

Power BI Series

Power Apps – 12 Days of Components

Day 1 – Create a Component

Day 2 – Add an Input

Day 3 – Use Table Input

Day 4 – Use SVG Transform

Day 5 – Flexible Resizing of SVG

Day 6 – Patterned Presents

Day 7 – Add a Tag using SVG Text and Rotate

Day 8 – Star Rating

Day 9 – Fill a shape using SVG Clip

Day 10 – Fill Part stars using SVG Clip

Day 11 – Draw a Gauge

Day 12 – Add Colours to that Gauge

Conclusion

More Power Apps Posts

Power Apps – Animating SVG Fill Colour and Size

Series

Selecting Fill Colour

Animating SVG Size

Animating SVG Colour

PowerApps – Function Component

Calculation Details

Create the Function Component

Using the Function Component

Conclusion

Update

More Power Apps Posts

PowerApps – SVG Introduction

Series

SVG Introduction

Using SVG in a PowerApp

More Complex SVG images.

Conclusion

More Power Apps Posts

SVG in Power BI Part 7 – Using a Theme File to add SVG Icons

Series

Overview of Theme Files

Adding New SVG Icons

Conclusion

SVG in Power BI Part 6 – New Icon Conditional Formatting

Series

Quick Overview of Icon Conditional Formatting

Conclusion

SVG in Power BI – Part 5 – Using SVG Rotate

Series

Simple Dial

Show the Value

Adding Colours

Conclusion to SVG Rotate

SVG in Power BI – Part 4 – Adding SVG Text

Series

Simple Text Element

Aligning SVG Text

My KPI Visual

My KPI in a Table

Conclusion

SVG in Power BI – Part 3 – Fill SVG Icon with Colour

Series

Getting Icon Code

Draw 2 Elephants