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?

Why is there a `/` in your `background` parameters? – putvande Mar 07 '14 at 14:19 — putvande, Mar 07 '14 at 14:19
The / 260px allows me to set the size of the background – Florent Mar 07 '14 at 14:30 — Florent, Mar 07 '14 at 14:30

score 1 · Answer 1 · answered Mar 07 '14 at 16:04

1

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

answered Mar 07 '14 at 16:04

DavidT

2,341
22
30

I am guessing this is happening in all browsers. Can we have a link? – DavidT Mar 07 '14 at 17:28

score 0 · Answer 2 · answered Mar 15 '17 at 22:11

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);

How to display SVG images on my site?

2 Answers2