Display SVGs with multiple paths in a SharePoint list
I had this neat idea that depending on a value in a number column, the field would show a plant - a very small one for value 1, and then increasingly growing with more leaves up to value 4. To get you an idea on how to achieve this, here is the end result:
The SVGs 🪴
What we need for that is of course four similar SVGs. This is how I did that:
- I found mine on Canva
- separated them into individual SVGs,
- downloaded the files
- opened them in Edge
- hit the F12 key on my keyborad to inspect them
- extracted all the paths
dandfill-colorvalues
The List
Now let’s head over to SharePoint and
- Create a number column in a list - mine is called Progress
- If you want to, you can limit values to from
1to4 - Select your field > Column settings > Format this column
- Select Advanced mode
- Delete the code in the box and paste the code you can find in this file (it’s nearly 800 lines, I will not make everyone scroll in here).
How the magic works
Let me explain what I did here:
I defined 4 svg elements, each of them carrying multiple paths of the SVG, being displayed under the condition of which value the field Progress shows. Each child item contains then a path with attributes: data (d) and a style with a fill property:
{
"elmType": "path",
"attributes": {
"d": "M 367.652344 905.644531 C 367.652344 905.644531 403.539062 879.605469 423.945312 855.675781 C 423.945312 855.675781 426.054688 856.378906 423.945312 859.898438 C 415.5 872.566406 390.871094 907.050781 371.871094 928.164062 C 371.167969 928.164062 366.242188 913.382812 367.652344 905.644531 Z M 367.652344 905.644531"
},
"style": {
"fill": "#9cc23c"
}
}
We need such a child item for each path of the SVG that we want to display. Then it is just a question of copy-pasting the data attribute and the color into the respective fields - Boom - done!
Conclusion
Takes a bit of perseverance, but the result is rather stunning!
Published on:
Learn moreRelated posts
Streamlined file preview experience in Microsoft 365 Copilot app for iOS
Microsoft 365 Copilot iOS app will offer file previews and Copilot Chat for Word, Excel, and PowerPoint files starting September 15, 2025, on ...
Microsoft 365 admin center: New usage intensity and host apps metrics available in Copilot Chat usage report
New Microsoft 365 admin center metrics track Copilot Chat usage intensity and app-specific engagement for users without Copilot licenses acros...
Live events using Microsoft Teams town hall in Viva Engage
Microsoft is rolling out an enhanced Teams town hall experience in Viva Engage for live events starting September 2025. Community admins can c...
Manager insights now in Viva Insights web app, with new team view for Copilot Dashboard
Manager insights in the Viva Insights web app will centralize manager tools, including a team-scoped Copilot Dashboard, additional reports, de...
Gen AI capabilities in the Create module of Microsoft 365 Copilot app coming to all Copilot Chat users
Microsoft 365 Copilot’s Create module now offers generative AI image and visual content creation to all Copilot Chat users without a lic...
Microsoft Copilot (Microsoft 365): Preview and chat with Microsoft Word, Excel, and PowerPoint files in the Microsoft 365 Copilot app on iPhone
When opening a Microsoft Word, Excel, or PowerPoint file in the Microsoft 365 Copilot app on iPhone, users will get a preview experience where...
Microsoft Teams: Dynamic video tile resizing based on occupancy count from Teams Rooms on Android
The room video tile dynamically adjusts size based on the number of people in the room. When one person is in the room, the tile matches the r...
Microsoft Copilot (Microsoft 365): Initiate Copilot Chat by sharing files to the Microsoft 365 Copilot app on iPhone
When users on iPhone choose the action to share a Word, Excel, or PowerPoint file from a third party app (including Files) and choose Microsof...
Microsoft Copilot (Microsoft 365): Preview and chat with Microsoft Word, Excel, and PowerPoint files in the Microsoft 365 Copilot app on iPhone
When opening a Microsoft Word, Excel, or PowerPoint file in the Microsoft 365 Copilot app on iPhone, users will get a preview experience where...