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

Описание

Атрибут height определяет вертикальный размер элемента <svg>. Он задаёт высоту SVG-изображения и работает в паре с атрибутом width.

Пример использования:
<svg width="200" height="100" viewBox="0 0 200 100"> <rect x="10" y="10" width="180" height="80" fill="#2ecc71"/> </svg>

Допустимые форматы значений:

Тип значения Пример Применение
Пиксели (по умолчанию) height="150" Фиксированный размер в px
Проценты height="50%" Относительно родительского контейнера
Относительные единицы height="5em" Зависит от размера шрифта

Ключевые особенности:

  • Определяет внешнюю высоту SVG-контейнера
  • Без указания может привести к неожиданному сжатию
  • В сочетании с viewBox обеспечивает масштабирование
  • Может быть переопределён через CSS

Пример с сохранением пропорций:

<svg width="300" height="150" preserveAspectRatio="xMidYMid meet"> <circle cx="150" cy="75" r="70" fill="#9b59b6"/> </svg>

Практические рекомендации:

  • Всегда указывайте вместе с width
  • Для адаптивности используйте % + viewBox
  • Сохраняйте соотношение сторон оригинального изображения
  • Для иконок используйте стандартные размеры (16x16, 24x24, 32x32)

Потенциальные проблемы:

  • Искажение содержимого при несоответствии viewBox
  • Ограниченная поддержка vh/vw единиц в старых браузерах
  • Процентные значения требуют явного размера у родителя

Примечание: Для сложных SVG-композиций рекомендуется предварительно рассчитывать оптимальное соотношение width/height на основе viewBox.