If you’re building modern business apps with PowerApps, visual design and data visualization are becoming increasingly important. But what if you want to use custom SVG graphics — like icons, shapes, or diagrams — without manually embedding every single SVG code block into your app?In this blog, I’ll show you a simple and reusable approach:Use…
🔍 Why SVG?
SVG (Scalable Vector Graphics) is a lightweight, text-based image format. Because PowerApps allows rendering SVG via the HTMLText control, you can:
- Create dynamic and scalable visuals
- Customize shapes, icons, or charts based on data
- Avoid pixelation or image distortion
🛠️ Step 1: Extract SVG Code to Excel Using Power Automate Desktop
🔧 What you need:
- A folder containing your
.svgfiles - Power Automate Desktop
- Microsoft Excel
⚙️ Process Flow:
- Get Files in Folder
Use the “Get files in folder” action to loop through your SVG directory. - Read File Contents
For each file, use “Read text from file” to extract the raw SVG code. - Launch Excel & Write Data
Open or create an Excel file. Use “Write to Excel worksheet” to insert each SVG code into a new row, along with optional metadata like filename or tags.
Tip: Make sure the SVG code goes into a column named something like SVGCode.
📲 Step 2: Import the Excel Table into PowerApps
- Upload the Excel file to OneDrive or SharePoint.
- In PowerApps Studio, go to Data > Add data, and connect to that Excel file.
- Create a Gallery to list the records (e.g., by file name).
- Insert an Image control inside the gallery.
- Bind the control like this:
"data:image/svg+xml;utf8, "&EncodeUrl(ThisItem.Value)Voilà! The SVG renders directly on the screen.
🎯 Use Cases
- Custom status icons based on data
- Visual process diagrams
- Interactive dashboards
- Embedding logos or illustrations from a central source
📝 Tips and Considerations
- Escape characters: Ensure there are no invalid characters in the SVG that might conflict with PowerApps rendering.
- Sizing: You may need to set
viewBox,width, andheightin the SVG to control how it displays. - Performance: For large SVGs, preview performance may vary — test across devices.
✅ Benefits
- Low-code: No complex parsing or HTML work required
- Reusable: Add/update SVG files easily — just refresh the Excel connection
- Separation of content and app logic: Designers can manage SVGs, while makers build apps
🎥 Watch the Demo
I’ve included a short video showing the whole flow — from file to app, end-to-end. Check it out and let me know what you think!
Let me know if you’d like the sample SVG files, Excel structure, or Power Automate Desktop flow — happy to share! 💬