Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs a Sliding SVG Logo which on Scroll disappears.
So today we are going to learn in this blog How can we implement in any other blogger templates And what are SVG's ?
What Are SVG's?
Scalable Vector Graphics (SVG) is an XML-based vector image format. It was developed as a standard for vector graphics and was first released in 1999. It is a more modern type of vector graphic that supports all major browsers and graphics programs, and can be scaled to any size without sacrificing quality, making it ideal for use. in web design. Basically, it is created with an illustration program and consists of paths, shapes, curves, and lines, and can also be animated.
How do I create an SVG logo?
There are two ways to create an SVG logo. First, I already have a PNG logo or I don't have one and I want to create one from scratch.
Creating SVG from scratch:
Creating an SVG logo from scratch requires knowledge of graphic design. There are many software programs that you can use to create your own SVG logo, but Adobe Illustrator is the most popular software for creating SVG.
Adobe Illustrator is a premium app that requires a subscription to work and is only available on your desktop.
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)
You can also create logos or SVG graphics in an image editor like Canva and export them in transparent+SVG format. Then squeeze it.
List of Some websites where you can convert PNG to SVG:
How to add SVG Logo in Header?
Follow these below steps to add an SVG logo in your website:
- Step 1: First of all Login on your Blogger Dashboard.
- Step 2: On Blogger Dashboard, click on Theme.
- Step 3: Click the arrow down icon subsequent to the customize button.
- Step 4: Click Edit HTML, you'll be redirected to the modifying 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>
.cls-1 {
fill: #f6931d;
}
.cls-2 {
fill: #474747;
}
</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 in case you need a specific shadeation on emblem whilst in darkish mode, you could personalize the codes as in step with your need. Each template will have a specific darkish mode elegance, so please modify it, you could update the marked elegance together along with your template darkish mode elegance.
- 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}It's Your Choice if you want to customize this then change CSS according to your requirement and choice.
- Step 7:Now, 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() {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>Conclusion
So today we have discussed about How To Add An Sliding SVG Logo on Scroll in Blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.