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.
border="0"
data-original-height="720"
data-original-width="1280"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgVHfyhGF6KpARD-spGzesn-sfzMTQ2cpLjCxGucrsXOgO21hYqTuneLeSJWWZ2qzVxhqI-g4LlPdfF-pQTby7AMNGquBGpqLbOeYFOkAeMqNZ6YKBG-c9hn8Sgvgnq6TL9xj8UaXr7u-KXmPTHlPYMM2y6w88OwyAwFNalqatxpMgtg4DbsXA1z6/s1600-rw/animated-svg-logo.webp"
onclick="return false"
/>
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:
data-original-height="98"
data-original-width="55"
height="200"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1wSb1UA4sIn1jBTI3gl9jsyEPi9GVk74kJkAUCxXAi-ItaWYLL4LRPZ1ORAOd369YBg05Ydgc35P5SQNzQMn9lsYUw_IMN4KstYdU7YmkWsqEu0Y00rbgN1oMfDXO3AH6u8RNpPtzMYI7NUao2TwUoybbaqKwCbb6zBuZo-IYlJrTChFN-OX1SSDc/s1600-rw/TWT.png"
width="200"
onclick="return false"
alt="TWT"
/>
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 1080 1080"
version="1.1"
>
d="M 385.373 310.121 C 381.607 311.172, 383.437 308.762, 341.704 367.634 C 309.222 413.456, 306.576 417.856, 310.582 419.393 C 311.452 419.727, 332.039 419.993, 356.332 419.985 C 389.892 419.974, 401.100 419.667, 403 418.708 C 404.604 417.898, 416.903 400.073, 437.317 368.973 C 454.816 342.313, 469.541 319.491, 470.039 318.259 C 471.141 315.530, 470.384 313.246, 468.158 312.581 C 467.246 312.308, 452.550 311.618, 435.500 311.048 C 418.450 310.478, 400.900 309.840, 396.500 309.630 C 392.100 309.421, 387.093 309.642, 385.373 310.121 M 240.537 478.605 C 239.521 479.622, 239.175 480.976, 239.594 482.298 C 240.352 484.684, 297.276 586.063, 300.210 590.250 C 302.481 593.492, 304.256 593.715, 306.722 591.068 C 307.712 590.005, 313.432 580.218, 319.433 569.318 C 325.434 558.418, 338.359 534.983, 348.155 517.241 C 357.951 499.498, 366.249 483.855, 366.595 482.478 C 368.017 476.813, 370.178 477, 303.449 477 C 248.500 477, 241.976 477.166, 240.537 478.605"
stroke="none"
fill="#F6931D"
fill-rule="evenodd"
>
d="M 537 313.018 C 534.965 313.499, 532.538 315.090, 531.200 316.821 C 529.935 318.458, 511.554 348.305, 490.352 383.149 C 469.151 417.992, 447.284 453.925, 441.760 463 C 436.235 472.075, 412.145 511.675, 388.226 551 C 364.307 590.325, 341.705 627.450, 337.998 633.500 C 329.335 647.640, 329 648.320, 329 651.737 C 329 653.610, 333.468 662.230, 341.862 676.553 C 385.662 751.287, 393.074 763.632, 394.866 764.824 C 397.318 766.456, 399.939 765.268, 402.497 761.364 C 403.477 759.869, 442.848 694.488, 489.990 616.073 C 537.131 537.658, 582.471 462.262, 590.744 448.527 C 599.017 434.792, 606.821 422.867, 608.085 422.027 C 610.090 420.696, 621.909 420.436, 700.329 420 C 790.274 419.500, 790.274 419.500, 793.209 416 C 797.153 411.298, 844 320.504, 844 317.563 C 844 312.230, 852.301 312.512, 690.596 312.346 C 608.043 312.261, 538.925 312.564, 537 313.018"
stroke="none"
fill="#474747"
fill-rule="evenodd"
>
d="M 632.014 476.306 C 629.555 477.148, 627.436 479.120, 624.821 483 C 616.683 495.069, 523.709 641.543, 522.271 644.559 C 521.073 647.069, 520.966 648.464, 521.788 650.823 C 522.988 654.264, 579.419 751.556, 581.778 754.250 C 583.732 756.482, 586.266 756.482, 588.228 754.250 C 589.073 753.288, 611.016 716.500, 636.988 672.500 C 662.961 628.500, 685.522 591.150, 687.124 589.500 C 690.036 586.500, 690.036 586.500, 721.369 586.210 C 752.702 585.920, 752.702 585.920, 755.214 583.210 C 756.596 581.720, 769.107 557.987, 783.016 530.471 C 810.487 476.127, 810.142 477.078, 802.911 475.632 C 801.172 475.284, 762.794 475.025, 717.625 475.056 C 656.739 475.098, 634.599 475.422, 632.014 476.306"
stroke="none"
fill="#f6931d"
fill-rule="evenodd"
>
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
I Hope You understand that
pixels > >.
Now Turn on the dark mode you will find that
colorof png >.
And,
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
target="_blank"
>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?
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.
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:
target="_blank"
>32 great free and paid SVG Editors >
You Can also
them into Transparent+SVG Format >. then, just compress it.
If You want a Proper guide on "
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
target="_blank"
>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.
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
viewBox="0 0 512 512"
>
>
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