SVG images not rendering properly in Safari

Question

I'm using an SVG image generated by Figma in my project. It works perfectly in every browser except Safari

This is the expected result and what gets rendered by Chrome, IE, Edge, and Firefox

This is what gets rendered in Safari in desktop What gets rendered in safari on tablets

And this is what gets rendered in Safari on mobile

As you can see from the screenshots, the envelope SVG image isn't rendered at all on Safari desktop and only partially rendered on mobile. On tablets, it seems like the image layer for both the envelope and card (both SVGs) isn't rendered, leaving only the gradient layer.

I'm using the SVG in the HTML as an <img> I tried using <iframe> and <object> but no difference.

I also checked that the MIME type is image/svg+xml

I suspect that Figma exported the SVG in a way that's incompatible with Safari, but I don't know what changes I should make to it.

The SVG file itself is quite long, so I'll paste the parts up to <defs> here and here's the link to the full file

<svg width="931" height="932" viewBox="0 0 931 932" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="envelope-lid__background" filter="url(#filter2_ddddd)">
  <path id="envelope-lid__background__paper" d="M831.539 396.004L568.68 68.7688C565.5 64.8096 559.912 63.7347 555.465 66.2266L187.878 272.186L831.539 396.004Z" fill="url(#pattern0)"/>
</g>

<g id="envelope-lid__inlay" filter="url(#filter3_ddddd)">
  <path id="envelope-lid__inlay__foil-texture" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#pattern1)"/>
  <path id="envelope-lid__inlay__color" class="envelope-inlay-color" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="black" fill-opacity="0.6"/>
  <path id="envelope-lid__inlay__gradient" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#paint0_linear)" fill-opacity="0.5"/>
</g>

Thank you!

Answer 1

Safari won't support the <g clip-path="url(something)"> added by Figma. These are used to group vectors on Figma, but Safari needs them to be prefixed with -webkit- as you can see here: Why doesn't CSS clip-path with SVG work in Safari?

Once you remove these <g clip-path></g> tags your SVG should be displayed correctly.

Answer 2

I had the same problem and the issue got resolved by removing the clipPath attribute of the <g> element:

Not working in Safari Version 16.4 (18615.1.26.11.23):

  <svg width="24" height="25" viewBox="0 0 24 25" fill="none">
    <g clipPath="url(#clip0_1616_17127)">
      <path
        d="M15 6.5L9 12.5L15 18.5"
        stroke={
          gray ? "#C0C5CB" : black ? "#111416" : white ? "#FFF" : "#5CA7FF"
        }
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </g>
    <defs>
      <clipPath id="clip0_1616_17127">
        <rect
          width="24"
          height="24"
          fill="white"
          transform="translate(0 0.5)"
        />
      </clipPath>
    </defs>
  </svg>

Rendered correctly in Safari Version 16.4 (18615.1.26.11.23):

  <svg width="24" height="25" viewBox="0 0 24 25" fill="none">
    <g>
      <path
        d="M15 6.5L9 12.5L15 18.5"
        stroke={
          gray ? "#C0C5CB" : black ? "#111416" : white ? "#FFF" : "#5CA7FF"
        }
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </g>
    <defs>
      <clipPath id="clip0_1616_17127">
        <rect
          width="24"
          height="24"
          fill="white"
          transform="translate(0 0.5)"
        />
      </clipPath>
    </defs>
  </svg>