How to Respect Reduced Motion in SVG
Honor user motion preferences when animating SVG icons and illustrations.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Detecting the Preference
Wrap SVG animation CSS in an @media (prefers-reduced-motion: no-preference) block so animations only run for users who haven't requested reduced motion, with a calm static state as the default.
- Default to a static state outside the media query
- Enable animation only inside no-preference query
- Applies to CSS, SMIL, and JS-driven SVG animation
JavaScript-Driven Animations
For JS animation libraries, check window.matchMedia('(prefers-reduced-motion: reduce)').matches before starting motion-heavy SVG animations, and provide an instant or simplified alternative.
- Check matchMedia before starting JS animations
- Provide an instant-transition fallback
- Re-check the preference if it can change live
Frequently Asked Questions
Does prefers-reduced-motion affect SMIL SVG animations too?
Browsers don't automatically pause SMIL for this preference, so you should detect it in JS or CSS and disable/remove SMIL animations manually.
What should happen instead of an animation for reduced-motion users?
Show the animation's final, settled state instantly rather than skipping the content entirely, so the interface still communicates its state change.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG