SVG » Web Мастерская | Блог

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым:

<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="sprite1" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite1" -->
	</symbol>

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так:

Выделить

<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так:

Выделить

<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>:

Выделить

<svg class="nameClass">
	<use

...

Жалоба

Web Мастерская»Блог