How to scale SVG. placed in img?

Question

SVG

I'm trying to scale the logo depending on the screen width.
The CSS option that worked, but it's pixelated, jumpy:
.logo {
margin-left: 0px !important;
position: absolute;
.media(lg, {
height: 240px;
});
.media(md, {
height: 200px;
});
.media(sm, {
height: 200px;
});
.media(xs, {
height: 95px;
});
.media(xxs, {
height: 80px;
});*/
}
As a result, my artisanal code was rejected by the employer and they were asked to use height as a percentage.... (
It is not possible to insert into the code as svg to use the viewBox, because the code will litter the html, it is too massive ...
There were thoughts to use the minimum and maximum heights, but something with the implementation did not work out either. Stupid .. I just can not make friends with SVG. I read the article https://css-tricks.com/scale-svg/ and still can't find a way out. Please help with styling!

Answer 1

"because the code will litter the html," is that what the employer said?
Then write some javascript that will load your svg and insert it into the page as a viewBox