How to animate SVGs in Adaptive Cards
Sep 21, 2022 12:00 AM

How to animate SVGs in Adaptive Cards

External YouTube Channel

In this 14-minute developer-focused demo, Kristine Kolodziejski shows how to animate a basic SVG and add the animated file to an Adaptive Card.

Why use animation, what is structure of an SVG and what are SVG animation options (JS, CSS and SMIL)? See the mechanics of adding an SVG to an Adaptive Card, host limitations, and workarounds.

In demo, animate with CSS keyframes because supported by every browser and mobile. Encode SVG in Adaptive Cards Designer or host it on site like This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 1, 2022.

Supporting materials

Other Links: