What is Icon SVG?
Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
What are SVG used for?
So, What Is SVG and Why Should You Use It? SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments. Under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text.
Step by step how to make Back To Top Button
1. Open your Blogger Account. And go to Edit Thema.
2. Copy Paste The Code Bellow. And then put it on before </head>.
<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>
3. Next Copy Paste the code bellow and put it before </body>.
<div class='backtotop hide'><svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>
Closing
It is easy to apply it right? Lets try on your own blog and make your visitor more comfortable with this Feature. Hope you like How to Make Back to Top Button With SVG Icon For Blog.
Please Share if this tutorial useful.
