SVG Images in Power Apps

In this article I’ll show you how to use SVG images in Power Apps. You will learn why SVG is the best image format for Power Apps and where to find icons for your app. I’ll also answer the most frequently asked questions about how to change SVG image styles such as: color, fill, hover and selected fill.

Table of Contents
Why should I use SVG?
Where can I find SVG Images for Power Apps?
How Do I Add SVG Images To Power Apps?
Can I Extract Code From An SVG File?
How Can I Change SVG Color?
How Can I Change SVG Fill?
How Do I Change SVG Hover?
How Do I Change SVG Fill When Selected?

Why should I use SVG?

There are 3 reasons why you will want to choose SVG images for your app over other popular image types such as JPEG.

• Scalability – SVG images look crisp and clear at any size. You can scale them up-or-down without any loss in quality. An SVG with the dimensions 50 x 50 pixels will still appear the same when increased to 200 x 200 pixels. Enlarging a similar JPEG would cause the picture to become blurry.
  
  
• File-size – SVGs have a relatively small file-size. This results in faster load times on the screen and a lesser impact on the app’s size. At its most basic an SVG file stores instructions on how to draw lines/shape to form and images. Unlike JPEGs, SVGs do not have to include information about every pixel in the image.
  
  
• Transparency – the SVG format allows a transparent background. Images with a see-through background are more versatile because they do not have to be altered to match an app’s theme. JPEG images do not allow transparency.

Where Can I Find SVG Images To Use In Power Apps?

The most popular SVG icon sets are:

• Fluent UI
• Font Awesome
• Material Design
• Bootstrap

How Do I Add SVG Images To Power Apps?

For this example we will use the Bootstrap SVG Icon set. Go to the Bootstrap website and click on an SVG to include in our app. I have chosen the funnel-fill icon.

Locate the SVG code and copy it to the clipboard. SVG code looks like this.

Then insert and Image control in Power Apps and paste the code into the Image property. Make these changes to the SVG code so it looks like the example below.

• Add the file type to the beginning data:image/svg+xml;utf8,
• Paste the SVG code inside an EncodeURL function
• Replace any double-quotation marks (“) in the SVG with a single quote (‘)
  
  
  

"data:image/svg+xml;utf8, "&EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill' viewBox='0 0 16 16'>   <path d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z'/> </svg>
")

The SVG will now appear in Power Apps.

Can I Extract Code From An SVG File?

Yes, we can obtain the code from an SVG file you have found on the internet. But perhaps the bigger question is ‘why would we want to find the code when we can already upload the image to Power Apps as media?’ The answer is an SVGs color and other properties can be changed by editing its code. I will explain how to do this shortly.

Download the same icon as an SVG file.

Right-click on the file and open it with Notepad.

We can now see the SVG file’s code and copy it into Power Apps. Make sure to do the same edits are we learned earlier for the image to show.

How Can I Change SVG Color?

The Image control in Power Apps does not have any Color property so we must edit the SVG directly. Add a fill property to the SVG as shown below with a hex value to indicate the color.

"data:image/svg+xml;utf8, "&EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill' viewBox='0 0 16 16'>   <path d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='#0000FF'/> </svg>
")

The SVG icon will now have a different color

How Can I Change SVG Fill?

We likely could edit the SVG code to display a different background color. But I suggest you do it the easy-way. Simply place a label behind the image with your desired fill color.

Another option is to use a button to achieve a square with rounded corners by setting all border radius properties to 10 or a circle by setting all border radius properties to 180. Make sure to also change the DisplayMode property to DisplayMode.View to eliminate any button effects.

How Do I Change SVG Hover?

SVG code cannot be used to defined the hover-state because Power Apps only supports inline CSS. The hover property is only allowed in a style or class. Due to this restriction it will not be possible to change the color of the icon. There is no workaround for this.

The next-best app design decision is to make a hover-fill on top of the whole icon and background. Place a transparent label over top of the image with the HoverFill property shown below.

Now when you mouse-over the icon it will appear as a slightly lighter color.

How Do I Change SVG Fill When Selected?

Changing the fill color is an excellent way to indicate whether an icon has been pressed. Create a variable called locSelectedIcon within the OnSelect property of the transparent label. When the icon is pressed the variable will store the name of the icon.

Then write an IF statement in the Fill property of the background label to show a color when the variable name is “Filter”, otherwise, transparent.

Now the icon will have a different background color when clicked.

Questions?

If you have any questions or feedback about SVG Images In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.