Как подключить svg спрайт в файл в html и css
Есть сгенерированый svg спрайт — sprite.svg c symbol :
Если вставлять прямо в html , то все подключается отлично —
Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:
Почему не отображается иконка и как подключить в стили css иконку из спрайта?
Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:
- Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
- Подключение файла спрайта.
- Подключение внешней таблицы стилей и стилизация самих иконок.
Подключение файла спрайта
При подключении файла спрайта через тег <img> и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег <object>
Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg
Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.
Тег <object> добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.
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 спрайта. В итоге получаем такую разметку:
Теперь добавим немного стилей:
Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства fill родительскому элементу, а у самой иконки наследуем это свойство. Таким образом получаем такую верстку:
See the Pen Svg sprite by astupakov (@astupakov) on CodePen.
Использование gulp для автоматической генерации svg спрайтов
Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.
Идея заключается в том, что мы просто перемещаем все свои svg файлы в одну папку, а gulp захватит все эти файлы и сгенерирует спрайт автоматически. Рассмотрим вкратце как это реализовать.
Устанавливаем плагин gulp-svg-sprite:
В файле gulpfile.js создаем таск для генерации спрайта:
В начале мы создаем переменную 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 спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:
Создаём и используем символьный 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 , чтобы у иконки не было чёрной заливки по-умолчанию
Получаем следующий результат
Итоги
Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.
В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки