Как уменьшить svg CSS

Чтобы уменьшить размер SVG-изображения с помощью CSS, можно использовать свойство transform:

svg {
  transform: scale(0.5); /* уменьшить размер вдвое */
}

Это свойство позволяет изменять размер, поворачивать и трансформировать элементы. В данном случае мы используем функцию scale(), которая уменьшает размер по каждой оси в соответствии с указанным коэффициентом. В этом примере мы уменьшаем размер SVG-изображения вдвое.

Если нужно изменить размер элемента SVG с сохранением пропорций, то можно использовать только одну функцию scale():

svg {
  transform: scale(0.5); /* уменьшить размер вдвое */
  transform-origin: center; /* сохранить центр элемента */
}

Свойство transform-origin позволяет задавать точку, от которой осуществляется трансформация. В данном случае мы устанавливаем точку в центр SVG-изображения, чтобы соответствующий участок не смещался при изменении размера.

Кроме того, можно уменьшить SVG-изображение, задав новые размеры через CSS свойства width и height. Однако при этом картинка будет растягиваться или сжиматься, что может привести к искажению пропорций. Также необходимо убедиться, что оригинальный размер SVG-изображения указан в процентах, а не в пикселях или других единицах измерения, чтобы изменения размеров через CSS были корректными.