Using SVG identifier in Safari causes problem

Question

I'm using SVG for my footer background. Here's my code:

#footer-bg {
  background-image: url("/assets/main-bg.svg#svgView(viewBox(2,0,590,700))");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

This is working in all browsers except Safari, and the culprit is the SVG identifier #svgView(viewBox(2,0,590,700)). When I tried to put the viewbox inside SVG file, it is working in Safari.

Is there a way to fix this?

What version of Safari? See https://caniuse.com/svg-fragment for details and known issues. — Robert Longson, Oct 07 '20 at 00:50
Just to confirm, I assume you mean it's not working in Safari in your last sentence? — Richard Hunter, Oct 07 '20 at 02:31
@RichardHunter it's working if I put the viewbox inside the svg file. — Newboy11, Oct 07 '20 at 02:42
Please take a look at this examples: https://codepen.io/chriscoyier/pen/GndhE Everything is working for me in Safari. If it works for you too you may need to consider that maybe the svg you are using is the cause — enxaneta, Oct 07 '20 at 06:18

score 0 · Answer 1 · answered Aug 10 '23 at 03:46

This might be related to a problem I ran into with Safari. The image src works the first time, but any update to the src path fails to update in Safari, but not Chrome. One solution I've found is setting the image src to blank, then setting it back to whatever you actually want to get it to change the viewBox.

someImageElement.setAttribute('src', '');
someImageElement.setAttribute('src', '/src/assets/image.svg#svgView(viewBox(0,0,130,100))');

score -1 · Answer 2 · answered Oct 07 '20 at 00:46

-1

Absolutely you can use a hack to use a media query to target only Safari browser and then modify that background-image value with the correct one for that browser. In this StackOverflow post you can have more info about those media queries.

Besides that, if you want to have that viewbox set for the SVG, why you don't just edit the svg file, setting that viewbox directly in there and removing it from the css?

answered Oct 07 '20 at 00:46

Agustin Moles

1,364
7
15

I have multiple pages that uses that svg file. I added svg identifier so I can only have one file and just change the viewbox value in css – Newboy11 Oct 07 '20 at 01:14

Using SVG identifier in Safari causes problem

2 Answers2