7

I am working on a site where I am using a SVG fragments file and loading in particular SVGs via CSS background images.

I also have a PNG fallback and I'm using the below as as basis for the work: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background-image

EXAMPLE

.ico-arrow-right {
  background: url(ico-arrow-right.png);
  background: url(sprite-collection.svg#arrowright),
    linear-gradient(transparent, transparent);
}

The problem is, it appears to work fine on most browsers but in Safari on desktop and IOS browsers, the SVG doesn't appear and just shows a blank space. Looking into this, it seems Safari/webkit on devices, doesn't like SVG fragment sprites when using them with CSS background images.

Is there any solution/work around for this? I still want to use CSS background image to pull in the PNG/SVG, and don't want to revert to using individual SVG files as there is over 60 svgs and I don't want that all those server requests!

Thanks all

redspark
  • 71
  • 2
  • question seems already addressed in previous posts : https://stackoverflow.com/questions/12012573/not-able-to-render-svg-image-in-safari and https://stackoverflow.com/questions/6372695/safari-embeded-svg-doctype?rq=1 – florian Apr 24 '18 at 07:58
  • you can also try to write the url link with quotes (background: url('sprite-collection.svg#arrowright') and/or check if it's not a server-side error (if so you can address it by modifying .htaccess: https://stackoverflow.com/questions/22432293/svg-in-css-backgrounds-not-showing-up-in-safari ) – florian Apr 24 '18 at 08:04

1 Answers1

0

Add a "content-type" header for SVG files in your server, for example in apache adding this to your .htaccess file:

AddType image/svg+xml .svg .svgz

Manic
  • 1
  • 2