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
10x Faster SharePoint Get Items In Power Automate
Power Automate can get up to 5,000 SharePoint list items in only 2 seconds by ... The post 10x Faster SharePoint Get Items In Power Automate a...
Introducing the SVG to JSON for SharePoint List formatter
In my latest blog posts, I played a lot of SVGs in SharePoint lists. For everyone who isn’t aware - Unlike other image formats like .png...
How to apply modern card design in a SharePoint list with listformatting
I wanted to explore if I could implement a nice overview card in a SharePoint list column, that would display at a glance for example customer...
Power Automate – Create a flow on a file in Teams feature
Power Automate has released a new feature that allows users to create a flow on a file in Teams, which enables workflows to be set up and used...
Microsoft Viva Glint and Viva Insights integration for sentiment and collaboration data
Microsoft Viva Glint and Viva Insights are joining forces to provide a comprehensive view of sentiment and collaboration data. The integration...
Viva Insights – Analyst query notification email
Microsoft Viva Insights is launching a new feature that will enable Analysts to receive an email notifying them of the status of their recent ...
Viva Learning – Private thumbnail using SharePoint links for courses
This post talks about Private thumbnail using SharePoint links for courses which can be displayed at Viva Learning. The Microsoft Viva product...
Viva Insights – New Copilot adoption metrics and completing total actions taken
Microsoft Viva has released a set of new Copilot adoption metrics and updated the "total actions taken" metric to include these new metrics. T...
Microsoft Teams: Collaborative call delegation on Teams phone devices
Microsoft Teams is making it even easier for users of Teams phone devices to collaborate on calls. Through this new feature, users will be abl...
OneDrive: Hide people previewing files in OneDrive and SharePoint
In this post, you'll learn how to disable the presence feature in OneDrive and SharePoint file previewing experience on selected sites. This s...