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-спрайта. Создаем на рабочем столе папку sprite.svg, с пустыми файлами sprite-svg.html и sprite-svg.css. Открываем в блокноте файл sprite-svg.html, помещаем стандартный код html-документа с элементами и создаваемого SVG-спрайта. Присваиваем открывающему тегу для последующего присоединения стилей CSS:
SVG-спрайт логотипа и иконок сайта Структура svg-спрайта
Символьный svg-спрайт – корневой файл формата SVG, состоящий из элементов содержащих код svg-изображений. Индивидуально, элементам присвоен уникальный идентификатор id для внедрения кода svg-картинок в тело html-документа и дальнейшего обращения к ним.
Корневой элемент сайта
Корневой элемент сайта – файл любого формата, находящийся в корне сайта. Корневой элемент не нуждается в своем декларировании (объявлении в ) с указанием пути – браузеры и роботы самостоятельно находят его. К самым известным корневым элементам относятся файлы: robots.txt, sprite.svg, favicon форматов SVG, ICO, GIF, JPEG, PNG и BMP .
- Реклама на сайте | Мифы и реальность
- Движок для сайта | Какой выбрать
- Какой браузер лучше
- Оптимизация и настройка CMS DLE
- Системный администратор
- Заработок на буксах | Философия успеха
- Ошибка танкиста
Site
- 301 редирект | Permanent Redirect
- Права доступа (chmod) вида 777
- Таблица символов Юникод в HTML
- Якорь HTML | Закладка на веб-странице
- Списки HTML
- Списки HTML | Обтекание картинок
- Списки HTML | Оформление маркеров (буллетов
Windows
- Программы для выключения компьютера скачать
- Выключение компьютера по расписанию
- Задержка времени (пауза, тайм-аут) в бат-файле
- Word и Excel | Автоматическая нумерация ячеек таблицы
- Word | Разорвать и соединить таблицу
- Word | Вставить диаметр, ударение, апостроф
- Excel | Перенос строки в ячейке
- Word | Убрать горизонтальную линию
Записки алкоголика
- Позвонить оператору Водафон-Украина (МТС, UMC)
- Водафон, Киевстар, Лайф | Код USSD-запросов
- Заработок на буксах | Философия успеха
- Заработок на буксах | Мифы и реальность
Создаём и используем символьный SVG-спрайт
SVG — масштабируемая векторная графика.
Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs
В данной статье мы будем использовать иконки созданные по технологии SVG. Их отличие в том, что при изменении размеров они не теряют качества отображения, при этом весят обычно меньше, чем аналогичная иконка в другом формате, например PNG
Аналогичные иконки при масштабировании в формате SVG и PNG
Способы использования SVG-иконок
SVG-иконки можно использовать несколькими способами
1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение
При таком способе подключения, SVG-иконка будет масштабироваться без потери качества, но нельзя будет задать цвет иконки через CSS, и следовательно не получится плавно менять цвет иконки при наведении. И если в другом месте нужно будет использовать эту же иконку в другом цвете, необходимо будет создавать дополнительный файл SVG иконки
2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.
Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании
3й способ — самый оптимальный способ использовать SVG-иконки — сделать символьный SVG-спрайт. При таком способе каждая иконка отрисовывается всего один раз в скрытом блоке, а затем может быть использована неограниченное количество раз, ссылаясь на уже отрисованную иконку. При этом, одной и той же иконке в разных местах можно задавать свой цвет через CSS, следовательно не нужно дублировать иконку и можно делать плавное изменение цвета при наведении.
Этот способ и рассмотрим подробнее
Создаём и используем символьный SVG-спрайт
Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке
Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками
Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/
Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей
Первая часть — символьный SVG спрайт
Вторая часть — код использования
Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах
Добавим стили
Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться
Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke
fill — заливка иконки
stroke — цвет обводки
Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию
body < background: #121212; >.container < max-width: 1140px; margin: 0 auto; >.icons < padding: 64px 0; >.icons__flex < display: flex; align-items: center; justify-content: center; >.icons__icon:not(:last-child) < margin-right: 24px; >.icons__icon svg.icon < width: 64px; /* ширина иконки */ height: 64px; /* высота иконки */ fill: #3626a7; /* цвет заливки иконки */ transition: 0.25s; /* плавное изменение цвета при наведении */ >.icons__icon:hover svg.icon < fill: #422ecc; /* цвет заливки иконки при наведении */ >/* Скрываем блок SVG-спрайта */ .hidden
Получаем следующий результат
Как работать с SVG-спрайтами
Узнайте, как использовать SVG-спрайты для улучшения производительности сайта, управления графикой и стилизации иконок с помощью CSS.
Алексей Кодов
Автор статьи
2 июня 2023 в 11:35
SVG-спрайты представляют собой один файл, который содержит несколько SVG-изображений. Использование спрайтов может существенно сократить количество HTTP-запросов, улучшить производительность сайта и облегчить управление графическими ресурсами.
Создание SVG-спрайта
Для начала, вам необходимо создать SVG-спрайт, который будет содержать все изображения, используемые на вашем сайте. Существует несколько инструментов и сервисов, которые помогут вам сгенерировать спрайт, например, SVGSpritemapWebpackPlugin или IcoMoon.
Каждый элемент содержит уникальный id , который будет использоваться для ссылки на иконку в HTML.
Использование SVG-спрайта на веб-странице
Чтобы использовать иконку из спрайта на вашей веб-странице, вам нужно вставить следующий код:
Здесь xlink:href указывает на id символа, содержащего нужное изображение.
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Оформление SVG-иконок с помощью CSS
SVG-иконки можно стилизовать с помощью CSS, как и обычные HTML-элементы. Вот пример:
.icon < width: 32px; height: 32px; fill: #333; >.icon:hover
Таким образом, вы можете контролировать размеры, цвет и другие свойства SVG-иконок, используя привычные CSS-стили.
Преимущества использования SVG-спрайтов
- Сокращение количества HTTP-запросов, что улучшает производительность сайта
- Удобное управление графическими ресурсами
- Возможность стилизации иконок с помощью CSS
- Адаптивность и масштабируемость изображений без потери качества
�� Надеюсь, что эта статья помогла вам разобраться с использованием SVG-спрайтов в веб-разработке. Не забывайте экспериментировать и изучать новые возможности!
SVG-спрайт
Что такое SVG-спрайты, как их создавать, когда применять и как они могут помочь вам в улучшении производительности вашего сайта.
Время чтения: 8 мин
Открыть/закрыть навигацию по статье
- Кратко
- Что такое SVG-спрайт?
- Как создать SVG-спрайт
- SVG-спрайт для фона
- SVG-спрайт как стек
- Подсказки
Контрибьюторы:
Кратко
Скопировать ссылку «Кратко» Скопировано
SVG-спрайт — это файл, получаемый в результате объединения нескольких файлов SVG. Файл-спрайт используется для сокращения количества запросов к сети — вместо загрузки нескольких файлов, грузится только один. Также для уменьшении размеров и читаемости HTML-кода при многократном использовании векторной графики в разметке.
Что такое SVG-спрайт?
Скопировать ссылку «Что такое SVG-спрайт?» Скопировано
Спрайт это метод, который помогает уменьшить количество запросов сети к графическим ресурсам. В давние времена спрайты применялись для растровой графики, так как грузить большое количество изображений (обычно это были иконки) было накладно из-за особенностей протокола HTTP/1. Для каждого запроса необходимо было открывать своё соединение и дожидаться его закрытия, и только после этого можно было переходить к загрузке следующего файла. При такой реализации тратилось много времени и ресурсов на установку и закрытие соединения. Чтобы сократить накладные расходы и был придуман способ объединения нескольких файлов в один.
В настоящее время в сети используется протокол HTTP/2, который позволяет открывать несколько параллельных соединений и снизить накладные расходы. Но всё равно важно следить за нагрузкой на сеть, так как пользователи могут столкнуться с ситуацией когда их интернет-соединение является медленным и скорость загрузки ресурсов может быть критичной.
Часто SVG-графика используется для создания системы иконок и её последующего использования на сайте. Можно по-разному добавлять SVG-иконки на сайт, но наиболее распространённым способом является добавление иконок прямо в разметку страницы, так как это позволяет стилизовать SVG при помощи CSS. При таком подходе можно столкнуться с ситуацией когда на одной или нескольких страницах приходится дублировать разметку вставляя одну и те же SVG-иконку (например, иконку удаления или редактирования данных).
Использование спрайтов в данном случае позволит избежать дублирования кода и уменьшить вес HTML-файла. К тому же, если потребуется внести изменения, нужно будет изменить только один файл.
Как создать SVG-спрайт
Скопировать ссылку «Как создать SVG-спрайт» Скопировано
Предположим что уже имеется подготовленный набор отдельных SVG-иконок. Перейдём к формированию SVG-спрайта.
Для начала создадим отдельный файл с расширением .svg . Внутрь созданного файла добавим обёртку для SVG-файла состоящую из тега и атрибута xmlns , указывающего используемый диалект XML.
.svg xmlns="http://www.w3.org/2000/svg"> . svg>
Код ниже сокращён для удобства чтения.
. .svg xmlns="http://www.w3.org/2000/svg"> . symbol id="social-facebook" viewBox="0 0 6 12"> path d="M1.09903 2.72854C1.09903 . "/> symbol> symbol id="social-twitter" viewBox="0 0 16 11"> path d="M13.3758 4.62011C14.2231 . "/> symbol> . svg>
Каждый элемент содержит атрибут id с уникальным идентификатором, который будет использоваться для ссылки на иконку в HTML. Также, каждая иконка содержит атрибут view Box , который определяет размеры окна отображения. Управляя данным атрибутом, можно указать в какой части холста находится конкретная иконка. Это позволяет использовать в спрайте иконки разных размеров и масштабировать их.
svg class="social-icon" viewBox="0 0 24 24" width="24" height="24"> use href="sprite.svg#social-vk" x="0" y="0">use> svg>
Полученные таким образом элементы можно стилизовать с помощью CSS, как и обычные HTML-элементы. Вот пример:
.social-icon background-color: black; fill: white; transition: fill 0.3s ease-in-out;> .social-icon:hover,.social-icon:focus fill: rgb(160 123 80);>.social-icon background-color: black; fill: white; transition: fill 0.3s ease-in-out; > .social-icon:hover, .social-icon:focus fill: rgb(160 123 80); >
Откройте демо в новой вкладке и проверьте что иконки грузятся как спрайт в одном файле.
Преимущества данного метода:
- Сокращение количества HTTP-запросов;
- Возможность стилизации иконок с помощью CSS;
- Адаптивность и масштабируемость изображений без потери качества.
- Нельзя использовать как фоновое изображение.
SVG-спрайт для фона
Скопировать ссылку «SVG-спрайт для фона» Скопировано
Чтобы использовать SVG из спрайта как фоновое изображение придётся сформировать иконки в спрайте друг за другом (или по сетке).
Изменение фона будет происходить при помощи сдвига области просмотра SVG. Делается это с помощью тега . Этот тег связывает иконку со специальным идентификатором и определяет её область просмотра.
Область просмотра — это ограниченный прямоугольник, который определяет какая часть холста видна пользователю в данный момент.
В спецификации SVG такой способ называется именованными фрагментами.
width="24" height="72" viewBox="0 0 24 72" fill="none" xmlns="http://www.w3.org/2000/svg">svg width="24" height="72" viewBox="0 0 24 72" fill="none" xmlns="http://www.w3.org/2000/svg" > view id="icon-first-view" viewBox="0 0 24 24"/> path d="M4 12V20C4 20.5304 . "/> view id="icon-first-view" viewBox="0 24 24 24"/> path d="M4 12V20C4 20.5304 . "/> view id="icon-first-view" viewBox="0 48 24 24"/> path d="M4 12V20C4 20.5304 . "/> svg>
Для дальнейшего использования в CSS или HTML необходимо указать путь к файлу и идентификатор конкретного изображения.
.image background-image: url('fragments.svg#icon-first-view');>.image background-image: url('fragments.svg#icon-first-view'); >
Также можно воспользоваться альтернативным синтаксисом. Вместо того чтобы задавать внутри спрайта каждой иконке именованный фрагмент с использование тега , можно сразу при подключении файла указать область, которую хотите просмотреть. Для этого после адреса файла необходимо воспользоваться параметрами svg View и view Box , в котором указать желаемую область просмотра.
.image background-image: url('fragments.svg#svgView(viewBox(0, 0, 24, 48))');> .image:hover,.image:focus background-image: url('fragments.svg#svgView(viewBox(0, 24, 24, 48))');>.image background-image: url('fragments.svg#svgView(viewBox(0, 0, 24, 48))'); > .image:hover, .image:focus background-image: url('fragments.svg#svgView(viewBox(0, 24, 24, 48))'); >
При наведении курсора на иконку происходит смена области видимости внутри SVG-спрайта.
Недостатком является невозможность стилизовать иконку при помощи CSS.
SVG-спрайт как стек
Скопировать ссылку «SVG-спрайт как стек» Скопировано
Данный способ также использует именованные фрагменты, но в отличии от предыдущего способа иконки в спрайте располагаются не последовательно друг за другом, а одна под другой. Каждая иконка скрыта по умолчанию и становится видна, при ссылке на неё через именованный фрагмент.
Как и в случае с , значки не занимают своё место, поскольку они наложены друг на друга. Но они не скрыты по умолчанию, в отличие от . Вот почему нужно скрыть их с помощью display : none; , но не все, а только те, на которые не нацелен идентификатор в URL-адресе спрайта.
g display: none; > g:target display: inline; >svg xmlns="http://www.w3.org/2000/svg"> defs> style> g < display: none; >g:target < display: inline; >style> defs> g id="cat"> path d="M9 13.125C9 13.3475 . " fill="black"/> g> g id="dog"> path d="M22.4728 11.7187L20.9334 . " fill="black"/> g> svg>
Существуют разные способы использования SVG-спрайтов, каждый из которых имеет свои преимущества и недостатки. В одних случаях можно использовать иконки как фоновые изображение, но нельзя стилизовать их. В других наоборот. Важно знать различные способы применения SVG-спрайтов и их особенности, а также правильно применять их в той или иной задаче.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если использовать иконку из SVG-спрайта как фоновое изображение и при этом нужно при каком-либо взаимодействии изменить её стили (например, при наведении курсора изменить цвет), можно создать копию необходимой иконки с нужными стилями и при взаимодействии менять одну иконку на другую.