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
Fix to respect Cloud Policy settings for Auto-create Loop workspaces for Teams meetings feature
Microsoft Teams just rolled out an update that enables the platform to respect Cloud Policy settings for the 'Auto-create Loop workspaces for ...
Microsoft Teams: Best practices configuration dashboard in Teams admin center
Microsoft Teams is set to introduce a Best Practice Configurations monitoring dashboard in the Teams admin center, designed to help administra...
Microsoft 365 app: Microsoft Loop – New personal Loop workspace
The Microsoft Loop app is bringing a new personal workspace to its users, which will function as a user-owned SharePoint container, and will h...
Microsoft Loop – Microsoft 365 Groups for Managing New Loop workspaces
Microsoft 365 Groups can now be used to manage new Loop workspaces, ensuring efficient governance and compliance similar to SharePoint Team si...
Microsoft Loop – Require Existing Microsoft 365 Group for New Loop workspaces
In a bid to streamline and improve the management of Loop workspaces in Microsoft 365, new workspaces will now require a connection and manage...
Microsoft Purview compliance portal: Information Protection – SharePoint Online extends library permissions to downloaded files.
Microsoft Purview's Compliance Portal has announced a new feature for SharePoint Online that enables extending library permissions to download...
Microsoft Recommends the UnifiedRoleDefinition Graph API for Role Assignment Automation
Microsoft recommends that developers move from the older DirectoryRoles Graph API and use the UnifiedRoleDefinition API instead. Changing APIs...
Microsoft Viva Engage: Unregistered users in an external network will not receive community emails
Starting from December 2024 to January 2025, unregistered users in Microsoft Viva Engage external networks will no longer receive community em...
Microsoft 365 app: Auto release and check-in for Microsoft Places
Microsoft is releasing new check-in options for Microsoft Teams and Places to enable users to check in via Teams Chat and email. These new opt...