Как изменить размеры svg через css?

Пользователь

от willa_will , в категории: HTML/CSS , 3 года назад

Как изменить размеры svg через css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kendall_mckenzie , 3 года назад

@willa_will  Изменить размеры svg через css можно с помощью width :


1
<img src="1.svg" width="128">


Пользователь

от kameron , 2 года назад

@willa_will 

Существует несколько способов изменения размера SVG через CSS:

  1. Использование свойства width и height:
1
2
3
4
svg {
  width: 100px;
  height: 100px;
}


  1. Использование свойства viewBox для задания размеров:
1
2
3
4
5
svg {
  width: 100%;
  height: 100%;
  viewBox: 0 0 100 100;
}


  1. Использование transform для изменения масштаба:
1
2
3
svg {
  transform: scale(2);
}


  1. Использование свойства preserveAspectRatio:
1
2
3
4
5
svg {
  width: 100%;
  height: 100%;
  preserveAspectRatio: none;
}


Выбор метода зависит от требуемого результата и ситуации.