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

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

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

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

const sprite = document.querySelector("svg");
const symbols = sprite.querySelectorAll("symbol");
symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
  

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

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