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 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.
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 grow for 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 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:
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:
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 the Save 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://bytesandbucks.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
I try to do as you say. My website is full of your HOB logo. How do I get started with my logo?
Change with your Own LOGO's SVG
Thank you. It’s okay now. But not working Animate SVG Logo (Sliding on Scroll) in Plus UI 2.6.1
how to resolve ?
Plus UI v2.6.1 have different classes of dark mode, header logo so change it according to its classes.
How to fix header in plus ui 2.6.1 just like you??
Contact to the PLUS UI Support on telegram @real_sagar
Nice
This comment has been removed by the author.