Use SVG with Inline CSS Animations to Personalize Your Github Profile

Instructor: [0:00] GIF files get big quickly. This is a slightly exaggerated example, but if we check the network tab in our DevTools, we can see we're transferring 5.6 MB over the network to show a GIF in a README.

[0:17] One idea is to use an SVG file. Here, I have an SVG version of the header banner. We can define inline CSS within our SVG file. To test this, let's animate the fill on this circle. We can define our rule to circle and we'll set an animation named change the duration of one second that iterates infinitely with a linear timing function.

[0:50] For our keyframes, let's change the fill at 50 percent to purple. We can check this works locally by opening the SVG in our browser.

[1:03] Now, if we update our README to point at the SVG file, once we've pushed the changes, we can see that we now have an animated SVG on our README. Checking the network request panel shows that our header banner is now only transferring 50.6 KB over the network, instead of 5.6 MB.

[1:25] Now, we know that inline CSS animation is supported within our SVGs, we can create an SVG that matches the GIF we used earlier. We can optimize the size of our SVG further by using SVGOMG. Using SVGOMG, we're able to reduce the size of our SVG whilst maintaining the animation.

[1:47] We can update our README to point at this new SVG and pushing the changes, we can see the new animated SVG on a README. Checking the network request panel in DevTools shows that now, we're only requesting 5.2 KB over the network.

[2:09] In review, leveraging the fact that we can use inline CSS animation within an SVG file, we can significantly reduce the size of the network request made by viewers of our profile.

[2:20] That means we can still display animations on our new personalized GitHub README, without the need for large network requests that might have been the case if we were using a GIF.