SVG images not rendering in Safari

Question

<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">
        <defs>
          <pattern id="pattern1" height="100%" width="100%">
            <filter id="shadow">
              <feDropShadow dx="0" dy="0" stdDeviation="2.2" />
            </filter>
            <rect height="100%" width="100%" fill=${backgroundColor}></rect>
            <image id="image" xlink:href=${backgroundImage}></image>
          </pattern>
        </defs> 
        <circle id="circle" cx="20" cy="20" r="20" filter="url(#shadow)"  fill="url(#pattern1)"/>
      </svg>

I have tried multiple solutions from stackoverflow but none seem to work. Can anybody please help me on this?

Note: both filter and the fill color are showing. It’s only the image that’s missing.

Demo: https://codesandbox.io/s/svg-safari-image-t9ng3?file=/src/index.js

Edit: Thank's to Robert Longson's answer I found out that you need to set the height and width explicitly in the image tags 'height/width' attribute for the image to show in Safari. Now I have another problem if the height/width is supposed to be 'auto', removing the attribute from the image tag works in Chrome but the image again disappears in Safari. Is there any fix for this?

Answer 1

Safari needs the image to have height and width values.

Using the image's native width and height i.e. a default value of auto is a change in the new SVG 2 specification. Firefox and Chrome have implemented this and I imagine Safari will too at some point.