SVG-спрайти

Як і звичайні png-спрайти, svg-спрайти - це сукупність окремих картинок в одному файлі.

На відміну від png-спрайтів svg-спрайти вставляються на веб-сторінку у HTML-код, а не у CSS у вигляді фонового зображення.

Для використання svg-спрайтів необхідно вставити куди-небудь у веб-сторінку svg-файл і сховати його. Наприклад, одразу після <body>:


				<body>

				  <svg style="display: none;" ... >

				    ...

				  </svg>

Іконки будуть використовувати простір імен SVG, тому обов'язково потрібно вказати xmlns та xmlns:xlink.

А ось vievBox у кожної іконки буде свій і для всього SVG він не потрібен.

Кожна іконка огортається в тег <symbol> з ідентифікатором та viewBox:


				<svg

				    style="display: none;"

				    xmlns="http://www.w3.org/2000/svg"

				    xmlns:xlink="http://www.w3.org/1999/xlink"

				  >

				  <symbol id="iconFb" viewBox="0 0 24 28">

				    <ellipse ... />

				    <path ... />

				    <path ... />

				  </symbol>

				  <symbol id="iconTw" viewBox="0 0 25 26">

				    <path ... />

				  </symbol>

				</svg>

Для вставки іконок використовуємо тег <use>:


				<svg width="60" height="60">

				  <use xlink:href="#iconFb" />

				</svg>

				<svg width="24" height="24" class="fb-small">

				  <use xlink:href="#iconFb" />

				</svg>

				<svg width="24" height="24">

				  <use xlink:href="#iconTw" />

				</svg>

Проте, така вставка іконок не дозволить використовувати CSS для зміни кольорів заливки, ліній і т.п., а також не дасть можливості взаємодіяти з JS.

Якщо вам потрібен повний контроль над іконками і картинками з svg-спрайта - їх доведеться вставляти в HTML-код повністю, можна оптимізувати процес за допомогою JS:


				<i class="svg-icon iconFb"></i>

				<i class="svg-icon iconTw"></i>
 
				<i class="svg-icon iconIg"></i>