CODEWITHSUNDEEP
htmlcssmacossvgsafari
jabacchetta
jabacchetta

Reputation: 50018

SVG not working in Mac Safari?

The following SVG icon works in all modern browsers except for Mac Safari:

<symbol id="text" viewBox="0 0 39 43">
  <title>Add Text</title>
  <text transform="translate(-2 -14)" fill="#FFF" fill-rule="evenodd" font-size="64" font-family="TimesNewRomanPS-BoldMT, Times New Roman" font-weight="bold">
    <tspan x="0" y="57">T</tspan>
  </text>
</symbol>

Additionally, all other icons that I'm using in the same way are showing just fine in Mac Safari.

What is it about this icon that Mac Safari doesn't like?

Upvotes: -1

Views: 1214

Answers (1)

jabacchetta
jabacchetta

Reputation: 50018

The solution for Mac Safari was to put a CSS class selector on <text> and move all of the styles there.

  • Using SVG attributes (as shown in my original example) will not work

  • Moving everything into a style attribute will not work.

  • Note: I did not test each individual attribute, so it is possible that some could potentially work fine on Mac Safari.

  • All three methods (individual attributes, style attribute, and class) appear to work fine on all other modern browsers.

Upvotes: 0

Related Questions