Setting an SVG file as a background url

Question

Sorry if this question seems trivial, this is the 1st time I've used an svg file, and was unable to resolve the issue with existing Q and A on stack.

I have a logo which is an svg file. I want to make the logo 'clickable' and work as a link to the home page. I initially did this with a jpeg and all worked as expected, but once I switched to an svg the logo does not display (however I verify if I click in that general area the link works). Does anyone have any recommendation on what I need to change so the image displays?

I'm beginning to think this may have to with Azure (while the svg opens locally it does not open through the project, while other image files do.

SVG file was created using inkscape and renders correctly on a browser when opened as a standalone.

JavaScript loads header onto each page:

//Header for Main pages, with Logo
function getHeader()
{
    var header='<ul id="hlogob">'+
               '<li><a href="../BigHatHome.html" class="hlogo">Home</a></li>'+
               '</ul>'+
               '<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}

CSS Styles the header, and link with a background image (want it to be my svg)

/*Header styling and Logo*/
.header
    {
    background-color:#FAFAEB;
    text-align:center;
    font-family: Algerian;
    color: #37342a;
    height:100px;
    padding-bottom:10px;
    /*border-bottom:5px inset #DCDCDC;*/
    margin:0px; 
    line-height:20%
    }


    ul#hlogob li 
    {
        display: inline;
        list-style: none;
     }

    ul#hlogob li a 
    {
        color: #999;
        text-decoration: none;
    }

    a.hlogo 
    {
        display: inline-block;
        background: url("../Images/bighat4.svg") no-repeat;
        background-position: center;
        background-size: 100px 70px;
        width: 100px;
        height: 70px;
        text-indent: -9999px;
        text-align: center;
        margin: 0;
     }

    a.hlogo:hover 
     {
        border: none;  
     }   

Header is loaded by js onto each page

<header class="header" id="header">
<!--Loaded by Script-->
</header>


<script type="text/javascript">
    getHeader();
</script>

Answer 1

The issue as it turns out is not with the code, but with the default settings on azure which do not have mime type for svg. See Use SVG in Windows Azure Websites