Back to Blog

SVG with GIF inside. How to freeze the animation?

You can embed an animated GIF inside an SVG, which makes freezing the animation tricky. Here is the JavaScript snippet we use to stop it.

Yuriy Gerasymov
Yuriy Gerasymov
13 Oct 2023 · 1 min read

We discovered that you can place animated GIFs inside of the SVG. This makes freezing animation very interesting problem. Example is on the site Neutec

Animated GIF embedded inside an SVG on the Neutec website

Here is a way to freeze it with javascript:

const image = document.querySelector('#Layer_1 image[*|href$=".gif"]');

if (image) {
    const c = document.createElement('canvas');
    const w = c.width = image.getAttribute('width');
    const h = c.height = image.getAttribute('height');

    c.getContext('2d').drawImage(image, 0, 0, w, h);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', c.toDataURL('image/gif'));
}

Related Articles

More guides on visual regression testing, QA automation, and keeping your site pixel-perfect as it changes.