SVG Спрайти

Масштабування зображення в спрайтах заощаджує трафік і зменшує кількість запитів HTTP. Спрайти дуже важливий момент при будівництві будь-яких веб-сайтів, особливо з адаптивним дизайном для різних мобільних пристроїв.

Файли SVG (Scalable Vector Graphics) рідко зустрічаються в Інтернеті. Причини:

  • Файли SVG не працюють у старих версіях браузера Internet Explorer 6-8
  • Технологію було створено 1999 року — здається, старою та нецікавою
  • Мало інструментів для векторного дизайну
  • SVG на основі XML, це означає багато файлів.

SVG ідеально підходить для логотипів, схем та піктограм. На відміну від растрових зображень SVG файли можна масштабувати до будь-якого розміру без втрати якості та маніпулювати за допомогою клієнтського та серверного коду. На відміну від webfont значків, SVG файли можуть мати різні кольори, градієнти і навіть складні фільтри.

Спрайти растрового зображення

Створення спрайтів із зображень хороша методика і зараз. Якщо потрібно регулярно використовувати графіку на сайті, ви можете помістити їх в один образ, а не в окремі файли, наприклад, на малюнку нижче спрайти сайту pixel.com :

sprite

Цей приклад містить кілька значків та логотипи ресурсів в одному файлі розміром 26 x 211px. Файл можна стиснути без втрати якості, щоб зменшити його вагу, але головна перевага спрайту він вимагає лише один запит HTTP для всіх значків, а не кілька запитів для кожного значка, якщо вони будуть окремо. Справа в тому, що на завантаження значків окремо йде більше часу, тому що браузери мають обмежену кількість паралельних запитів для одного домену.

Для того щоб визначити місце логотипу pixel.com в спрайте, потрібно в таблицю стилівдля тега додати тло, в нашому випадку це h1 :

Не обов'язково це робити вручну, є багато хороших sprite css generator, які роблю цей процес автоматично.

Спрати зображення SVG

Спрайти SVG також можна розмістити в одному файлі. Спрайти SVG мають перевагу перед растровими спрайтами, так як SVG має будь-який розмір без втрати якості, достатньо вказати назву, без розрахунку позиції.

Для прикладу, створимо дуже простий SVG, це буде три геометричні фігури — зелене коло, червоний квадрат і синій трикутник:

Геометричні фігури SVG розташовані одна над одною, розділені шарами g , які мають клас sprite та унікальний ідентифікатор id . На зображенні нижче, всі три шари:

Зараз потрібно додати пару правил CSS, які крім активного шару, приховують шари файлу SVG, активний шар визначається за допомогою псевдо-селектора :target

Існує кілька методів, щоб додати спрайти SVG на веб-сторінку: object/embed, iframe, тег img або background. Демонстрація показує всі методи і вони добре працюють в Internet Explorer 9+, Firefox і Opera 12 і нижче.

На жаль, img та CSS background методи не спрацьовують у Webkit/Blink браузерах Chrome, Safari та Opera 15+. Немає жодної гарантії, що стеки SVG коли-небудь буде повністю підтримується. Це погано, тому що цей спосіб дуже корисний.

Якщо Webkit, раптом, коли-небудь приєднатися до стеків SVG, object або embed це найкраще крос-браузерне рішення, наприклад:

Таке застосування має перевагу, ви можете оновити SVG sprite за допомогою DOM.