DEV Community


Discussion on: Pausing GIF animations on for those who `prefer-reduced-motion` [hack 1]

jmau111 profile image
Julien Maury

what about svg animations ?

Would you hide them if prefer-reduced-motion?

link2twenty profile image
Andrew Bone

SVGs have a built in function called pauseAnimations, and also unpauseAnimations, which allows you to stop an animation in its tracks.

Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this <svg> element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.

Here's a very basic demo

inhuofficial profile image
InHuOfficial Author

Well that solves SMIL and I was today years old when I learned about SVG pauseAnimations!

I was thinking about it and would the following not work for CSS applied animations in 99% of circumstances (I know a more specific selector with !important would obviously slip through but other than that I think it would work?)?

svg *{
    transition-property: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 0 !important;
Enter fullscreen mode Exit fullscreen mode
inhuofficial profile image
InHuOfficial Author

So for this isn't an issue (we obviously can't stop what people do in fiddles in any circumstance, but you can't link to or upload SVG files on so it will never be a problem here - unless you can and I missed something!).

For any site that does accept SVG but doesn't have control of the images it might be difficult. You would have to probably use computed style on every path, group etc. within the SVG and remove any animation CSS.

Then you would have to find any SMIL animations and remove those also.

I would imagine we would instead just block the image to be honest and link to it if SVGs were accepted on a site and someone had a preference for prefers-reduced-motion.

Or maybe a better solution is to provide a toggle to hide / unhide the SVG?

Obviously if you control the SVG it is easy as you can just use media queries and put all your animation CSS there or swap an SVG using SMIL out for a static version at a push.

I am trying to work out if a similar technique to the one I used here could be used for SVG but I am pretty sure it would clone the animation into the canvas, one to experiment with if I get time!

inhuofficial profile image
InHuOfficial Author

One thought is save SVG to canvas, then save canvas to image? No idea if that would work but probably a path I would look at if this became a requirement.