Back To Top with svg

HTML:
<a href="javascript:" id="return-to-top"><?php echo file_get_contents('img/svg/icon_arrow-forward.svg'); ?></a>

SVG:

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs></defs><title>icon_arrow-forward</title><path class="cls-1" d="M12,4L10.6,5.4,16.2,11H4v2H16.2l-5.6,5.6L12,20l8-8Z" transform="translate(-4 -4)"/></svg>
//Make svg image with the icon name(icon_forward.svg) as well extension .svg

CSS:
#return-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.75);
    width: 35px;
    height: 35px;
    display: block;
    text-decoration: none;
    z-index: 1;
    box-shadow: 0px 0px 0px 1px #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: none;
    @extend .transition;
}
#return-to-top {
 svg {
        height: 18px;
        width: 18px;
        fill: #000;
        margin: 0;
        position: relative;
        left: 8px;
        top: 8px;
        font-size: 19px;
        transform: rotate(-90deg);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
}
#return-to-top:hover {
    background: rgba(255, 255, 255, 1);
}

JS:
     $(window).scroll(function() {
         if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
             $('#return-to-top').fadeIn(200);    // Fade in the arrow
         } else {
             $('#return-to-top').fadeOut(200);   // Else fade out the arrow
         }
     });
     $('#return-to-top').click(function() {      // When arrow is clicked
         $('body,html').animate({
             scrollTop : 0                       // Scroll to top of body
         }, 500);
     });