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
d
andfill-color
values
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
1
to4
- 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
Copying Group Membership with the Microsoft Graph PowerShell SDK
Sometimes tenants need to copy group membership from one user to another. Often PowerShell is used, but with the demise of the Azure AD module...
Microsoft Copilot (Microsoft 365): Microsoft 365 Copilot Chat for EDU customers ages 13 and older
Microsoft 365 Copilot Chat is available at no additional cost for Microsoft 365 EDU users ages 13 and older who sign in with their Microsoft E...
Microsoft Copilot (Microsoft 365): Reference an Excel file when creating a slide with Copilot for PowerPoint
You can now reference an Excel file when you create a slide with Copilot for PowerPoint. Product PowerPoint Release phase General Availability...
Researcher is available in Word for Microsoft 365 Copilot licensed users
Researcher will be available in Word for Microsoft 365 Copilot licensed users starting July 16, 2025. It combines OpenAI’s research mode...
How SharePoint Embedded works and how to build AI apps on it
Build AI-powered apps that connect directly to Microsoft 365 content without moving files or compromising security, using SharePoint Embedded....
[Beginner Guide] Microsoft 365 Copilot Chat vs Microsoft 365 Copilot
Before we begin, let’s first understand two important terms: What Are AI Hallucinations? Sometimes, AI models give answers that sound confiden...
Microsoft 365 Copilot Search General Availability
Microsoft 365 Copilot Search, an AI-powered search experience, will be generally available mid-July 2025 for eligible users. It integrates wit...
Microsoft Defender for Office 365: Ability to Disagree with admin submissions analysis
Microsoft Defender for Office 365 will allow SOC teams and admins to dispute submission results directly in the portal, improving detection ac...
Microsoft Viva | Viva Engage: Streamlined verified answers for community experts
Microsoft Viva Engage is consolidating the answer verification options for community experts into a single “verified answer” actio...