Add An Sliding SVG Logo on Scroll in Blogger Website

Add an SVG Logo with sliding hide effect and make your website look better.

If your website is hosted on blogger, and you want to use the SVG logo in your website header with a sliding effect on the scroll, you just 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. 

Let’s look at the below example: 

 

HOB PNG

Now Zoom Both Elements One by One; Both Elements 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 are not restricted to pixels.

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

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

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:

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 into 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, and 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 this 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.
Sharing is Caring!

Link this Page

To link to this page from your website, simply click the below code and paste it into your web page.

<a href="https://www.houseofblogger.com/sliding-svg-logo-on-scroll-in-blogger-website/" target="_top">Add An Sliding SVG Logo on Scroll in Blogger Website</a>

Reference:
www.fineshopdesign.com

Sagar Vishnoi
Sagar Vishnoi
Articles: 13

Newsletter Updates

Enter your email address below to subscribe to our newsletter

8 Comments

Leave a Reply

Your email address will not be published.

Select your currency
$ United States (US) dollar