Menu
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?
378
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.
195
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
