How to display SVG images on my site?

Question

I have a website with SVG images, but I have a problem. My site is on an Apache server with my host. My images are displayed very well when my site was on my local server but now it is on my host images no longer appear. I controlled the url is correct. I can access with the url directly on the image, but the images are not displayed on my site.

HTML

<span class="logo">Logo</span>

CSS ;

div.main-content-logo h1#header-logo .logo {
    background: url("../img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    text-indent: -999px;
}
div.main-content-logo h1#header-logo .logo {
    display: block;
    height: 78px;
    width: 260px;
}

Can you help me?

Richards

Why is there a / in your background parameters? – Contreras

The / 260px allows me to set the size of the background – Richards

Answer 1

Have you specified the MIME type in the .htaccess file? see here: http://www.w3.org/services/svg-server/

Curative

I am guessing this is happening in all browsers. Can we have a link? – Curative

Answer 2

Sometimes going from local to server changes the folder structure a bit (has happened to me). Try putting the absolute direction to test it

background: url("http://myexampledomain.com/img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);

Boorman