21

Im using this svg tag in my html file. It works perfectly in Chrome, but in safari the icon doesn't appear

<svg width="25" height="23" viewBox="0 0 25 23">
       <use href="./icons.svg#helemet"></use>
 </svg>

any know why?

Yonatan
  • 1,319
  • 4
  • 13
  • 32

2 Answers2

48

Safari doesn't support href yet, you need to use xlink:href instead.

href is a new feature of the upcoming SVG 2 specification. xlink:href is the SVG 1.1 version.

Chrome, Firefox and Edge support both xlink:href and href.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • And then you'll need to update the SVG root element. See https://stackoverflow.com/questions/29884930/svg-namespace-prefix-xlink-for-href-on-textpath-is-not-defined?noredirect=1&lq=1 – John Tang Boyland Jul 23 '18 at 10:19
  • 1
    Safari just added support for `` this week, but slightly older versions still need `xlink:href`. So while it feels lame to use a deprecated attribute, it's the safest right now for cross-browser support. – dmbaughman Apr 11 '19 at 22:15
  • @dmbaughman do you have a reference for that support? It would be good to update https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use. Thanks! – starpause Jul 12 '19 at 18:28
1

Here is an update from the future 2019. Just add xlink:

<svg role="img">
    <use xlink:href="/path/to/svg#id"></use>
</svg>

Works with IOS 12

Alexandr
  • 921
  • 7
  • 16