Hola Folks ... In this first article posted by me, we will be learning how to use Vector(SVG) images available on internet or locally in our Power Apps along with learning replacement for existing images to vector.
Whenever we develop any website or design any web page, we do add images in them so as to enhance the UI factor in them. But consider you are using this image as a logo or any icon, and your image is too small, it will be distorted once it is zoomed. To overcome this issue, we generally use Vector(SVG) images, which usually retain pixels even on zooming and thus avoid distortion.
Coming back to Power Apps, while developing app in our Power Apps, we generally use 'Image' control to insert any image like below and usually add the image file in Power Apps gallery for further use of image.
![]()
Now, if we zoom the image in our app, it distorts(kind of blurred), like below
![]()
To avoid this, the alternative option would be to use Vector image which would maintain its high-resolution image capability by zooming the image. So, let's see how to use vector image in Power Apps.
Step 1 - Identify your image
Search for any vector image online or you can also have it on your local system. The format of vector image would be always in '.svg', like 'panda.svg', 'icon53.svg' etc.
Step 2 - Convert it to base64 format
Next step is to convert svg to base64 format. There are so many sites, but I would prefer Base64Guru site. Choose either 'local file' or 'remote url' as per your file source availability. Then, in output format, select 'Data URI -- data:content/type;base64' and hit 'Encode SVG to Base64' button. Copy the data URI generated in 'Base 64' section.
![]()
Step 3 - Paste Data URI content into Power Apps Image control
Paste the copied content of data URI into 'Image' property of 'Image' control in Power Apps.
![]()
And Bingo !!! There you go with high-resolution vector image even when zoomed.
![]()
In this way, you can paste any vector image data URI in the image control and get high-resolution images for your app. You can even use data URI format of any other image and use it in image control instead of uploading directly from the apps.
I hope you liked this tip which would be very useful in developing and designing your Power Apps.
Image Attribution: Panda is exercising with dumbbell Icon on IconScout