SVG Fragment Sprite + CSS Background Image in Safari

Question

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

question seems already addressed in previous posts : stackoverflow.com/questions/12012573/… and stackoverflow.com/questions/6372695/… — florian
– florian, Commented Apr 24, 2018 at 7: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: stackoverflow.com/questions/22432293/… ) — florian
– florian, Commented Apr 24, 2018 at 8:04

Manic · Accepted Answer · 2019-04-22 21:44:07Z

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

answered Apr 22, 2019 at 21:44

Manic

12 bronze badges

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

Collectives™ on Stack Overflow

SVG Fragment Sprite + CSS Background Image in Safari

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related