10

So given this HTML, the background image loads just fine in Firefox, IE and Chrome. But in Safari, it just ignores it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
    <image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
  </svg>
</body>
</html>

Now I thought it might be a server issue, not giving the correct headers, but I've checked and it looks good (image/svg+xml). So I'm at a bit of a loss... Any ideas?

Siyfion
  • 979
  • 1
  • 12
  • 32
  • 1
    @Siguza seriously!? So if you open http://storage.labellogiclive.com/test_svg.html in Chrome and Safari, you see them as 100% identical!? – Siyfion Jul 16 '15 at 21:17

2 Answers2

3

Safari struggles with deeply-nested SVG <image> elements.

See, for instance, the comments here: Embed SVG in SVG?

Your first <image> loads another SVG, which itself includes an <image> that loads the background photo. If you merge the innermost <image> element (the photo) into the outermost SVG, it works fine.

Community
  • 1
  • 1
ivanreese
  • 2,718
  • 3
  • 30
  • 36
  • 1
    For reasons that I can't really go into here easily, I can't simply "merge" the two SVG files, they both contain very different data that (eventually) needs to be parsed separately. However if this is the case, there isn't a fix for Safari seemingly. Perhaps I should raise it as a bug with Apple? – Siyfion Jul 17 '15 at 08:38
  • 1
    Can you merge them at runtime, by injecting the inner one into the outer one with JS? Not sure what you mean by "parsed separately", so if you offer some more details about how you are making & using these SVGs, I'll help you get something working. – ivanreese Jul 17 '15 at 13:42
  • 1
    @Siyfionit It would be great if you can submit this as a bug with Apple! – thomasfuchs Jul 19 '15 at 16:22
  • 1
    @ivanreese essentially, while I know I can solve it a plethora of other ways, I wanted to know why it didn't work, and in short, it's Apple's issue. Not my code. So there is *no* solution to the underlying problem. – Siyfion Jul 23 '15 at 11:41
  • @Siyfion: Agreed — that's what I was going for with my answer (pointing out that it's a Safari issue), but I was also trying to suggest a helpful workaround (since your question wasn't really specific about what you wanted, other than "ideas"). If my wording of such didn't seem to ring true enough for you, that's fine. Cheers! – ivanreese Jul 23 '15 at 21:06
1

I've submitted a bug report with Apple via the Apple Bug Reporter with a Bug ID of 21959574. Hopefully someone at Apple will take note and fix the underlying issue.

Siyfion
  • 979
  • 1
  • 12
  • 32