Skip to main content
13 October 2023

SVG with GIF inside. How to freeze the animation?

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

GIF inside SVG

 

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'));
}

Top Visual Regressions that You Can Spot with and without Automated Testing

Visual bugs are typically considered easy to spot. You can often see what’s missing or what’s amiss on a web page.

A photo that’s too much to the left, the wrong fonts, a missing button -- these are things that you can spot at a simple glance. But not all visual bugs are that easy to catch, especially not with the naked (or untrained eye).

This is where automated visual regression tools like Diffy come into play. They can help you spot elusive visual bugs easily, even if you have to test hundreds of pages.

4 mins read

Testing tabs, mobile menu, sliders

A lot web pages right now have some elements that gets activated by clicking on the pages. For example, sliders, or dropdown menu, or tabs. How to take screenshots of those pages too?
4 mins read read

Diffy helps your QA team

to ensure that websites don't get visual bugs