<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 xlink:href="sprite.svg#sprite1"></use>
</svg>.nameClass {
width: 64px;
}