SVG use not working in Safari

Question

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?

Answer 1

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.

Answer 2

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