Атрибут preserveAspectRatio тега <svg>

Описание

Атрибут preserveAspectRatio контролирует масштабирование и выравнивание содержимого SVG при изменении соотношения сторон. Он работает совместно с атрибутами viewBox, width и height.

Пример использования:
<svg width="300" height="150" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="45" fill="#3498db"/> </svg>

Синтаксис значения:

Компонент Варианты Описание
Выравнивание по X xMin, xMid, xMax По левому краю, центру или правому краю
Выравнивание по Y YMin, YMid, YMax По верхнему краю, центру или нижнему краю
Режим масштабирования meet, slice, none Вписать, обрезать или игнорировать пропорции

Основные режимы работы:

  • meet (по умолчанию) - сохраняет пропорции, вписывая изображение в доступную область
  • slice - сохраняет пропорции, заполняя всю область с обрезкой
  • none - растягивает изображение без сохранения пропорций

Примеры разных значений:

<!-- С сохранением пропорций (meet) --> <svg width="200" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <rect x="10" y="10" width="80" height="80" fill="#e74c3c"/> </svg> <!-- С обрезкой (slice) --> <svg width="200" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"> <rect x="10" y="10" width="80" height="80" fill="#2ecc71"/> </svg> <!-- Без сохранения пропорций (none) --> <svg width="200" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> <rect x="10" y="10" width="80" height="80" fill="#9b59b6"/> </svg>

Рекомендации по использованию:

  • Для логотипов и иконок используйте xMidYMid meet
  • Для фоновых изображений - xMidYMid slice
  • Для растягиваемых графиков - none
  • Тестируйте на разных размерах экрана

Ограничения:

  • Не работает без атрибута viewBox
  • Режим none может искажать изображение
  • В сложных SVG может требовать индивидуальной настройки

Примечание: Для адаптивных SVG всегда указывайте viewBox и подбирайте оптимальное значение preserveAspectRatio под конкретный случай использования.