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