svg sprite не отображается в Firefox

Question

Не отображаются иконки из sprite в Firefox.
Проект на nuxt, раньше всегда работало всё нормально и отображалось кроссбраузерно, а сейчас в новом проекте возникла такая проблема.

Читал что необходимо спрайт добавить в html при помощи <object>. Но не понятно для чего, если это только предупреждает пользователя, что svg не поддерживается.

<object type="image/svg+xml" data="sprite.svg">
   Your browser does not support SVG
</object>`

Вот так вызываю:

Вот так делаю в файле sprite.svg:

Браузер не видит его вообще:

Код иконки

    <symbol id="logo" viewBox="0 0 165 26">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9139 11.4611L16.6966 15.2444C17.1004 15.6441 17.1004 16.2953 16.7007 16.6992C16.4988 16.9011 16.2351 17 15.9714 17C15.7077 17 15.444 16.9011 15.2421 16.6992L11.4594 12.9159C10.1902 13.8638 8.68208 14.3377 7.16982 14.3377C5.33204 14.3377 3.49838 13.6371 2.1015 12.24C0.745826 10.8882 0 9.08315 0 7.17091C0 5.25867 0.745826 3.4577 2.1015 2.10182C3.45305 0.745939 5.25787 0 7.16982 0C9.08177 0 10.8825 0.745939 12.2381 2.10182C14.7847 4.64873 15.0113 8.65455 12.9139 11.4611ZM3.55607 10.7811C4.55325 11.7784 5.8636 12.2771 7.16982 12.2771C8.47605 12.2771 9.7864 11.7784 10.7836 10.777C12.7738 8.78642 12.7738 5.54303 10.7836 3.55248C9.81936 2.58812 8.53374 2.05648 7.16982 2.05648C5.80591 2.05648 4.52028 2.58812 3.55607 3.55248C2.59185 4.51685 2.06029 5.80267 2.06029 7.16679C2.06029 8.53091 2.59185 9.81673 3.55607 10.7811Z" fill="#00366B"/>
  </symbol>

Что хочет firefox?

Answer 1

Почти всё вы сделали правильно:

Добавили спрайт в веб страничку с помощью <object>
Вызываете иконки по id с помощью <use>

Вот стиль в шапке svg спрайта лишний: style="display:none;"

Уберите его, он не нужен, избыточен, даже вреден. У вас в спрайте код иконок обернут в теги <symbol>, которые, по умолчанию, итак прячут иконки.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
     <symbol id="logo" "viewBox="0 0 165 26" >
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9139 11.4611L16.6966 15.2444C17.1004 15.6441 17.1004 16.2953 16.7007 16.6992C16.4988 16.9011 16.2351 17 15.9714 17C15.7077 17 15.444 16.9011 15.2421 16.6992L11.4594 12.9159C10.1902 13.8638 8.68208 14.3377 7.16982 14.3377C5.33204 14.3377 3.49838 13.6371 2.1015 12.24C0.745826 10.8882 0 9.08315 0 7.17091C0 5.25867 0.745826 3.4577 2.1015 2.10182C3.45305 0.745939 5.25787 0 7.16982 0C9.08177 0 10.8825 0.745939 12.2381 2.10182C14.7847 4.64873 15.0113 8.65455 12.9139 11.4611ZM3.55607 10.7811C4.55325 11.7784 5.8636 12.2771 7.16982 12.2771C8.47605 12.2771 9.7864 11.7784 10.7836 10.777C12.7738 8.78642 12.7738 5.54303 10.7836 3.55248C9.81936 2.58812 8.53374 2.05648 7.16982 2.05648C5.80591 2.05648 4.52028 2.58812 3.55607 3.55248C2.59185 4.51685 2.06029 5.80267 2.06029 7.16679C2.06029 8.53091 2.59185 9.81673 3.55607 10.7811Z" fill="#00366B"/>
      </symbol> 
      <use xlink:href="#logo" />
      </svg>

Если это не поможет, хотя всё в виде локальных файлов работает одинаково во всех браузерах.

В этом случае попробуйте добавить SVG Mime Types в .htaccess

Вот именно эта ваша цитата заставляет так подумать:

Но не понятно для чего, если это только предупреждает пользователя, что svg не поддерживается.

# Add SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz

Answer 2

В общем, не знаю актуально или нет спустя 3 года, но мне сейчас было актуально ))

Если иконки корректно отрабатывают в chrome, то не надо ковыряться в самом синтаксисе. Нужно открыть ваш файл в браузере sprite.svg, который лежит по пути, допустим https://site.ru/image/sprite.svg. И если это сделать в firefox, там будет ошибка. У меня ругалось на отсутствие закрывающего тега </path>, добавил его и все заработало, как на скрине. Еще есть момент, что с локалки не работаю спрайти, а на серваке работают.

БЛОГ НА HUSL

svg sprite не отображается в Firefox

Ответы (2 шт):