What tutorial do you want for the next article! Request Here!

How to make Animated SVG Logo on Blogger

Guide to implement animated SVG Logo with hide sliding effect on header to make your website look better.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

To improve the appearance of your website, follow this guide to build an animated SVG logo with a hide sliding effect on the header.

You must read this article all the way through if you host your website on Blogger and want to use the SVG logo in your website header with a sliding effect on scroll.

add svg logo to header blogger

In this article, I will show you how to add a SVG Header Logo to your Blogger website that will automatically hide when you scroll. I'll also show you how to make or get an excellent SVG logo for your website for FREE.

If Anyone doesn't Know About SVG and Why we should prefer SVG Logo rather than PNG Logo, so i cover all the basic details in brief, before the steps to add an logo.


What exactly are SVGs?

SVG (Scalable Vector Graphics) is an XML-based vector picture format. It was created in 1999 as a vector graphics standard.

They are a more modern sort of vector image that can scale to any size without losing quality, making them suitable for usage in web design.

They are created using an illustration programme and include shapes, forms, curves, pathways, and lines. They can be animated as well.

Why Should You Use SVG Instead of PNG?

There are various reasons to choose SVGs over PNGs; however, SVGs should only be used for low-intensity artwork such as logos, icons, and simple images.

As I explained in What Exactly Are SVGs? SVGs are vector graphics. SVGs are not limited to pixels because they are vector-based, support shapes, paths, and fills, and allow for infinite resolution.

Let's look at the below example:

TWT

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 colorof 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 grow for for an in-depth look at each point.

How can SVG Logo be created?

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 is 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.

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:

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:

Important!Before we start adding codes in XML, I will recommend you take a backup of your current theme. By chance, if any problem occurs, you can restore it later.

Add SVG Logo to Median UI, Fletro Pro & Imagz

Step 1: Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to the 'customize' button.

Step 4: Click Edit HTML, you will be redirected to the editing page.

Step 5: Now search the <!--[ Header widget ]-->, because this tag is common in most themes and paste the below code just above the <!--[ Header widget ]-->

<div class='headerSvg' id='svgLogo'>
<svg viewBox='0 0 54.44 96.83' xmlns='http://www.w3.org/2000/svg'>
<style>
.altq-1 {
fill: #f6931d;
}

.altq-2 {
fill: #474747;
}
</style>
  <path class='altq-1' d='M54.4,61.1c0-4.69,0-9.38,0-14.08a5.21,5.21,0,0,0-2.73-5.1q-9-5.09-17.89-10.34c-2.69-1.58-3.7-.77-3.68,2.19,0,9.09-.06,18.19.09,27.28,0,3-.88,4.86-3.57,6.35C18.66,71.79,10.87,76.47,3,81c-3,1.72-3.64,3-.1,5,5.8,3.15,11.49,6.49,17.14,9.89a5.36,5.36,0,0,0,6.12.09c8.2-4.86,16.43-9.67,24.76-14.31a6.35,6.35,0,0,0,3.56-6.42C54.31,70.49,54.4,65.8,54.4,61.1Z'/>
  <path class='altq-2' d='M24.24,29.22c0-9.53-.06-16.06,0-25.59C24.32,0,23.14-.94,19.91,1Q11.39,6,2.79,10.89A5.32,5.32,0,0,0,0,16C0,27.13,0,35.27,0,46.42a5.38,5.38,0,0,0,2.81,5.09q8.79,5,17.53,10.1c2.9,1.67,3.93.62,3.91-2.47C24.21,49.17,24.24,39.2,24.24,29.22Z'/>
</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.

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}

If you wish to increase or decrease the size of the logo, you can modify this CSS accordingly.

How to Animate SVG Logo (Sliding on Scroll)

We will now add a Animation Style script to hide the logo with a sliding animation on scroll.

Copy the code below and paste it right 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 modifications by clicking this icon

Conclusion

This article guide how to add a Sliding SVG Logo on Scroll to a Blogger website. I hope your logo was uploaded properly. If you are having trouble with any area or have any queries, please let us know in the comment section.
Sharing is Caring!

Reference:
www.thewebtrick.com

You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.