Hello viewers How are you I hope you are doing well. After a long time welcome to my blog Tech Aadi.
I hope after reading the article heading you have understood that in this blog what I am going to discuss about. Even if you didn't understand then just you can look at the top there is a SVG logo of TA which i used and that just hide after scrolling down.
So today we are going to talk about How To Add Animated SVG Logo on Blogger Which Hides After Scroll Down.
First we will discuss about how to add this in your blog. Then at the end we will discuss about the some important blog information.
Important! Before starting please backup your blog template for any kind of errror and easy restoration process.
How to Add SVG logo with Animation in Blogger
Follow the below given steps carefully to successfully install the svg on your header.
Step 1:- Login to your Blogger dashboard.
Step 2:- After that click on the Theme section.
Step 3: Click the arrow down icon next to the 'customize' button.
Step 4:- Now click in the edit HTML.
Step 5: Now search the <!--[ Header widget ]-->, because this tag is common in most themes and paste your SVG code { Because in the below marked code i have used my own TA SVG code for giving example } above the <!--[ Header widget ]-->
<div class='headerSvg' id='svgLogo'>
<svg viewbox="0 0 89.65 63.88" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:blue}.cls-2{fill:blue}.cls-3{fill:blue}
.darkMode .cls-1{fill:#ffffff}
.darkMode .cls-2{fill:#44bd32}
.darkMode .cls-3{fill:#fbc531}
</style></defs><g data-name="Layer 2" id="Layer_2"><g data-name="Layer 1" id="Layer_1-2"><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"></path></path></path></g></g></svg>
</div>If your template has a dark mode feature, and if you want a different color on logo when in dark mode, you can customize the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class. You can also change the dark mode color for SVG.
Step 6: Now add the following CSS Codes just above to ]]></b:skin> tag.
/* HEADER */ header .headerSvg{display:flex;align-items:center;justify-content:center;margin-right:5px;-webkit-transition:all .5s ease;transition:all .5 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}You Can customize this CSS according to you if you want to increase and decrease size of the logo.
How to Animate SVG logo while scrolling down
Now, We will add an Animation Style script to hide the logo with slide animation on scroll.
Copy the Below Script and Paste just Above </body>
<script>/*<![CDATA[*//* Header Scroll */ 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>
Step 8: Finally, Save the changes by clicking on this icon
Now that's all after following the above steps I hope you have successfully Added the SVG on your blog header and animated it.
Below are some important aspects given about SVG so please read it carefully..
What are SVGs?
SVG (Scalable Vector Graphics) is a vector image format that's based on XML. It was developed as a standard for vector graphics and was first released in 1999.
They are a more modern type of vector graphic with support from all major browsers and graphics software and they can scale to any size without losing quality, making them ideal for use in web design.
Basically, They are created with an illustration program and consist of paths, shapes, curves, and lines, and they also have the ability to be animated.
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:
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.
How to create SVG Logo?
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.
- Canva (App and Web)
- JustinMind (Desktop)
- Vecteezy Editor (Desktop and Web)
- Inkspace (Desktop and Android)
- Sketsa (Desktop and Web)
- 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:
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.
How to add SVG Logo in Header?
Adding an SVG Logo in the header to Blogger Website is not rocket science and it will not require much knowledge about HTML, CSS, or JS.
Follow these below steps to add an SVG logo in your website:
Conclusion
So this is all about How To Add Animated SVG Logo on Blogger Which Hides After Scroll Down. I hope you have liked this article. If you got any query kindly do comment below. Do visit us again for more post like this.