Бесспорно, все мы знаем структуру SVG-спрайта: это один корневой элемент svg, внутри которого находятся области symbol, содержащие картинки. Каждому symbol присваивается уникальный id, по которому идет дальнейшее обращение к картинке. Контент, расположенный внутри symbol не отображается на странице.

<svg>
    <symbol id="icon-one">...</symbol>
    <symbol id="icon-two">...</symbol>
    <symbol id="icon-three">...</symbol>
</svg>

Часто таким образом организуются наборы пиктограмм. И, вообще, такие SVG-спрайты достаточно удобны в работе и популярны среди разработчиков.

Но что делать, когда у Вас есть спрайт, о содержимом которого Вы ничего не знаете?

Вот небольшой скрипт, который в цикле обходит все изображения внутри элемента svg и выводит их на экран:

const sprite = document.querySelector("svg");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
  <svg width="50" height="50" alt="${symbol.id}">
     <use xlink:href="#${symbol.id}" />
  <svg>
`)
});

Для примера возьмем фрагмент SVG-спрайта с набором иконок ionicons, полную версию которого можно получить на github:

Спасибо за внимание.