Не применяются стили к SVG

Недавно при работе с одним из проектов у меня возникла задача: мне нужно было вставить на страницу множество svg иконок. Причем это были не просто иконки а сложные схемы и их было очень много.

Чтобы не заниматься рутинной работой, было принято решение автоматизировать этот процесс. Найдены нужные инструменты, настроена сборка - все работало как нужно.

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

В чем проблема сразу понять не удалось

В ходе экспериментов я выяснил, что если вставлять на страницу по 1 схеме, то все они выглядят как нужно. Но если вставлять несколько, то все кроме первой ломаются.

Отмечу, что стили у меня были написаны во внешнем файле css. Чтобы исключить этот фактор, было принято решение настроить прокидывание стилей инлайн, прямо в файлы svg.

Подобрал инструментарий, настроил сборку, все работает. Но эффекта это не дало. Все также стилизуется только 1 svg иконка, а остальные ломаются.

В чем же тут дело?

После нескольких неудачных попыток, я понял, что нужно внимательно проверить разметку разных схем. И обнаружил, что они содержат элементы с одинаковыми id. Бинго!

Решение оказалось очень простым. Чтобы стилизовать несколько SVG файлов и чтобы к ним начали применяться стили, достаточно удостовериться, что внутреннее содержимое каждого файла уникально по id. Вот и все.