Подключение SVG-спрайта
Способ предлагает Osvaldas Valutis
1. Копируем код;
1. Копируем код;
;( function( window, document ){ 'use strict'; var file = 'img/sprite.svg', 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( 'inlineSVGrev' ) == revision ) { data = localStorage.getItem( 'inlineSVGdata' ); 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( 'inlineSVGdata', data ); localStorage.setItem( 'inlineSVGrev', revision ); } } } request.send(); } catch( e ){}}( window, document ) );
2. Сохраняем его в папке js проекта под названием svg.js
3. В файле index.html подключаем полученный скрипт в самом низу, перед тегом </body>
<script src="js/svg.js"></script>
4. В папку img проекта помещаем svg-спрайт
4. В папку img проекта помещаем svg-спрайт
sprite.svg (как создавать svg-спрайты говорили в этой теме)
5. svg подключаем в index.html при помощи кода:
<svg class="icon-toy" width="60" height="60"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-toy"></use></svg>