Guide for Animating SVGs in Adaptive Cards: Step by Step

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 svgur.com. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 1, 2022.

Supporting materials

• Example – a Pen by Kristine Kolodziejski
  https://codepen.io/powerpuffkk/pen/oNdvmJj
• Images – svgshare (share SVG vector files)
  https://svgur.com/

Other Links:

• UI Gradients
  https://uigradients.com/#PunYeta
• Mozilla Developer SVG Guide
  https://developer.mozilla.org/en-US/
• Bootstrap Icons
  https://icons.getbootstrap.com/