SVG images are not working in the QuickView card in Viva Connections Mobile (Teams app)

[Rafaelki]

The SVG images are being loaded correctly in the dashboard when using the desktop browser. They also work in the the dashboard in Teams app on the phone except when they are placed in the QuickView.

DESKTOP:

MOBILE:

CODE SAMPLE:

{
 type: "Column",
 width: "auto",
 items: [
   {
     type: "ActionSet",
     actions: [
       {
         type: "Action.Submit",
         iconUrl: require('../assets/ArrowIcon.svg'), //NOT working in Teams
         title: strings.ViewButton,
         style: "positive",
       }
     ]
   }
 ]
}

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 85245633-6fa2-0c62-7d63-17a6245a3da2
• Version Independent ID: 85245633-6fa2-0c62-7d63-17a6245a3da2
• Content: Known issues for Adaptive Cards in Viva Connections Mobile
• Content Source: docs/spfx/viva/known-issues-adaptive-cards.md
• Product: sharepoint
• Technology: sharepoint-framework
• GitHub Login: @VesaJuvonen
• Microsoft Alias: vesaj

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patmill]

Thanks @Rafaelki - looking into this. One question - do you have the public CDN enabled in your tenant?

[Rafaelki]

Thank you @patmill . No, I don't have the CDN enabled in my tenant

[PooLP]

I have the same problem with a different implementation of SVG :

public get data(): IImageCardParameters {

const image = `data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100%' height='100%'>
        <g>
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </g>
      </svg>`;

const icon = `data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100%' height='100%'>
        <g>
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </g>
      </svg>`;

    return {
      primaryText: 'primary text',
      title: 'Shortcuts',
      imageUrl: image,
      iconProperty: icon
    };
  }

it's work in web browser and desktop app, but not in mobile app.

[Mikhail2k15]

@patmill looks like svg images are not working at all on iOS on Card View, Quick View. It doesn't matter whether it base64 embedded image or not.

[Zaidos9]

Full SVG support on mobile is in backlog and we are working on it. Please expect the next update in April.

[PooLP]

Hi @Zaidos9 , any news for this ? I have tested today, and the ACE with SVG do not appear anymore for me.
Why @anoopt have closed this unresolved bug ?

[anoopt]

@PooLP - this issue is still open.

Whereas a related issue - Viva Connections - Multiple issue with images in Microsoft Teams is closed by Microsoft (not by me :) )

[PooLP]

ok, sorry.
I commented a little quickly and angry. The lack of responsiveness and transparency for resolving bugs is getting heavy. (ex : #6477)

[AJIXuMuK]

@PooLP - I'm really sorry some issues are stuck for a long time.
We're doing our best to triage and update the issues regularly. But some of them may be cross-team/cross-org.
And that leads to a longer investigation/fix process.
We could reply "we're still looking into it" but I don't think it'll make the life easier.

[PooLP]

@AJIXuMuK, you don't need to apologize, MS engineers like you are also in an unpleasant position, but Microsoft will have to understand that it is annoying that a bug detected and checked can take several months or even years to be resolved and that the lack of communication does not help.

[PooLP]

@Zaidos9 @AJIXuMuK any news ? it's not resolved for me.

[johnguy0]

@Zaidos9 Can you provide an update?

[alexc-MSFT]

Any update on this issue please? I have Card Designer card with an SVG in the quick view which will not render on the mobile dashboard (iOS). Looks like it's been at least 6 months with no update. Is this support coming?

Thanks

[PooLP]

SVG, Fluent UI icon, UI/IX bug on mobile ... MS is slow or incompetent (both ^^)

[frags51]

@alexc-MSFT @anoopt @PooLP - This issue should have been fixed now. Could you please confirm if you are still seeing this behavior?

[PooLP]

Hi, After fast test, SVG image (link) work, but the base64 didn't work.

I will update my project to SPFx 1.17.2 to see if that fixes the problem.

[PooLP]

it's ok for me after update to SPFx 1.17.2 !

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues