SVG не отображается на Firefox, но в Chrome и края работает отлично

Question

У меня есть небольшая проблема, я привык использовать иконки SVG таким путем:

span{ 
 
    width:30px; 
 
    height:30px; 
 
} 
 
span svg{ 
 
    width: inherit; 
 
    height: inherit; 
 
    display:block; 
 
    fill: red; 
 
}

<svg style="display: none;"> 
 
    <symbol id="arrow" viewBox="0 0 250 250"> 
 
     <path d="M70.9 245.5c-1.7 1.7-3.8 2.5-6.2 2.5s-4.5-.8-6.2-2.5c-3.4-3.4-3.4-8.9 0-12.3L166.8 125 58.6 16.8c-3.4-3.4-3.4-8.9 0-12.3 3.4-3.4 8.9-3.4 12.3 0l114.4 114.4c3.4 3.4 3.4 8.9 0 12.3L70.9 245.5z"/> 
 
    </symbol> 
 
</svg> 
 

 
<span> 
 
    <svg class="icon" viewBox="0 0 250 250"> 
 
     <use xlink:href="#arrow"></use> 
 
    </svg> 
 
</span>

Недавно xlink:href атрибут устарел для SVG2 поэтому я решил удалить все xlink:href из проекта оставляя hrefMDN Doc

Как вы можете видеть на MDN Docs, в РЕКОМЕНДАЦИЯ это использовать href вместо xlink:href, и он отлично работает на Chrome и Edge, но нет в Firefox.

Это ссылка на проект Link, если вы откроете сайт с помощью Chrome или Edge, вы увидите небольшие значки в верхней части навигации, но нет в Firefox.

¿Может ли кто-нибудь дать мне решение?

P.D: Извините за мой английский.

Answer 1

Поддержка href придет в Firefox 51.

Firefox 51 будет выпущен 24 января 2017 года, но вы можете попробовать nightly прямо сейчас, если хотите проверить его.

До этого вам просто нужно придерживаться xlink: href (или обоих), если вы хотите совместимость с Firefox.