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

Сервисы для работы с 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 vs Font

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

  1. Некоторые устройства не поддерживают области частного использования Unicode, они игнорируют глифы в областях частного использования Unicode и отображают вместо них смайлики.
  2. Чёрные квадратики и крестики в Opera Mini.

  3. У браузеров встречаются проблемы с отображением шрифтов, например, недавно, в Chrome Canary и Beta появилась такая ошибка — после определённого периода неактивности страницы шрифт сбрасывается и заменяется на системный. После того как произошел сброс шрифта, текст отображается в Georgia, и, если шрифт при этом отвечает за отображение иконок, страница заполняется мусором из чёрных квадратиков, после чего пользоваться ей нормально становится невозможно.

  4. Браузеры могут отрисовывать шрифты по разному, и применять свои методы экранного сглаживания шрифта (разная плотность на разных настройках в одной ОС и на разных ОС, непопадание линий в пикселов) например, в Firefox шрифты немного жирнее чем в других популярных браузерах.

  5. Не всегда есть возможность использовать генерируемый контент. Для использования шрифтовых иконок необходимо использовать свойство content, а если элемент уже использует псевдоэлементы :before и :after, тогда приходиться воротить костыли, ктому же, и не все элементы поддерживают генерируемое содержимое.

  6. Шрифтовые иконки ограничиваются только одним цветом.

  7. 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.

?

Благодарю за ответ!

Была ли эта информация полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1