Svg sprites - проблема подключения
Всем привет, искал решение на свой вопрос, но все предложенные способы не подошли. Возможно, кто-то решал подобную проблему и сможет мне помочь.
Моя Gulp сборка преобразует svg в спрайт файл подобного типа 
Вставляю в код и обращаюсь по id
<svg class="compare-tab__mark">
<use xlink:href="./img/icons/icons.svg#mark" />
</svg>
Работаю в VSCode, запускаю сборку или открываю файл через Go Live, все отображается и работает. Но открываю просто html закинув в браузер и не видит svg. Я уже возился с относительным путем к файлу, но проблема не решилась. Файл лежит в папке на хостинге папка>img>icons>icons.svg Подскажите, пожалуйста, кто понимает, где или что я не так делаю? Большое спасибо!
Ответы (1 шт):
У тебя в файле svg в svg, так делать нельзя, весь файл sprite должен быть а все иконки что ты туда вставляешь должен поменять на symbol
<svg xmlns="http://www.w3.org/2000/svg" style="display: block;">
<symbol id="icon-logo" .......>
<path>......</path>
<path>......</path>
<path>......</path>
</sybol>
</svg>
И только после такого получится подключить иконки ссылаясь на них.
<svg width="175px" height="31px">
<use xlink:href="#icon-logo"></use>
</svg>
В киноке цвета недолжны подключаться id, т.к. у тебя на странице могут быть больше одной одинаковой иконки.
Возможно есть и другие методы, но я эксперементировал только с атирубатами и заметил, что можно их убрать из файла и задавать при обращении к ним, если у вас в разных местах иконки должны отличаться например в пропорциях.