Интернетчик » site » SVG-спрайт логотипа и иконок сайта

SVG-спрайт логотипа и иконок сайта

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

Векторные форматы – простые тексты, легко открываются и редактируются в notepad-e. Текстовое указание параметров узловых точек и характеристик соединяющих их линий для векторного построения графики изображения браузеру легко масштабировать SVG-картинки в неограниченных пределах и без потери качества.

Никакого дополнительного софта создание SVG-спрайта не требует. Начальную генерацию SVG-файлов производим на онлайн-сервисах, коих в Сети немеряно. Окончательная сборка sprite.svg – в Notepad-е, не сочтите за мазохизм.

SVG – векторная графика, имеющая ряд преимуществ перед растровой. Создание и размещение SVG-спрайта, содержащего изображения иконок сайта и его логотипа – тема этой статьи. Для создания SVG-спрайта не требуется дополнительный софт. Работаем в онлайн-сервисах и Notepad-e, не сочтите за мазохизм.

Спрайт – файл-набор сервисных картинок (иконок), содержащий несколько мелких изображений, вызываемых к отрисовке на экране пользователя программными средствами браузера.

История растра. С незапамятных времен, растровый спрайт использовался верстальщиками для ускорения загрузки и работы сайта. Стародавний спрайт собирался в фотошопе в единый сервисный файл формата PNG или JPEG, к файлу присоединялся кусочек CSS-кода, задающий правила отрисовки нужного участка изображения. Растровые PNG-спрайты уходят в прошлое, уступая место векторным SVG-спрайтам по весу загружаемого файла, качеству отрисовки (масштабирования) изображения и удобству программного использования.

Создание SVG-спрайта

Алгоритм создания иконок сайта на SVG-спрайте, примерно таков:

  1. Рисуем, качаем, находим картинки иконок;
  2. Картинки форматов ICO, GIF, JPEG, PNG или BMP генерируем в SVG в любом онлайн-генераторе. Входной формат изображения для SVG-спрайта – картинка-SVG-спрайт, размер картинки – не имеет значения;
  3. Генерируем SVG-спрайт из SVG-картинок, опять-таки – в любом онлайн-генераторе, коих немеряно в Сети;
  4. Размещаем SVG-спрайт на сайте. Традиционное размещение файла в корне сайта избавит от лишних записей в коде;
  5. Прописываем картинку из SVG-спрайта в HTML-код веб-страницы;
  6. Подключаем CSS к картинке из SVG-спрайта, устанавливаем размеры и визуальные эффекты.

изображения масштабируемых

sprite.svg – файл векторного формата SVG, содержащий изображения пользовательских иконок сайта и пришедший на смену стандартному sprite.png, неудобного и громоздкого растрового формата. Использовать sprite-файл формата SVG с иконками сайта верстальщику гораздо проще – снижается нагрузка на отдающий сервер и трафик пользователя, а самое главное – увеличивается скорость загрузки и работы веб-ресурса.

Онлайн-сервис «Собрать SVG-спрайт»:

Создание SVG-спрайта. Создаем на рабочем столе папку sprite.svg, с пустыми файлами sprite-svg.html и sprite-svg.css. Открываем в блокноте файл sprite-svg.html, помещаем стандартный код html-документа с элементами <svg> и <symbol> создаваемого SVG-спрайта. Присваиваем открывающему тегу <symbol> id=”logo” для последующего присоединения стилей CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
 <link type="text/css" rel="stylesheet" href="styles.css" >
 <title>SVG-спрайт логотипа и иконок сайта</title>
</head>
<body>
 <svg>
  <symbol id=”logo”>
   Логотип сайта
   (первая картинка SVG-спрайта)
  </symbol>
 </svg>
</body>
</html>

Структура svg-спрайта

Символьный svg-спрайт – корневой файл формата SVG, состоящий из элементов <symbol> содержащих код svg-изображений. Индивидуально, элементам <symbol> присвоен уникальный идентификатор id для внедрения кода svg-картинок в тело html-документа и дальнейшего обращения к ним.

Корневой элемент сайта

Корневой элемент сайта – файл любого формата, находящийся в корне сайта. Корневой элемент не нуждается в своем декларировании (объявлении в <head>) с указанием пути – браузеры и роботы самостоятельно находят его. К самым известным корневым элементам относятся файлы: robots.txt, sprite.svg, favicon форматов SVG, ICO, GIF, JPEG, PNG и BMP ...