SVG Image Not Loading in Firefox

Question

Here is a codepen and at the bottom of this question is the actual code. Although the code works fine in Chrome, for some reason image elements in an svg element are not loading in Firefox. I've tested it on Firefox versions 64 and 64.0.2. Neither loads the images.

Based on an SO answer I came across, and the documentation itself, I've tried a number of different things, none of which worked. Some of the things I've tried are...

1. <svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
2. <image xlink:href='...' href='...'

Is this a bug with Firefox's implementation of SVG? I've discovered bugs with Firefox's SVG implementation before, so I wouldn't be surprised.

HTML

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='background-image' />
  <clipPath id='eye'>
    <rect id='rectangle' x='3172' y='2404' rx='10' ry='10' />
  </clipPath>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='main-image'/>
</svg>

CSS

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

#svg {
  width: 6144px;
  height: 4608px;
  position: absolute;
  left: -3072px; /* set with JS */
  top: -2304px; /* set with JS */
}

#background-image {
  width: 6144px;
  height: 4608px;
  opacity: 0.25;
}

rect {
  width: 35vw;
  height: 75vh;
}

#main-image {
  width: 6144px;
  height: 4608px;
  clip-path: url(#eye);
}

Obscurity

Possible duplicate of SVG <image> tag not working in Safari and Firefox – Outstare

@Outstare it's not a duplicate. the issue has nothing to do with missing width and height properties, which are set in css... – Obscurity

Yes it is a duplicate, the width and height attributes must be set for Firefox to load this image, just like the SVG1.1 specs required. Setting it through CSS was not enough. In svg2 this will change, but FF still doesn't support this part of SVG2 (while Chrome does). – Outstare

Oh and actually I missed it, but even your <rect> needs its attributes in svg1.1, but your vw and vh units won't work there: codepen.io/_-0-_/pen/gZVOQL – Outstare

@Outstare so if i add random values for the width and height attributes in the HTML, i can still modify them on page load via JS and HTML/SVG1.1 will respect that right? – Obscurity

Yes, with js you can, but setting the sizes through CSS was not supported in SVG1.1 – Outstare

Answer 1

The width and height attributes must be assigned to the image element in the actual HTML for SVG version 1.1:

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' width="100%"; height="100%" 
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    />
</svg>

Atropos

Were required and it's width not whidth – Outstare

@Anthony "attributes", the little things you put in the tags inside the XML markup. And "were" because SVG2 specs now support an auto value. So were is correct now that some UAs have implemented it. That community driven MDN didn't catch on is just inconsistency when we see they already deprecated xlink:hrefsomewhere else, but it will flatten sometime eventually. – Outstare

@Outstare ahh didnt know the specs changed – Obscurity

Answer 2

Check the image mime type, it must be: image/svg+xml

Unwrap