Какой способ подключения svg на сайт все же оптимальный?
Я за 2й способ. Используя тег use вставляем id символа, а перед этим вставляем весь спрайт на страницу. Этого способа достаточно, что бы через css спокойно менять размеры, заливку. Чаще всего такой способ и нужен. Просто используя конструкции серверного языка, вставить содержимое на страницу. Я это делаю обычно перед тегом </body>
Можно каждую иконку вставлять svg кодом, как это делает github. Скорей всего на сервер у них есть какая-то функция, которая просто вставляет содержимое указанной иконки. На php можно просто использовать функцию include();
Можно просто собрать весь спрайт в 1 иконку и так же через тег use вставлять их на страницу, указываю путь к id символа:<use xlink:href="/app/img/icons.svg#ico"></use>
Вставлять фоном можно, но я не рекомендую, т.к. теряется возможность изменять свойства через css. Про размытие слышу 1 раз.
Все из способов верные, с точки зрения спецификации. Но с последним способом у меня были проблемы. Иногда иконка не отображалась, в IE вообще так не выводятся, но это его не доработка.
Вот видосик, для большего понимания https://www.youtube.com/watch?v=TNX0-JLdM_U
Я за 2й способ. Используя тег use вставляем id символа, а перед этим вставляем весь спрайт на страницу. Этого способа достаточно, что бы через css спокойно менять размеры, заливку. Чаще всего такой способ и нужен. Просто используя конструкции серверного языка, вставить содержимое на страницу. Я это делаю обычно перед тегом </body>
Можно каждую иконку вставлять svg кодом, как это делает github. Скорей всего на сервер у них есть какая-то функция, которая просто вставляет содержимое указанной иконки. На php можно просто использовать функцию include();
Можно просто собрать весь спрайт в 1 иконку и так же через тег use вставлять их на страницу, указываю путь к id символа:<use xlink:href="/app/img/icons.svg#ico"></use>
Вставлять фоном можно, но я не рекомендую, т.к. теряется возможность изменять свойства через css. Про размытие слышу 1 раз.
Все из способов верные, с точки зрения спецификации. Но с последним способом у меня были проблемы. Иногда иконка не отображалась, в IE вообще так не выводятся, но это его не доработка.
Вот видосик, для большего понимания https://www.youtube.com/watch?v=TNX0-JLdM_U