SVGs have a built in function called pauseAnimations, and also unpauseAnimations, which allows you to stop an animation in its tracks.
SVGSVGElement.pauseAnimations()
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.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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?)?
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
So for dev.to 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 dev.to 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!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
SVGs have a built in function called
pauseAnimations, and alsounpauseAnimations, which allows you to stop an animation in its tracks.developer.mozilla.org/en-US/docs/W...
Here's a very basic demo
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
!importantwould obviously slip through but other than that I think it would work?)?So for dev.to 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 dev.to 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!
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.