Какой способ подключения svg на сайт все же оптимальный?

Question

[HamSter]

Есть несколько способов подключения svg на сайт, но так и не могу выбрать для себя лично оптимальный. Зачастую svg на сайте это иконки, стрелочки, галочки которые удобнее задавать в css в :after или :before фоновыми изображениями.

1. Встраивать прямо в код весь svg:

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"/></svg>

Один большой минус - громоздкий html.

2. svg спрайт. Громоздкий html.



3. Генерировать svg в font. такой способ больше всего нравится, потому что удобно манипулировать и html и css, но многие заказчики отказываются от такого способа, якобы svg получается размытым.

Вопрос: какой же все же способ подключения svg наиболее оптимальный, удобный, а главное качественный? Правда ли что генерация svg в фон дает размытый результат в некоторых браузерах (сафари, ios), потому как в основных современных браузерах недостатков не обнаружила?

Answer 1

[Дима Паутов]

Я за 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

Comments

[Александр Лысенко]

Еще нельзя забывать о кешировании. Далеко не все способы позволяют внести SVG в кеш.

[Дима Паутов]

AlexanderZe: гитхабу, вставлять инлайного иконки это как-то не мешает.

[Александр Лысенко]

Дима Турков: а оно ему надо? )

[HamSter]

Спасибо за ответ, но вот кстати со спрайтами в ие и ios жуткие траблы, то видит, то не видит иконки, а вот font выводит как положено

Answer 2

[Алексей Николаев]

Вопрос: какой же все же способ подключения svg наиболее оптимальный, удобный, а главное качественный?

Оптимального не существует, все зависит от конкретной задачи. Для спрайтов и иконок я предпочитаю инлайновый svg - да, это увеличит html на десяток килобайт, но не критично, gzip наше все. Зато это дает огромную гибкость в управлении иконками и их стилизации. Забейте на громоздкий html - сейчас ситуация такова, что в любом случае приходится чем-то жертвовать, идеальных технологий нет. Поэтому нужно выбирать - красивый html или гибкость в управлении. Используя же систему сборки + шаблонизатор вроде pug, вы вообще с html не будете иметь дела.

Для отдельных изображений сподручнее применять отдельные же svg-файлы. Для простых иконок, с которыми априори не нужно никаких манипуляций, можно использовать фоновый svg.

Как вариант, можно захардкодить стили (анимацию там, эффекты) прямо в svg - это нормально, ведь адаптивность для svg только так и можно сделать. Тогда вы сможете сохранить нехилую долю возможностей вкупе с изящной реализацией, подключая svg к странице посредством, например, fragment identifiers.

Генерировать svg в font - это костыль. Нормально, если шрифт генерируется в формат svg, но если спрайт генерируется в font, то это уже извращения. Кроме того, браузеры по-разному рендерят решения на основе данного подхода, что снижает качество продукта.

Comments

[IvanN777]

И коверкает дизайн и поддерживаемость странички, для дальнейшей разработки.
Svg - не работает в старых браузерах, не поддерживает некоторые стили, и еще надо встраивать в страницу.
Один жирный минус.