Про использование SVG на сайте

Меню

Отредактировано: 15 Сентября 2019

Сервисы для работы с svg:

Найти svg иконки можно на www.flaticon.com.
Оптимизатор для svg.
iconizr.com позволяет получить архив с svg спрайтами и data:image/svg+xml кодом для применения.
Url-encoder для svg. Выдает код который можно вставлять в css.
Еще один url-encoder для svg.

Для поддержки старых браузеров можно использовать скрипт svg4everybody.

SVG создаются в векторных программах вроде Adobe Illustrator.

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

SVG спрайты

В использовании svg, завоевала популярность технология svg-спрайтов, в которой коды множества svg картинок объединяются в 1, а после подключаются на странице, с помощью якоря.

Примерный код внутри спрайта:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="icon-name" viewBox="214.7 0 182.6 792">
     <!-- <path> код svg изображения -->  
  </symbol>
  
  <symbol id="icon-name-2" viewBox="0 26 100 48">
     <!-- <path> код svg изображения -->  
  </symbol>
  
</svg>

Примерный код для подключения картинки:

<svg>
  <use xlink:href="img/sprite.svg#icon-name"></use>
</svg>

Стоит отметить, что есть еще структура svg спрайта с применением тегов <g> внутри контейнера <defs>, — такой способ считается устаревшим, т.к. при этом параметры viewBox для картинки выносились в html код. Теги <symbol> же позволяют задавать себе свой viewBox.

Создавать SVG спрайты можно как в ручную, так и используя gulp / grunt.

SVG в CSS стилях

SVG можно встраивать в CSS. При этом теряется возможность управления его параметрами. Самый простой путь для вставки SVG в CSS — вставить файл как и обычное изображение:

background: url(image.svg);

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

.image {
  background: url(image.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .image {
  background-image: url(image.png);
}

или поступить следующим образом (в случае отсутствия поддержки svg, браузер проигнорирует правило, воспользовавшись более ранним правилом):

.image {
  background: url(image.png);
  background-image: url(image.svg), none;
}

Так же можно вставить svg в css с помощью data:image/svg+xml, переведя его в формат base64, либо зашифровав в формат url с помощью url-encoder (не забыв перед этим оптимизировать):

.icon.wood{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='398.86' cy='399.96' r='49.79' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Ccircle cx='398.92' cy='396.72' r='230.83' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Ccircle cx='398.92' cy='396.72' r='230.83' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Cpath d='M360.3 169.11c15.39-12.7-26.53-34.81-26.53-34.81l48-1.19L409.68 166M279.85 198.43c9.79-17.39-37.27-22.94-37.27-22.94l44.35-18.37 37.87 20.62M215.33 254.72c2.88-19.75-43-8-43-8l34.77-33.09 42.75 5.62M175.37 330.46c-4.41-19.46-43 8-43 8l20.55-43.38L194.81 285M165.33 415.5c-11.12-16.57-37.26 23-37.26 23l3.57-47.87 35.47-24.53M186.54 498.46C170.21 487 160 533.28 160 533.28l-13.89-45.95 24.27-35.64M236.18 568.23c-19.36-4.82-12.21 42-12.21 42l-29.49-37.88 9.82-42M307.59 615.48c-19.8 2.47 3.72 43.61 3.72 43.61l-41.14-24.74-5.94-42.71M391.22 633.89c-17.59 9.42 19.16 39.35 19.16 39.35L363.1 665l-20.9-37.72M475.87 621c-13 15.12 32 29.82 32 29.82l-47.1 9.28-33.04-27.7M550.21 578.49c-6.71 18.79 40.61 16.31 40.61 16.31l-40.61 25.6-40.81-13.93M604.3 512.1c.5 19.95 43.76.61 43.76.61l-28.69 38.49-43.09 1.68M630.88 430.7c7.64 18.43 41.05-15.17 41.05-15.17L659 461.76l-39.6 17.07M626.41 345.19c13.76 14.45 32.85-28.92 32.85-28.92l4.57 47.78L633 394.22M591.48 267c18 8.54 20.25-38.8 20.25-38.8l21.45 42.94-17.9 39.23M530.77 206.62c19.9 1.48 4.93-43.48 4.93-43.48l35.46 32.35-2.59 43M452.4 172.12c19.1-5.78-11-42.35-11-42.35l44.72 17.43 13.07 41.09' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='14'/%3E%3C/svg%3E");
  ;}

Подробнее о преобразовании svg в формат data:image/svg+xml

SVG vs Font

Какие иконки использовать, svg или шрифтовые? — это один из множества спорных вопросов, вокруг которого гуляет множество противоречивых мнений. Для себя я выбрала svg, ниже представлены доводы, почему svg мне кажется более правильным выбором:

Некоторые устройства не поддерживают области частного использования Unicode, они игнорируют глифы в областях частного использования Unicode и отображают вместо них смайлики.
Чёрные квадратики и крестики в Opera Mini.
У браузеров встречаются проблемы с отображением шрифтов, например, недавно, в Chrome Canary и Beta появилась такая ошибка — после определённого периода неактивности страницы шрифт сбрасывается и заменяется на системный. После того как произошел сброс шрифта, текст отображается в Georgia, и, если шрифт при этом отвечает за отображение иконок, страница заполняется мусором из чёрных квадратиков, после чего пользоваться ей нормально становится невозможно.
Браузеры могут отрисовывать шрифты по разному, и применять свои методы экранного сглаживания шрифта (разная плотность на разных настройках в одной ОС и на разных ОС, непопадание линий в пикселов) например, в Firefox шрифты немного жирнее чем в других популярных браузерах.
Не всегда есть возможность использовать генерируемый контент. Для использования шрифтовых иконок необходимо использовать свойство content, а если элемент уже использует псевдоэлементы :before и :after, тогда приходиться воротить костыли, ктому же, и не все элементы поддерживают генерируемое содержимое.
Шрифтовые иконки ограничиваются только одним цветом.
SVG позволяет использовать иконки с анимацией.

Остальные варианты подключения SVG

На случай если надо использовать быстрое единичное подключение svg картинки, можно использовать 1 из нижеперечисленных вариантов. Каждый из этих вариантов имеет те или иные проблемы совместимости.

Можно встроить код изображения прямо в html.

Можно использовать тег img:

<img src="icon.svg" alt="Icon">

Можно использовать элемент object:

<object data="image.svg" type="image/svg+xml" />

или iframe:

<iframe src="image.svg"></iframe>

SVG можно создать динамически с помощью JavaScript и ввести в HTML DOM. Этим способом могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.

front-end