What is SVG?
SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. Unlike raster images (like PNG or JPG), SVGs don’t lose quality when scaled, making them perfect for responsive and sharp UI designs.
Key Benefits of SVG:
-
Scalable without losing quality.
-
Lightweight compared to image files.
-
Customizable using CSS or inline styles.
-
Supports interactivity and animations.
-
Ideal for icons, shapes, progress indicators, graphs, etc.
How to Use SVG in Power Apps – Step by Step
Step 1: Get Your SVG Code
You can get SVG code from:
Step 2: Convert SVG to a Data URI (if needed)
You can use tools like:
https://yoksel.github.io/url-encoder/
Example:
Step 3: Insert Image Control in Power Apps
Power FX:
Step 4: Make It Dynamic (Optional)
You can build dynamic SVGs using concatenated strings in Power Fx.
Add Label control.
Example:
power FX
This allows SVG text or colors to change based on app input!
Step 5: Style & Integrate in UI
-
You can layer SVGs over buttons or backgrounds.
-
Use them as icons, progress indicators, status badges, or visual feedback.
Dynamic SVG Examples:
Example 1: Display Dynamic SVG Text in Power Apps
-
Insert a Text Input control and name it TextInput1.
-
Insert an Image control onto the screen.
-
Select the Image control, and in the Image property, paste the following code:
"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='500' height='100' xmlns='http://www.w3.org/2000/svg'>
<style>
.hello-text {
opacity: 0;
transform: translateX(-50px) scale(1);
fill: black;
font: bold 40px sans-serif;
animation: fadeSlideIn 2s ease-out forwards, scaleColor 1s ease-in-out 2s forwards;
}
@keyframes fadeSlideIn {
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes scaleColor {
to {
transform: translateX(0) scale(1.1);
fill: #ff5722;
}
}
</style>
<text x='50' y='60' class='hello-text'>"&TextInput1.Text&"</text>
</svg>
")
It will include animation and display similar to the example shown in the image below.
Show Dynamic Progress Circle Using Slider Value
Insert a Slider control and name it Slider1
.
Insert an Image control onto the screen.
Select the Image control, and in its Image
property, paste the following code
"data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
<style>
.progress-bg {
fill: none;
stroke: #eee;
stroke-width: 10;
}
.progress-bar {
fill: none;
stroke-width: 10;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: 314;
stroke-dashoffset: 314;
animation: fillProgress 2s ease-out forwards;
}
@keyframes fillProgress {
to {
stroke-dashoffset: "&Text(314 - (Slider1.Value * 3.14))&";
}
}
</style>
<circle class='progress-bg' cx='60' cy='60' r='50' />
<circle class='progress-bar' cx='60' cy='60' r='50' stroke='"&If(
Slider1.Value < 20, "red",
Slider1.Value < 40, "yellow",
Slider1.Value < 60, "#bada55",
Slider1.Value = 100, "green",
"#00bcd4"
)
&"'/>
<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20' fill='#333'>
"&(Slider1.Value)&"
</text>
</svg>
")
The output will appear as shown in the image below.
Example 3: Loading Animation Using a Timer
Insert a Timer control and name it Timer1
.
Set its Duration property to 5000
(for 5 seconds).
Set the Repeat property to true
and AutoStart to true
to keep the animation looping.
Insert an Image control onto the screen.
In the Image
property of the Image control, paste the following code
"data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
<style>
.track {
fill: none;
stroke: #eee;
stroke-width: 10;
}
.progress {
fill: none;
stroke: #2196f3;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 314;
stroke-dashoffset: "&Text(314 - (Timer1.Value / Timer1.Duration) * 314)&";
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.1s linear;
}
.label {
font-size: 20px;
fill: #333;
text-anchor: middle;
dominant-baseline: middle;
}
</style>
<circle class='track' cx='60' cy='60' r='50' />
<circle class='progress' cx='60' cy='60' r='50' />
<text x='60' y='60' class='label'>"&Text(Round(Timer1.Value / 1000, 1) & "s")&"</text>
</svg>
")
ex 3.2: add another image control and paste the below code
"data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
<style>
.track {
fill: none;
stroke: #eee;
stroke-width: 10;
}
.progress {
fill: none;
stroke: #2196f3;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 314;
stroke-dashoffset: "&Text(314 - (Timer1.Value / Timer1.Duration) * 314)&";
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.1s linear;
}
.label {
font-size: 16px;
font-family: Calibri, sans-serif;
fill: #333;
text-anchor: middle;
dominant-baseline: middle;
}
</style>
<circle class='track' cx='60' cy='60' r='50' />
<circle class='progress' cx='60' cy='60' r='50' />
<text x='60' y='65' class='label'>Loading...</text>
</svg>
")
The output will appear as shown in the image below.
Example 4: Rating Animation Using Dropdown
-
Insert a Dropdown control and name it Dropdown1
.
-
Set its Items property to Sequence(5,1,1)
Insert an Image control onto the screen.
-
In the Image
property of the Image control, paste the following code:
"data:image/svg+xml;utf8,"&EncodeUrl(Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
svgTemplate,
"STAR1", If(Value(Dropdown1.Selected.Value) >= 1, "filled", "")
),
"STAR2", If(Value(Dropdown1.Selected.Value) >= 2, "filled", "")
),
"STAR3", If(Value(Dropdown1.Selected.Value) >= 3, "filled", "")
),
"STAR4", If(Value(Dropdown1.Selected.Value) >= 4, "filled", "")
),
"STAR5", If(Value(Dropdown1.Selected.Value) >= 5, "filled", "")
)
)
On App.Onstart Propert add the below code
Set(svgTemplate,"<svg viewBox='0 0 250 50' width='250' height='50' xmlns='http://www.w3.org/2000/svg'>
<style>
.star {
fill: #ccc;
transition: fill 0.3s ease, transform 0.3s ease;
}
.star.filled {
fill: gold;
animation: brighten 0.5s ease forwards;
}
@keyframes brighten {
0% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.2); filter: brightness(1.5); }
100% { transform: scale(1); filter: brightness(1.2); }
}
</style>
<!-- Repeat 5 stars -->
<g transform='translate(0, 0)'>
<polygon class='star STAR1' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
</g>
<g transform='translate(50, 0)'>
<polygon class='star STAR2' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
</g>
<g transform='translate(100, 0)'>
<polygon class='star STAR3' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
</g>
<g transform='translate(150, 0)'>
<polygon class='star STAR4' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
</g>
<g transform='translate(200, 0)'>
<polygon class='star STAR5' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
</g>
</svg>
")
The output will appear as shown in the image below.
Comments
Post a Comment