markdown SVGспрайты

Posted 2021-05-05

# Работа с 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 ) );