DEV Community

loading...

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

Collapse
inhuofficial profile image
InHuOfficial Author

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!

Collapse
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.