So I need to hide my menu and only show it when I press a tab. What I did was write the following class:

.not-visible {
    transform: scale(0);
    height: 0px;
    width: 0px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

.not-visible * {
    margin: 0;
    padding: 0;
    height: 0px;
    width: 0px;
}

This works perfectly so that the content doesn't take up any space. But there's a problem here - when I do this, my SVG image doesn't display. After some reasoning, I found out that if you have visibility: hidden; in a class and in an item inside this class width height = 0, it will appear like this. Why does SVG work like this? I try to write these 3 parameters myself

.repair-price-box .button-close {
    border: 1px solid black;
    visibility: visible;
    height: 25px;
    width: 25px;
}

But it doesn't change anything. It's like once I change these parameters, they break the SVG forever (as long as this code exists).