Add An Sliding SVG Logo on Scroll in Blogger Website

If your website is hosted on blogger, and you want to use the SVG logo in your website header with a sliding effect on scroll, you must need to read this article at the end.

In this guidepost, I am going to share All the steps to add an SVG Header Logo to Blogger Website that will automatically hide on scroll. I will also share how you can create or get an awesome SVG Logo for your website FREE of Cost.

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

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

• 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:

• Convertio
• PNGtoSVG
• 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.

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.

Step 1: First of all 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'>
                  <style>
                    .cls-1{fill:#138808} .cls-2{fill:#FF9933} 
                  </style>
                  <path class='cls-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='cls-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 SVG */ 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.stick .headerSvg{transform:scale(0);opacity:0;visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease} header .headerSvg svg{width:28px;height:28px} .headCn .headTtl{-webkit-transition:all .2s ease);transition:all .2s ease} header.stick .headCn .headTtl{margin-left:-33px;-webkit-transition:all .4s ease;transition:all .4s ease} @keyframes svHr{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

You Can customize this CSS according to you if you want to increase and decrease size of the logo.

How to Animate SVG Logo (Sliding on Scroll)

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(){var e=window.pageYOffset||document.documentElement.scrollTop,d=qSel("#header"),l=qSel("#mobile-menu");20<e?(addCt(d,"stick"),addCt(l,"slide")):(remCt(d,"stick"),remCt(l,"slide"))}window.addEventListener("scroll",headScroll); /*]]>*/</script>

Step 8: Finally, Save the changes by clicking on file icon

Conclusion

This is all about adding the Sliding SVG Logo on Scroll in Blogger Website. I hope you successfully added your logo. If you are facing a problem in any section or you have any questions then ask us in the comment box.