SVG in CSS backgrounds not showing up in Safari

Question

The following code doesn't work in Safari, and the image doesn't show up. This only happens in Safari, it works in all other browsers, I can't figure out why. Here is the CSS code:

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

and the HTML code:

<div class="hero"></div>

Update: The above code works when converting the "cards.svg" into a JPG, but I would rather work with SVG as they load faster. Why would the SVG not show up in Safari (7.0.1)? According to http://caniuse.com, SVG as a CSS background image is supported but it won't display.

This works perfectly for me in Safari 7.0.1 - try my jsFiddle demo (jsfiddle.net/grantgibson/MsA2J) to see if it works for you. If my demo works for you, perhaps you could update the fiddle with your own SVG image as a next step? — Grant Gibson
– Grant Gibson, Commented Mar 16, 2014 at 8:38
Yeah same for me and it's even working on my old Safari 5.1.10. — Rofez
– Rofez, Commented Mar 16, 2014 at 8:47
If you try opening your SVG file in Safari directly in its own tab does it display properly? — AmeliaBR
– AmeliaBR, Commented Mar 16, 2014 at 19:05

Tim · Accepted Answer · 2014-04-05 05:53:43Z

11

It's because my server is serving it with an incorrect content-type.

Had to add this to my .htaccess file:

AddType image/svg+xml .svg .svgz

This helped me out: http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

edited Apr 5, 2014 at 5:53

answered Mar 16, 2014 at 20:58

Tim

2,1634 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chovy Over a year ago

is this for nginx or what?

UnknownDeveloper · Accepted Answer · 2018-01-05 15:19:37Z

1

I ran into the same problem, although in my case it wasn't the content type that was the problem. It turned out that I had to add quotes around the URL to get it to work, i.e.:

background-image: url('/path/to/my.svg');

...not:

background-image: url(/path/to/my.svg);

I know this isn't the issue the OP was encountering, but posting this here for the benefit of anyone else who runs into the same issue as me and comes to this thread.

answered Jan 5, 2018 at 15:19

UnknownDeveloper

4551 gold badge4 silver badges10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:51Z

0

I fixed the issue by adding following code to .htaccess file.

<ifModule mod_headers.c>
    <FilesMatch "\.(svg|svgz)$">
    Header set Content-Type "image/svg+xml"
    </FilesMatch>
</IfModule>

Reference :

Above answer https://stackoverflow.com/a/22442942/1461060 was correct
https://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jun 2, 2016 at 17:51

gihanchanuka

5,0712 gold badges34 silver badges32 bronze badges

Collectives™ on Stack Overflow

SVG in CSS backgrounds not showing up in Safari

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related