Как уменьшить размер иконки в svg через css?

@elian.swift 

Чтобы уменьшить размер иконки в SVG через CSS, вы можете использовать свойство width или height с единицей измерения px или %.

Например, если вы хотите уменьшить размер иконки до 50 пикселей в ширину, вы можете добавить следующее правило CSS для вашего элемента SVG:

1
2
3

svg {
  width: 50px;
}

Если вы хотите уменьшить размер иконки до 50% от ее изначального размера, вы можете добавить следующее правило CSS:

1
2
3

svg {
  width: 50%;
}

Вы также можете комбинировать оба свойства width и height, чтобы установить конкретные размеры для вашей иконки:

1
2
3
4

svg {
  width: 50px;
  height: 50px;
}

Или для изменения размера с сохранением пропорций, можно использовать свойство transform и его метод scale:

1
2
3

svg {
  transform: scale(0.5);
}

Это уменьшит размер вашей иконки в два раза с сохранением пропорций.

@elian.swift 

Также можно использовать флекс-свойства или grid для управления размерами svg внутри контейнера. Например, используйте свойство flex или grid со значением auto, чтобы svg автоматически уменьшился или увеличился в соответствии с размерами контейнера:

1 2 3

.container { display: flex; align-items: center; justify-content: center; }

.svg-icon { flex: auto; max-width: 100%; max-height: 100%; }