Loading...

Display SVGs with multiple paths in a SharePoint list

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:

SharePoint-plant sample

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 and fill-color values

SVG in Edge

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 to 4
  • 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 more
Luise Freese: Consultant & MVP
Luise Freese: Consultant & MVP

Recent content on Luise Freese: Consultant & MVP

Share post:

Related posts

Power Platform & M365 Dev Community Call – February 27th, 2025 – Screenshot Summary

Call Highlights   SharePoint Quicklinks: Primary PnP Website: https://aka.ms/m365pnp Documentation & Guidance SharePoint Dev Videos Issues...

9 hours ago

RealTime News Updates in SharePoint Online with SPFx

Recently, I discovered the Socket.IO endpoint in Microsoft Graph, which has enabled me to implement real-time functionality in SharePoint Onli...

12 hours ago

Copilot Interpreter Agent in Teams Meetings

This is a fascinating topic! How does that sound – enabling nearly real-time live translations in meetings? Yes, a bit like scifi but it...

14 hours ago

Microsoft SharePoint: We will retire creating personal pages from SharePoint “start” (Preview)

Microsoft will retire the ability to create personal pages from SharePoint start (Preview) between mid-March 2025 and early April 2025. Users ...

16 hours ago

Microsoft 365 Copilot: Chat sessions will have titles generated by large language models (LLM)

Microsoft 365 Copilot will use large language models to generate titles for chat sessions starting March 2025. This feature, requiring a Micro...

16 hours ago

Microsoft Teams: Meeting transcription supports multiple spoken languages

Meeting participants can now set their own spoken language during meetings, allowing each participant to communicate in their preferred langua...

16 hours ago

Microsoft Teams: Opening Calls in a small window in Teams

Allowing users to open calls in a small window to reduce disruptions in Teams. Product Microsoft Teams Release phase Targeted Release Release ...

16 hours ago

Microsoft Teams: Translated Intelligent meeting recap

Intelligent meeting recap supports meetings where multiple languages were spoken, making it easy for you to catch up quickly on the key points...

16 hours ago

Microsoft Teams: Copilot only during call

Copilot is only available during the live call session and will not be accessible after the call ends. No recording or transcription is requir...

16 hours ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy