Как подключить svg спрайт

SVG спрайты

В целях оптимизации и удобства при многократном использовании SVG изображений можно объединить в один файл-спрайт. Как это сделать? Для примера возьмем несколько изображений:

У SVG есть несколько элементов-контейнеров – , и , лучшим для спрайтов является т.к. он поддерживает все атрибуты как у

Вывод осуществляется с помощью элемента с ссылкой на файл спрайта и id изображения.

Как подключить svg спрайт в файл в html и css

Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:

Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
Подключение файла спрайта.
Подключение внешней таблицы стилей и стилизация самих иконок.

Подключение файла спрайта

При подключении файла спрайта через тег и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег

Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg

Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.

Тег добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей

Можно сделать специально для svg внешний файл стилей Svgstyle.css и разместить его в той же папке, что и index файл и затем подключить его к главной таблице стилей.

UPD 19.05.2017

Подключение с помощью background-image

.wrapperSvgImage < background-image: url(http://s.cdpn.io/3/kiwi.svg); width: 100px; height: 82px; background-size: cover; border: 1px solid green; >

SVG-спрайт

Что такое SVG-спрайты, как их создавать, когда применять и как они могут помочь вам в улучшении производительности вашего сайта.

Время чтения: 8 мин

Открыть/закрыть навигацию по статье

Кратко
Что такое SVG-спрайт?
Как создать SVG-спрайт
SVG-спрайт для фона
SVG-спрайт как стек
Подсказки

Контрибьюторы:

Обновлено 24 апреля 2024

Кратко

Скопировать ссылку «Кратко» Скопировано

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">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-second-view" viewBox="0 24 24 24"/> path d="M4 12V20C4 20.5304 . "/> view id="icon-third-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-спрайта как фоновое изображение и при этом нужно при каком-либо взаимодействии изменить её стили (например, при наведении курсора изменить цвет), можно создать копию необходимой иконки с нужными стилями и при взаимодействии менять одну иконку на другую.

Svg спрайты

Всем привет! В этой статье мы рассмотрим работу с svg спрайтами, как их создавать и подключать. Для начала разберемся что такое спрайт. Спрайт — это один большой графический файл, в котором объединены несколько небольших изображений. Спрайты были очень популярны, когда в качестве графики использовали растровые изображения. Создавали один большой файл, который содержит иконки, смайлики, логотипы, после чего через фоновое изображение в CSS и позиционирование показывали только ту часть графики, которая необходима. Это делается для уменьшения количества запросов к серверу, тем самым увеличивая скорость загрузки сайта. Svg спрайт аналогичен: в нем все наши svg изображение зашиты в один файл. Но работать с ним нужно немного иначе.

Как сделать svg спрайт

Что бы создать svg спрайт, создаем svg файл, например, sprite.svg. В него поместим корневой элемент svg. Далее вставляем svg код каждого изображения, обрамляя его тегом symbol. Всем элементам symbol назначаем уникальный id:

Как использовать svg спрайты

Что бы вывести любую иконку из svg спрайта, необходимо использовать тег svg, в котором через конструкцию use указываем ссылку на файл и id изображения:

Так же, можно просто скопировать весь svg спрайт в html страницу и использовать элемент use, передавая только id изображения.

CSS стили в svg спрайтах

Основным преимуществом использования svg спрайтов является возможность стилизовать иконки через CSS стили. Мы можем менять размер, цвет, фон иконок, а также — менять стили при наведении. Для этого в спрайте необходимо удалить атрибуты fill, stroke, style, так как они имеют большой приоритет. Далее просто в CSS задавать стили для svg элемента.

Пример использования svg спрайта

Давайте для примера использования svg спрайтов сделаем блок с иконками социальных сетей. Скачаем три svg иконки и сделаем из них спрайт. В итоге получим:

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

Теперь добавим немного стилей:

body < background-color: #333; >.social < display: flex; justify-content: space-between; background-color: #fff; list-style-type: none; width: 300px; padding: 10px 20px 10px 20px; margin: 0 auto; border-radius: 30px; >.social__link < fill: #333; >.social__link:hover < fill: #E67E22; >.social__icon

Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства fill родительскому элементу, а у самой иконки наследуем это свойство. Таким образом получаем такую верстку:

See the Pen Svg sprite by astupakov (@astupakov) on CodePen.

Использование gulp для автоматической генерации svg спрайтов

Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.

Идея заключается в том, что мы просто перемещаем все свои svg файлы в одну папку, а gulp захватит все эти файлы и сгенерирует спрайт автоматически. Рассмотрим вкратце как это реализовать.

Устанавливаем плагин gulp-svg-sprite:

npm install gulp-svg-sprite –S

В файле gulpfile.js создаем таск для генерации спрайта:

const gulp = require('gulp'); const svgSprite = require('gulp-svg-sprite'); function svgsprite()< let config = < shape: < dimension: < maxWidth: 500, maxHeight: 500 >, spacing: < padding: 0 >, transform: [< "svgo": < "plugins": [ < removeViewBox: false >, < removeUnusedNS: false >, < removeUselessStrokeAndFill: true >, < cleanupIDs: false >, < removeComments: true >, < removeEmptyAttrs: true >, < removeEmptyText: true >, < collapseGroups: true >, < removeAttrs: < attrs: '(fill|stroke|style)' >> ] > >] >, mode: < symbol: < dest : '.', sprite: 'sprite.svg' >> >; return gulp.src("src/img/svgIcons/*.svg") .pipe(svgSprite(config)).on('error', function(error)< console.log(error); >) .pipe(gulp.dest("dist/img/ ")); > exports.svgsprite = svgsprite;

В начале мы создаем переменную config с настройками для плагина, в которой говорим, что спрайт будет создаваться через элемент symbol и называется spite.svg. Так же, удаляем ненужные атрибуты и оптимизируем графику.

Далее указываем, что файлы лежат в папке src/img/svgIcons/, а создавать спрайт нужно в папку dist/img/. Плагин автоматически генерирует id для каждого изображения из его имени, по этому иконкам нужно давать осмысленные названия. Дале используем этот спрайт так как мы делали это раньше.

Использование миксинов для создания svg спрайтов

Каждый раз вставлять спрайт через svg не очень удобно. Если вы используете какой-то html препроцессор, то эту задачу можно упростить, создав некий миксин для вставки спрайта. Рассмотрим такую реализацию на примере шаблонизатора nunjucks.

В nunjucks для подобных задач используются макросы. Для начала создаем отдельный файл для всех макросов _macro.html. В нем создаем макрос svgIcon для вывода изображений из svg спрайта:

Этот макрос принимает 3 параметра:

Id изображения;
Произвольный класс изображения. По умолчанию значение пустое. Для удобства каждой иконке мы добавляем класс svg-icon;
Путь к файлу svg спрайта. По умолчанию принимает значение, которое установили в настройка gulp файла для генерации спрайта.

Далее необходимо импортировать этот файл в основной документ:

Теперь макрос готов к использованию. Ко всем макросам можно обратится через переменную macro. Рассмотрим пару примеров вызова:

В первом примере мы просто выводим иконку, у которой id равно instagram. Во втором варианте добавляется класс social__icon. В третьем примере мы изменяем путь к спрайту.

Заключение

На этом пока все. Мы рассмотрели работу с svg спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:

Использует один http запрос;
Есть возможность изменять стили через CSS;
Не теряется качество при масштабировании;
Довольно прост в реализации.