Как добавить SVG на страницу правильно?

Вступление

Всем привет, недавно задумался, а как же лучше подключить вектор на страницу? Вспомнил четыре способа и сейчас расскажу о них. У каждого способа добавить svg на свою страницу есть особенности. Что же это за способы?

1. как картинку
2. добавить svg sprite
3. добавить svg inline
4. с помощью css

Добавить SVG на страницу как картинку

Добавить svg на страницу картинкой — довольно просто: так же как и растровую картинку. Но тут есть пара моментов. Картинка должна быть контентной. Нужно следить что бы у самого вектора или у тега img были прописаны размеры. Это необходимо для того что бы рисунок не растягивался на всю ширину экрана. Часто приходится видеть как при загрузке станицы появляются огромные картинки, а при подгрузке стилей — страница прыгает. На вид не очень! А если по какой-то причине не загрузились стили? Иконка 20×20 растянется и может занять добрую половину контента.

Впрочем, при любом способе стоит задавать размеры. Да и не только вектору: PageSpeed часто ругается на отсутствие явно заданных размеров для любой графики.

Довольно часто svg используют для того что бы взаимодействовать с картинкой посредством js или css. Но в таком случае это работать не будет. Можно добавить анимированную картинку, но взаимодействовать с ней нельзя.

SVG sprite

Довольно хороший способ отобразить вектор на странице несколько раз. Но как создать спрайт и использовать? Если у вас сборщик проекта — стоит только подключить нужный плагин и настроить. Небольшой спрайт можно и вручную создать, его структура может быть примерно такой:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="ava-default">
    ...
  </symbol>
  <symbol id="cat-logo" viewBox="0 0 117 92">
    ...
  </symbol>
</svg>

В этом примере symbol это и есть включенный вектор в спрайт. Его атрибуты такие же как и у самих иконок. Только id это название файла который используется в symbol. Не стоит забывать что у любого svg есть минимальные размеры. По этому стоит спрайт скрыть.

Ну и добавить svg можно следующим образом:

<svg width="50" height="50">
  <use href="#ava-default"></use>
</svg>

Если же у вас внешний спрайт, то перед id необходимо указать путь до svg спрайта.

Тут ещё один момент: если изображение контентное, то необходимо его сделать изображением(до бавить role и подпись). В случае когда изображение декоративное, вектор необходимо скрыть от скринридера (focusable и aria-hidden)

Как спрайт влияет на загрузку страницы?

Это зависит от того сколько в нем иконок и какой они величины. Нужно подобрать правильный баланс. Если две три иконки по одному килобайту — это вполне приемлемо, а если спрайт весит сотни килобайт? И это не шутка. Встречал такие креативы, что челюсть отвисала когда только видел размер html. Такие спрайты стоит избегать по тому что долгая загрузка большого html и рендеринг громадного спрайта довольно сильно замедлит появление первого контента на странице. В то же время пара десяток svg в спрайте в целом положительно повлияют на загрузку страницы. Но тут каждый вектор должен быть максимально оптимизирован. Советую этот сервис для гибкой оптимизации вектора.

Но в отличии от следующего способа спрайт меньше засоряет html код.

Inline

Если svg вам нужен как статическая картинка, много весит — это худший способ добавить изображение на страницу. Но, добавить три маленькие иконки и вы ничего не потеряете. В проекте одна строка кода с подключением вектора не испортит вид, и html не сильно раздуется. При этом открывается вся мощь вектора. Теперь можно не только при ховере менять цвет, но и скрывать отдельные элементы, двигать посредством js. У меня кстати есть такой пример с котиком. Это только маленький примерчик больших возможностей вектора! В интернет магазинах у фото товара меняют цвета, аналитики создают диаграммы, ну а дизайнеры крутые анимации.

SVG to CSS

Не часто такое встретишь, но все таки бывает. Данный способ очень сильно увеличивает размер файла стилей! Им нужно пользоваться крайне осторожно! Почему? Пишу и плачу: небольшой креатив из одной страницы написан на фреймворке, следом подключают css с фоновыми картинками вектором, забывая про клип пас и другие возможности css3 и html5. Если есть несколько элементов с разными svg-то лучше создать отдельный файл, где вектор прописан и подключить его внизу страницы. Но перед этим необходимо позаботиться о том что бы сам элемент был прописан в основном файле стилей с расположением и размерами.

В данном случае и плюсов то не особо много... разве что при загрузке страницы «меньше» подключений. Если вектор действительно простой — то можно сделать фон какому-то блоку. Ну а лучше всего данный способ подойдет для прелоадера или чего-то подобного. Только такой способ раздувает css.

Я так на работе и поступаю. Когда настраиваю LazyLoad, подключаю js плагин, и копирую из текстового файла инициализацию скрипта и небольшой css с одним селектором прелоадера. Ну а как же добавить svg в css? Как всегда, есть для этого готовое решение.

Итог

Добавить svg на страницу довольно просто. Нужно только выбрать наиболее подходящий способ.