Подключение 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>