Завантаження SVG спрайту з допомогою Ajax

11

Від автора: Припустимо, що ви створюєте систему 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 спрайту з допомогою Ajax

Також пам’ятайте, що інструмент SVG for Everybody допомагає вам трансформувати макет Завантаження SVG спрайту з допомогою Ajax для браузерів, в яких немає потрібної підтримки, якщо цей момент важливий для вас, то рішення залишається за вами.