SVG не работает в Firefox, ошибка или баг?

Question

[string15]

На сайте подгружается отдельный HTML файл, в котором объявлен один большой SVG спрайт.

<svg style="display:none">
<symbol viewBox="0 0 47.375 47.38" id="Leaf">
<path d="M71.437 1499.62s-22.24-10.18 0-32.75c22.24 22.57 0 32.75 0 32.75zm7.516-17.18l-6.536 4.16-.021 3.68 6.894-4.41a13.37 13.37 0 0 0-.337-3.43zm-15.39 3.19l6.833 4.48v-3.62l-6.453-4.15a13.622 13.622 0 0 0-.38 3.29zm6.833-1.52v-3.63L66 1477.1a21.756 21.756 0 0 0-1.464 3.24zm0-6.09v-7.04a39.184 39.184 0 0 0-3.356 4.42zm2 .28l3.629-2.6a39.493 39.493 0 0 0-3.629-4.82v7.42zm.021 2.3l-.021 3.68 5.981-3.85a21.714 21.714 0 0 0-1.337-3.01zm6.443 7.9l-6.443 4.1-.021 4.16a15.3 15.3 0 0 0 6.463-8.26zm-8.463 8.2v-4.21l-6.417-4.13c1.105 4.14 4.32 6.93 6.42 8.34zm1.1-36.9a23.7 23.7 0 1 1-23.7 23.7 23.7 23.7 0 0 1 23.703-23.7zm0 45.4a21.7 21.7 0 1 1 21.7-21.7 21.722 21.722 0 0 1-21.697 21.7z" transform="translate(-47.813 -1459.81)"/>
</symbol>
<symbol viewBox="0 0 20.63 19.719" id="basket">
<path d="M1092.58 33.46l-1.21 8.912a2.025 2.025 0 0 1-1.88 1.635h-10.88a2.025 2.025 0 0 1-1.88-1.635l-1.47-10.287a3.738 3.738 0 0 1-.13-1.055H1073a1 1 0 0 1 0-2h4a.992.992 0 0 1 .1 1.98h13.97c1.1 0 1.77 1.131 1.51 2.45zm-13.85 8.518l-1.31-9h13.2l-.03.2-1.18 8.788a.033.033 0 0 0-.01.014h-10.67zm.52 3.009a1.874 1.874 0 1 1-1.88 1.874 1.874 1.874 0 0 1 1.88-1.874zm9 0a1.874 1.874 0 1 1-1.88 1.874 1.874 1.874 0 0 1 1.88-1.874z" transform="translate(-1072 -29.031)"/>
</symbol>
<symbol viewBox="0 0 20 20" id="chekbox-off">
<path d="M402.146 290.014h11.708a4.16 4.16 0 0 1 4.16 4.16v11.651a4.161 4.161 0 0 1-4.16 4.161h-11.708a4.161 4.161 0 0 1-4.161-4.161v-11.651a4.16 4.16 0 0 1 4.161-4.16zM402 291h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3h-12a3 3 0 0 1-3-3v-12a3 3 0 0 1 3-3z" transform="translate(-398 -290)"/>
</symbol>
</svg>

На местах использую обычный вызов.

<svg width="48" height="48">
  <use xlink:href='#Leaf'/>
</svg>

В Chrome и IE все работает, в Firefox нет.

Answer 1

[Максим]

а заголовок svg прописан полностью ?

<svg  version="1.1" width="1280" height="1024"
        viewBox="0 0 1280 1024"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
 здесь ваш svg 
</svg>

Comments

[string15]

Спасибо, выручили)

[Andrey]

А мне не помогло. Все равно иконки не отображаются в FF и Edge

[Максим]

Andrew-Bogdanov: А вы как встявляете svg ? как файл или inline ?

[Yan Shatskiy]

Максим Ленский, Мне тоже не помог Ваш совет. Я вставляю svg из отдельного файла(спрайта) в html вот так:

<a href="#" class="icon-link">
   <svg class = "header-icon" width="22" height="22" >
            <use  xlink:href="img/icons.svg#chat"></use>
    </svg>
</a>

Так же попробовал перенести все "добавки" из файла со спрайтом непосредственно в html, вот так

<a href="#" class="icon-link"> 
     <svg class="icon-link" version="1.1" width = "20" height = "20" viewBox = "0 0 20 20" baseProfile="full"  
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
               xmlns:ev="http://www.w3.org/2001/xml-events">                           
           <use xlink:href="img/icons.svg#users"></use>    
     </svg>
</a>

И это так-же не сработало. В FIrefox при включённом live server иконки из спрайта не видны. В Chrome напротив всё отличною Да, я знаю про экспериментальные функции в Chrome которые и позволяют творить эти чудеса. Но хотелось бы всё таки, наладить работу в FirefFox.

[Максим]

Yan Shatskiy, меня не было - не мог ответить - если хотите кроссбраузерно тогда используйте или object или вставляйте inline code

через use тоже можно добиться но всегда надо смотреть что и где поддерживается - так как use shadow root => то у нас всегда есть подводные камни

[Yan Shatskiy]

Максим Ленский, вы могли бы привести часть кода со вставкой object?
Я когда вставляю как показано в примерах а инете в этом участке страницу (где объявляю object) выходит встроенный фрейм с полосами прокрутки. И всё равно ничего не работает. Ни в Firefox ни d Chrome.

[Максим]

Yan Shatskiy, у svg уберите width и height - если не получится - напишите сразу - я жду

[Yan Shatskiy]

Максим Ленский, Убераю width и height - плывёт вёрстка, иконки не появляются.
Я проверил, даже загруженная на хостинг верстка так себя ведет. Т.е. в Firefox иконки не видны. Версию обновил до последней. Плагинов никаких нет.

[Максим]

Yan Shatskiy, покажите свой SVG - скиньте в codepen

[Yan Shatskiy]

Максим , спасибо Вам большое за помощь!
Стал копировать svg спрайт в Codepen и нашел ошибку в структуре файла. (еще одни открывающие и закрывающие теги svg). Удалил и всё заработало.