PowerApps – SVG Introduction

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.

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

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

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 <svg….> and </svg> 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.