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-спрайте, примерно таков:
- Рисуем, качаем, находим картинки иконок;
- Картинки форматов ICO, GIF, JPEG, PNG или BMP генерируем в SVG в любом онлайн-генераторе. Входной формат изображения для SVG-спрайта – картинка-SVG-спрайт, размер картинки – не имеет значения;
- Генерируем SVG-спрайт из SVG-картинок, опять-таки – в любом онлайн-генераторе, коих немеряно в Сети;
- Размещаем SVG-спрайт на сайте. Традиционное размещение файла в корне сайта избавит от лишних записей в коде;
- Прописываем картинку из SVG-спрайта в HTML-код веб-страницы;
- Подключаем 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 ...