в svg в данный момент стоит fill="red" но почему-то не красная как покрасить?
Не красная она потому что у всех элементов внутри задан другой fill, который перебивает.
Либо красить по отдельности либо убрать fill у дочерних и оставить только у svg.
Либо вообще убрать из svg и задавать через стили fill.
Либо оставить как есть и использовать в стилях как mask (для псевдо), меняя цвет с помощью background-color