Ever wanted to add fun animations and visualizations to increase the appeal of your app? Power Apps supports SVGs to make your apps prettier and easier to use. Whether it’s progress bars you’re after or objects that change with user-inputted text, SVGs are a simple, powerful way to make a business application pop.
In this post, we’ll take a look at how to get started with SVGs using Power Apps and explore some of the things you can do. Remember if you subscribe to our curated library, you’ll have access to download the SVG app created in our YouTube Video.
What is an SVG?
SVG stands for Scalable Vector Graphic. It’s a piece of XML code that defines a vector-based graphic meant to display on the web. In Power Apps, SVG objects are defined with the <svg> tag. Every attribute that the SVG has is then written out as code.
Unlike other image formats, SVGs have a few unique features that make them better suited to environments like apps or the web. They:
Can be created and edited with any text editor. They don’t require a fancy editing program, either.
Are scalable. They’re also zoomable and won’t lose quality if they’re expanded, resized, or printed at different resolutions.
Use an open standard. Anyone can access and implement them. That means a lot of resources and libraries exist out there.
What Can SVGs Do in Apps?
SVGs make your apps prettier and easier to use. Since it’s possible to animate every single element and attribute, there’s a lot of flexibility built right into this image format. Some common ways SVGs get utilized in business apps include:
Progress Bars
Indicators
Animations
Drop Shadows
Blur Effects
Dynamic Text Inputs
How to Use SVGs to Make Your Apps Prettier and Easier to Use
It’s easy to get started using SVGs in Power Apps. Inserting SVG codes into Power Apps is similar to inserting them into a website. To use them, follow these four steps.
Insert an Image Control in Power Apps
To insert an image control, select “Media” and “Image” on the Insert tab. This will create a block inside which the SVG will appear.
Insert SVG Code
Two ways exist to insert SVG code into Power Apps:
1. Insert code directly into the image control in Power Apps.
Replace “SampleImage” with the code for the SVG.
It might look like this:
"data:image/svg+xml,"
&
EncodeUrl("
<svg height ='100%' width='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' />
</svg>
")It’s easiest to drop a new SVG code between the <svg> tags, although the first lines will remain the same: "data:image/svg+xml,"
&
EncodeUrl(". Remember to switch all double quotes to single quotes when pasting code from another source. Likewise, the dimensions of viewBox might require some adjustment.
Plenty of SVG code libraries also exist online. Consider these options to get started:
2. Insert an SVG file.
Instead of inserting the code into the app yourself, you also have the option to download an SVG file and upload it into your app. After inserting the image control, choose the “Image” dropdown under the properties pane on the right hand side of the screen. Then choose “+ Add an image file.” Select an SVG file to insert a scalable vector onto the page.
Modify the Properties
After grabbing the code, modify the properties as necessary. SVG code can consist of either XML code or CSS-like code. If option one was used above, this can be done directly in Power Apps. If option two was used, the SVG file itself will need to be edited.
Add Functionality
Power Apps allows the insertion of commands to change values in an SVG code. For example, to allow users to change the stroke width (border thickness) of the SVG circle above, insert a slider by visiting the Insert tab and selecting “Slider” under “Input.” Then change the SVG code in the image control to reference the output of the slider. It should look similar to this:
<circle cx='50' cy='50' r='40' stroke='black' stroke-width='" & Slider1.Value & "' fill='red' />Remember that the ‘&’ allows you to connect one thing to another. In this case, a string of code with the output from the slider element.
Get More Tips and Tricks from PowerApps911
SVGs are a great way to make your apps more visually appealing for users. They’re a good option to consider if you’re looking for impactful visuals. We’ve covered how to get started with them and provided a few useful resources to make the process simpler.
Want to take it to the next level and learn to build any business applications you might need?