Как растянуть SVG всю ширину блока?

[nikki4]

<div class="logo">
	<a href="/" class="logo-link">
		<img src="/logo.svg" class="logo-svg">
	</a>
</div>

.logo  {
  width: 250px;
  height:100%;
}

Как сделать, чтобы лого было шириной 250 и высотой 100%? т.е. во весь блок.

Если выбрать GIF лого - оно само растягивается. SVG же автоматом уменьшается визуально.

как я понял, надо что-то в самом свг поправить:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1407.9 938.4" style="enable-background:new 0 0 1407.9 938.4;" xml:space="preserve">

 

Пробовал менять preserve на default, но не сработало

Может тут что-то еще надо поменять?

Edited January 24, 2022 by nikki4

[npofopr]

Сперва я бы почистил вашу svg — https://jakearchibald.github.io/svgomg/

В остальном svg работает также как обычная картинка. Ну и вы стили для .logo-svg пишите, а не для .logo

Или укажите для .logo-svg {height: 100%; width:100%}
Для .logo-link скорее всего потребуется {display: block}

[nikki4]

Спасибо, обнаружил следующее:

Все оказалось проще, у свг высота 160, соответсвенно при уменьшении - сжимается и становится маленьким.

У гифки , которую я сделал из свг - другие пропорции почему-то получились и в итоге нормально отображается.

В общем надо как-то поменять пропорцию у свг