Svg sprite — руководство по работе с svg спрайтами. Генерация спрайтов c помощью gulp

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

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

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

<svg>

    <symbol viewBox="0 0 448 512" id="icon1">
        {/* Иконка 1 */}
    </symbol>

    <symbol viewBox="0 0 448 512" id="icon2">
        {/* Иконка 2 */}
    </symbol>

    <symbol viewBox="0 0 448 512" id="icon3">
       {/* Иконка 3 */}
    </symbol>

</svg>

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

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

<svg>
<use xlink:href="/sprite.svg#icon1"></use>
</svg>

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

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

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

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

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

<svg>
        <symbol viewBox="0 0 448 512" id="instagram">
            <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
        </symbol>

        <symbol viewBox="0 0 448 512" id="facebook">
            <path d="m279.14 288 14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/>
        </symbol>

        <symbol viewBox="0 0 448 512" id="twitter">
           <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
        </symbol>    
    </svg>

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

<body>
    <ul class="social">
        <li class="social__item">
            <a href="" class="social__link">
                <svg class="social__icon">
                    <use xlink:href="#instagram"></use>
                </svg>
            </a>
        </li>
        <li class="social__item">
            <a href="" class="social__link">
                <svg class="social__icon">
                    <use xlink:href="#facebook"></use>
                </svg>
            </a>
        </li>
        <li class="social__item">
            <a href="" class="social__link">
                <svg class="social__icon">
                    <use xlink:href="#twitter"></use>
                </svg>
            </a>
        </li>
    </ul>

    <svg>
        <symbol viewBox="0 0 448 512" id="instagram">
            <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
        </symbol>

        <symbol viewBox="0 0 448 512" id="facebook">
            <path d="m279.14 288 14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/>
        </symbol>

        <symbol viewBox="0 0 448 512" id="twitter">
           <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
        </symbol>    
    </svg>
</body>

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

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: inherit;
    height: 60px;
    width: 60px;
    transition: .2s;
}

Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства 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 спрайта:

{% macro svgIcon(icon, class = '', path = '/assets/img/sprite.svg') %}
    <svg class="svg-icon {{ class }}">
      <use xlink:href="{{path}}#{{ icon }}"></use>
    </svg>
{% endmacro %}

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

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

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

{% import ./_macro.html" as macro %}

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

{{macro.svgIcon('instagram')}}

{{macro.svgIcon('instagram', ’social__icon’)}}

{{macro.svgIcon('instagram', ’social__icon’, ‘assets/img/socialSprite.svg’)}}

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

Заключение

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

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

Svg спрайты