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

Answer 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.

Answer 2

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/

Answer 3

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/