Работа с SVG спрайтами

GULP

gulp-svgstore

Пример svg спрайта

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"
     style="position:absolute;display: none;">

    <symbol id="icon-long-arrow" viewBox="0 0 943.4 493.4">
        <g>
            <path d="M938.5,239.3L798.9,119.3c-3-2.5-6.4-2.9-10-1.4c-3.6,1.5-5.4,4.3-5.4,8.3l10,84H127.1c-2.7,0-4.9,0.9-6.6,2.6
        c-1.7,1.7-2.6,3.9-2.6,6.6v54.8c0,2.7,0.9,4.9,2.6,6.6c1.7,1.7,3.9,2.6,6.6,2.6h666.3l-10,84c0,3.8,1.8,6.6,5.4,8.3
        c3.6,1.5,7,1,10-1.7l139.6-121.1c1.9-1.9,2.9-4.2,2.9-6.8C941.4,243.4,940.4,241.2,938.5,239.3z"/>
        </g>
    </symbol>
    <symbol id="icon-long-arrow" viewBox="0 0 943.4 493.4">
        <g>
            <path d="M938.5,239.3L798.9,119.3c-3-2.5-6.4-2.9-10-1.4c-3.6,1.5-5.4,4.3-5.4,8.3l10,84H127.1c-2.7,0-4.9,0.9-6.6,2.6
        c-1.7,1.7-2.6,3.9-2.6,6.6v54.8c0,2.7,0.9,4.9,2.6,6.6c1.7,1.7,3.9,2.6,6.6,2.6h666.3l-10,84c0,3.8,1.8,6.6,5.4,8.3
        c3.6,1.5,7,1,10-1.7l139.6-121.1c1.9-1.9,2.9-4.2,2.9-6.8C941.4,243.4,940.4,241.2,938.5,239.3z"/>
        </g>
    </symbol>
 </svg>

Где ID идентификатор картинки viewBox Размер картинки. Не забываем поставить display: none;

Использование в коде страницы

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

<svg class="icon icon-mark">
    <use xlink:href="#icon-mark"></use>
</svg>

Вставка из внешнего файла:

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

Кэширование SVG

Можно закэшировать svg спрайт используя LocaleStorage для этого есть не большой год:

• file = 'svg-sprite.html', - файл спрайта
• revision = 1; - Версия, файла

;( function( window, document )
{
    'use strict';

    var file     = 'svg-sprite.html',
        revision = 1;

    if( !document.createElementNS || !document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect )
        return true;

    var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null,
        request,
        data,
        insertIT = function()
        {
            document.body.insertAdjacentHTML( 'afterbegin', data );
        },
        insert = function()
        {
            if( document.body ) insertIT();
            else document.addEventListener( 'DOMContentLoaded', insertIT );
        };

    if( isLocalStorage && localStorage.getItem( 'srtSVGl' ) == revision )
    {
        data = localStorage.getItem( 'srtSVGdtl' );
        if( data )
        {
            insert();
            return true;
        }
    }

    try
    {
        request = new XMLHttpRequest();
        request.open( 'GET', file, true );
        request.onload = function()
        {
            if( request.status >= 200 && request.status < 400 )
            {
                data = request.responseText;
                insert();
                if( isLocalStorage )
                {
                    localStorage.setItem( 'srtSVGdtl',  data );
                    localStorage.setItem( 'srtSVGl',   revision );
                }
            }
        };
        request.send();
    }
    catch( e ){}

}( window, document ) );