Как масштабировать SVG. помещенный в img?

Question

[Лилия]

Пытаюсь масштабировать логотип в зависимости от ширины экрана.

CSS вариант, который работал, но он пиксельный, скачками:

.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;
});*/
}
В итоге мой кустарный код работодателем было забракован и им было предложено использовать height в процентном эквиваленте.... (

Вставить в код как svg, чтобы использовать viewBox нет возможности, ибо код замусорит html, слишком массивный...
Были мысли использовать минимальную и максимальную высоту, но что-то с реализацией тоже не получилось. Туплю.. никак не могу подружиться c SVG. Читала статью https://css-tricks.com/scale-svg/ и все равно выход найти не могу. Прошу помощь со стилизацией!!

Answer 1

[Петр]

"ибо код замусорит html," это работодатель так сказал?
Тогда напишите javascript, который загрузит ваш svg и вставит в страницу как viewBox

Comments

[Лилия]

Благодарю!