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
Introducing Microsoft 365 Copilot APIs
Learn how Microsoft 365 Copilot APIs allow you to build solutions grounded in your organization’s content, context, and permissions, without n...
Microsoft Teams: Set New Ringtones in Teams Mobile
Microsoft Teams Mobile (iOS and Android) will soon allow users to customize ringtones for different types of calls, including forwarded and de...
Microsoft Viva Learning: Auto Save and Draft mode for learning paths
Microsoft Viva Learning will introduce Auto-Save and Draft modes for learning paths in May 2025. These features require a Viva Learning Premiu...
Microsoft 365 admin center: Onboard SharePoint agents as a Pay-as-you-go scenario
Starting June 2025, Microsoft 365 administrators can set up pay-as-you-go billing for SharePoint Agents via the Copilot Control System. Admins...
Microsoft Viva Insights: People Skills insights for analysts
Microsoft Viva Insights will soon introduce the Skills landscape report in the advanced insights app, available via Power BI. This report help...
Microsoft 365 Copilot Gets Viva Insights Service Plans
Two new service plans are now in the Microsoft 365 Copilot license to allow users to access to Viva Insights. The new service plans enable the...
Use Large SharePoint Files As Knowledge In Copilot Studio Video
Copilot Studio Agents cannot read files in a SharePoint document library over 7MB. But we ... The post Use Large SharePoint Files As Knowledge...
Microsoft SharePoint: New web part for FAQs powered by Microsoft 365 Copilot
Microsoft SharePoint will soon have a new dynamic web part for FAQs powered by Microsoft 365 Copilot, rolling out in June 2025. It will automa...