Timeline-holidays template timeline_node.svg image not working on iPhone

[spoCloud]

Sample

timeline-holidays

Author(s)

@VesaJuvonen

What happened?

I added the timeline-holidays template to a Viva adaptive card and deployed it to our Viva dashboard. The timeline_node.svg image works fine in desktop browser, but did not display on iPhone. I found this article that says .svg files are not yet supported on quick views on mobile. SharePoint/sp-dev-docs#7541. So I converted timeline_node.svg to .png, It looks fine in desktop browser, but on iphone, the timeline_node.png image is displayed in much smaller size, and does not align vertically with the first line of text.

Steps to reproduce

1. Add the timeline-holidays template to a card and deploy the card to viva dashboard
2. View the card on iPhone, the timeline_node.svg image does not show up
3. Convert timeline_node.svg to .png, re-deploy, view the card on iPhone, the timeline_node.png image does show up, but is displayed in very small size, and does not align with first line of text vertically

Expected behavior

timeline_node.svg ( or .pgn ) should work the same way in both desktop browser and on mobile

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Node.js version

v14.18.1

Additional environment details

@microsoft/generator-sharepoint@1.14.0