Почему появляются отступы вверху и внизу изображения?
Это один из багов отображения SVG-картинок во flex-контейнерах. Это вообще больная тема, там эти картинки то схлопываются по ширине, то получают странные отступы в отдельных браузерах. Можно решить, обернув картинку в div с явным указанием display=block для него:<div class="test">
    <img src="https://123.svg"/>
</div>.test {
    display: block;
}
потому что у тебя пропорции картинки такие) ты делаешь width:100% соответственно height выставляется автоматически в пропорциях вот тебе и белые полосы сверху и с низу. если напишешь height: 100% вместо width полосы уже по бокам будет)