Personalize Your Github Profile With The New Profile README Feature

Use SVG with Inline CSS Animations to Personalize Your Github Profile

Personalize Your Github Profile with a Stand Out README

In this lesson, we explore ways to personalize your Github profile using the new "secret" profile README feature.

There have been examples of people using heavy GIF files to show animation on their profiles. But, did you know you can inline CSS animations within SVG files? And Github supports that too!

If it's possible for you to use that technique to achieve the same animation, you can save potential viewers of your Github profile from using up their data allowance!

### Resources
- [SVGOMG Optimizer](https://jakearchibald.github.io/svgomg/)

https://app.egghead.io/api/v1/lessons/css-use-svg-with-inline-css-animations-to-personalize-your-github-profile/subtitles

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.

Use SVG with Inline CSS Animations to Personalize Your Github Profile

Share this video with your friends

Resources

Course

Personalize Your Github Profile with a Stand Out README