Rajeev Pentyala – Technical Blog on Power Platform, Azure and AI

In one of my previous articles : Display an SVG icon in Canvas App ,I explained how to display an SVG icon using an Image control.

While this approach works, there are two additional steps you need to take after copying the SVG content:

•  Replace the double quotes (“) with single quotes (‘)
• Set the Image property as “data:image/svg+xml;utf7,” & EncodeUrl() and pass the svg icon content modified above as parameter to the EncodeUrl() function.

Today, I came across Power Apps Tools, which allows you to bypass the two steps mentioned above and generate content that works seamlessly.

Simplified steps to display SVG in Canvas App:

• Pick the desired SVG image and copy the SVG content.

• Go Power Apps Tools > Convert SVG to FX tab.
• Paste the copied SVG content.
• Click on Convert
• Click on Copy to copy the transformed SVG content (i.e., Content with replaced ” with ‘ and well formed EncodeUrl()).

• Now that we have copied the transformed SVG content, open Canvas app.
• Add an Image control.
• Paste the copied content in to the Image property of the Image control.

With this approach, we no longer need to manually replace double quotes with single quotes or perform other steps. We can simply offload that task to the Power Apps Tool extension.

🙂