Від автора: Припустимо, що ви створюєте систему SVG іконок. Ви можете створювати SVG спрайт з великою кількістю елементів symbol вручну, або використовувати для цього інструмент IcoMoon або grunt-svgstore. Що ви будете робити з файлом sprite.svg?
Як варіант, можна включити його в самому початку документа і використовувати елемент .
…
…
Даний варіант працює, але в даному випадку не кращим чином використовується кешування. Якщо на сайті включено HTML кешування, то на кожній сторінці буде присутній великий шматок однакового SVG коду, а це трохи зайве. Не кажучи вже про те, що HTML парсер буде змушений зчитувати цю інформацію в документі при кожному завантаженні сторінки, перш ніж зможе перейти до контенту.
Можливо, краще скористатися кешування браузера, як ми це робимо з іншими ресурсами. Ми можемо добитися цього, використовуючи в нашому елемент use посилання на зовнішній ресурс. Але у деяких браузерів це викликає труднощі. Зокрема, це відноситься до будь-яких версій IE і деякими старими версіями браузерів на «движку» WebKit.
Інструмент SVG for Everybody, який ми порекомендували тут, здебільшого працює добре. Але є браузери, які він не може визначити по параметру UserAgent.
Альтернативний підхід полягає в тому, щоб використовувати Ajax для завантаження спрайту (постійно) і додавати його на сторінку. Це означає, що ви можете використовувати браузерне кешування для даного SVG, і це буде працювати скрізь, де працює вбудований (инлайновый) SVG.
Припустимо, що у вас є готовий SVG документ (sprite.svg), і ви запитуєте його через Ajax (sprite.svg). Зробити це буде не так просто. Ви повинні переконатися в тому, що SVG документ буде завантажено в потрібному просторі імен, перш ніж додавати його на сторінку. На щастя, ми можемо використовувати HTML парсер, який зазвичай цим і займається. Тому ми додаємо SVG документ елемент
var ajax = new XMLHttpRequest();
ajax.open(«GET», «svg/sprite.svg», true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement(«div»);
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
Якщо ви використовуєте jQuery, то повертаються їм дані вже будуть відформатовані в SVG документ, тому вам потрібно примусово перетворити їх назад у рядок перед вставкою в елемент div і, нарешті, потім на сторінку.
$.get (svg/sprite.svg», function(data) {
var div = document.createElement(«div»);
div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
document.body.insertBefore(div, document.body.childNodes[0]);
});
Пам’ятайте про те, що в даному випадку ви вказуєте в елементі use просто ідентифікатор, а не зовнішній ресурс.
Здається, це добре працює в IE і Android:
Також пам’ятайте, що інструмент SVG for Everybody допомагає вам трансформувати макет 
для браузерів, в яких немає потрібної підтримки, якщо цей момент важливий для вас, то рішення залишається за вами.
