11 
<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?

Improve this question
5
  • Try this online checker to help identify issues.
    – rtx13
    Commented May 11, 2020 at 4:42
  • @RobertLongson the height and width is defined via style.
    – mikasa
    Commented May 11, 2020 at 5:34
  • @rtx13 tried doing that. It gave me Namespace prefix xlink for href on image is not defined. But its still not working even after I provided the namespace.
    – mikasa
    Commented May 11, 2020 at 5:36
  • It works for me in Safari. I see an image in the codesandbox.
    – Robert Longson
    Commented May 11, 2020 at 6:14
  • Yes I added the width and the height as an attribute and it started working. Thank you so much for your help.
    – mikasa
    Commented May 11, 2020 at 6:26

1 Answer 1

Reset to default
16

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.

Improve this answer
4
  • 1
    Is there anyway I can set the native height/width to auto?
    – mikasa
    Commented May 11, 2020 at 6:39
  • 1
    So if the height/width is auto it will not work in Safari at the moment?
    – mikasa
    Commented May 11, 2020 at 6:56
  • This did the trick for me! SVG worked on all browsers except Safari without width and height. As soon as I added width and height attributes to the SVG then it rendered in Safari as well.
    – Dave
    Commented Jun 3, 2021 at 7:16
  • I was able to get it to work by only adding the 'width' attr.
    – bprdev
    Commented Oct 22, 2021 at 0:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.