How To Add Animated SVG Logo For Blogger Which Hides After Scroll Down

How to Add an Animated SVG Logo on Blogger That Hides After Scrolling Down

Hello everyone! Welcome back to Prefer UI. I hope you're all doing well. After some time, I'm excited to share another article with you all. Based on the title, you might have already guessed what we’ll be diving into today! If not, feel free to scroll up and take a quick look at the animated SVG logo of Prefer UI – it will hide as you scroll down!

In today’s post, we’ll walk through the process of adding an animated SVG logo on Blogger, and we’ll also explore how to make it disappear smoothly when you scroll down. Let’s break it down step-by-step.

Why You Should Prefer SVG Over PNG?

There are many reasons to prefer SVGs over PNGs, but you should only use SVGs for low-intensity artwork; logos, icons, and simple graphics.

As I mentioned in What are SVGs? that SVG is vector-based, paths, shapes, and fills and it allows for infinite resolution means Using SVGs you are not restricted to pixels. 

Let's look at the below example: 

Google Logo

Now Zoom Both Images One by One Both Images are the same storage size of almost 1kb, but when we zoom both images we found that the first image is losing its quality when we zoom in but the image second can't.

Because the first image is in .PNG Format and the Second one is in .SVG Format.

I Hope You understand that SVGs Have Infinite Resolution and they are not restricted to pixels.

Now Turn on the dark mode you will find that we can change the color of SVG in dark mode but we can't change the color of png.

And, PNGs are always bigger in size compare to SVGs in low-intensity artwork; logos, icons, and simple graphics so using SVG we can increase webpage load speed.

So Overall these are the main reasons to choose SVG Over PNGs in low-intensity artworks.

• Infinite Resolution
• Render fast then SVGs
• Animation can be Added

Read 5 reasons you should be using SVGs over PNGs by growfox for an in-depth look at each point.

Step 1: Login to Your Blogger Dashboard

First, you’ll need to log in to your Blogger account to access the dashboard.

Step 2: Go to the "Theme" Section

Once you’re in the dashboard, click on the Theme section, which allows you to customize the appearance of your blog.

Step 3: Click the "Customize" Button

Next, you’ll find a down arrow icon next to the "Customize" button. Click it to access the theme customization options.

Step 4: Edit the HTML

Now, click on Edit HTML to open the HTML editor where we’ll add our custom code.

Step 5: Add the SVG Code

In the HTML editor, you’ll need to search for the <div id="header"> tag or something similar in your theme's code. This is the section where we will insert the SVG logo. Once you’ve found it, paste the following SVG code right above the header widget section:

<div class="headerSvg" id="svgLogo">
  <svg viewBox="0 0 89.65 63.88" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <style>
        .cls-1 { fill: blue; }
        .cls-2 { fill: green; }
        .cls-3 { fill: yellow; }
        .darkMode .cls-1 { fill: white; }
        .darkMode .cls-2 { fill: lightgreen; }
        .darkMode .cls-3 { fill: orange; }
      </style>
    </defs>
    <g>
      <path class="cls-1" d="M44.65,41.18l.9-1.13.15-.18c.63-.8,1.27-1.56,1.92-2.3l8.93-25a2.27,2.27,0,0,1,2.14-1.74h.38a2.11,2.11,0,0,1,1.16.38,2.83,2.83,0,0,1,1,1.46l4.12,11.75A23.06,23.06,0,0,1,72.84,23a19.61,19.61,0,0,1,3.39.3L70.72,7.86a10.68,10.68,0,0,0-4.56-5.92A13.81,13.81,0,0,0,58.88,0,14.6,14.6,0,0,0,51.6,1.94,10.78,10.78,0,0,0,47,7.86L30.42,54.56A55.54,55.54,0,0,0,44.65,41.18Z"/>
      <path class="cls-2" d="M80.87,36.38,79.72,36a16,16,0,0,0-5.29-.87,20,20,0,0,0-5.09.69l9,25.27H89.65Z"/>
      <path class="cls-3" d="M60.19,29.06a42.48,42.48,0,0,0-6.77,5.3,65.78,65.78,0,0,0-6.16,6.76c-.34.42-.68.84-1,1.28-6.89,9-13.91,14-20.19,16.75l-.32.13V10.68H39.9V0H0V10.68H15.05V62.05a31.38,31.38,0,0,1-5.15.1,22.59,22.59,0,0,1-5.55-1l0,.34A20.28,20.28,0,0,0,7,62.76a31.35,31.35,0,0,0,3.12.7,32.78,32.78,0,0,0,8.16.29A36.5,36.5,0,0,0,26.63,62c6.42-2.12,13.79-6.37,21.48-14.36,1.46-1.51,2.87-2.87,4.25-4.1a55.78,55.78,0,0,1,7-5.34,35.68,35.68,0,0,1,7.5-3.73c5.89-2,10.47-1.47,13.57-.38V26.75C77.42,25.26,70.06,22.91,60.19,29.06Z"/>
    </g>
  </svg>
</div>

This code defines an SVG graphic and adds the option for dark mode, where the color of the logo changes based on the theme.

Step 6: Add CSS for Styling

Next, add the following CSS code just above the </style> or </b:skin> tag in the HTML editor to style the SVG logo and prepare for the scroll animation.

/* HEADER */
header .headerSvg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  background: transparent;
  opacity: 1;
  visibility: visible;
}

header .headerSvg.hidden {
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

header .headerSvg svg {
  width: 28px;
  height: 28px;
}

header .headerTitle {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

header .headerTitle.slide {
  margin-left: -33px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

This CSS code handles the visibility, size, and animation behavior of the logo, making it disappear and reappear when the page is scrolled.

Step 7: Add Scroll Animation with JavaScript

To add the scroll effect, we need a small JavaScript code snippet that will hide the logo when the user scrolls down. Place the following script just before the </body> tag:

<script>
  /*<![CDATA[*/
  function headScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
          shrinkOn = 20,
          headerEl = document.getElementById('header'),
          svgLogo = document.getElementById('svgLogo'),
          headT = document.querySelector('.headerTitle');

    if (distanceY > shrinkOn) {
      headerEl.classList.add("stick");
      svgLogo.classList.add("hidden");
      headT.classList.add("slide");
    } else {
      headerEl.classList.remove("stick");
      svgLogo.classList.remove("hidden");
      headT.classList.remove("slide");
    }
  }
  window.addEventListener('scroll', headScroll);
  /*]]>*/
</script>

This JavaScript script listens for the scroll event. Once the user scrolls down past 20px, it hides the SVG logo by adding the .hidden class to it.

Step 8: Save Changes

Finally, click on Save to apply the changes to your Blogger theme.

---

Additional Information on SVGs

What are SVGs?

SVG stands for Scalable Vector Graphics, and it's an XML-based format for vector images. SVGs are resolution-independent, meaning they can be scaled infinitely without losing quality, making them perfect for web use. They can also be animated using CSS or JavaScript, which is what we’ve just done with the logo on your Blogger site.

Why You Should Use SVG Instead of PNG

SVGs offer several benefits over traditional image formats like PNG:

1. Infinite Resolution: SVGs are vector-based, meaning they can be resized without losing quality.
2. Faster Loading: SVGs are often smaller in size compared to raster images like PNGs, which can improve your website’s loading time.
3. Animation Support: SVGs can be animated directly with CSS or JavaScript, giving you more control over your website's design.

How to create SVG Logo?

There are two possibilities to create an SVG Logo. First, you have a PNG Logo already or other you don't have any logo and want to create a logo from start.

Creating SVG From Zero:

Creating an SVG Logo from zero required graphic design skills, there are much software where you can create your own SVG logo but Adobe Illustrator is the most well-known software for making SVGs.

Adobe illustrator is a premium app, it requires a subscription plan to work on it and is only available for desktop.

If you want to get AI For Free then just comment below.

Here are some apps where you can create your own SVG.

Here are some apps and websites for SVG editing.

1. Canva (App and Web)
2. JustinMind (Desktop)
3. Vecteezy Editor (Desktop and Web)
4. Inkspace (Desktop and Android)
5. Sketsa (Desktop and Web)
6. Vectr (Desktop)

Full List Free and Paid SVG Editor for Desktop: 32 great free and paid SVG Editors

You Can also Create SVG Logos or graphics in Image editors like Canva and Export them into Transparent+SVG Format. then, just compress it.

If You want a Proper guide on "How to create SVG Logo on different apps or websites" then comment below.

You Can Also Convert PNG to SVG but it will not work properly like Created SVG.

List of Some websites where you can convert PNG to SVG:

1. Convertio
2. PNGtoSVG
3. Online Convert Free

Download SVG Logo:

You can also download logos from vector stocks websites like Shutterstock, freepik, envanto elements and customize them according to your choice.

By default, mostly vector graphics website provides EPS Format and you can easily convert EPS to SVG and Get your SVG Logo.

Conclusion

That's it! You’ve now successfully added an animated SVG logo to your Blogger header that hides as you scroll down. SVGs are a great choice for

0.0/5

0 ratings

Thank you for your rating!

5

0 votes

4

0 votes

3

0 votes

2

0 votes

1

0 votes

Go to Link