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

Описание

Атрибут viewBox определяет систему координат и область просмотра для элемента <svg>. Он задаёт видимую часть SVG-изображения и его масштабирование.

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

Синтаксис viewBox:

Параметр Описание
min-x Смещение по оси X (обычно 0)
min-y Смещение по оси Y (обычно 0)
width Ширина системы координат
height Высота системы координат

Основные функции:

  • Определяет видимую область SVG-контента
  • Задаёт пользовательскую систему координат
  • Обеспечивает правильное масштабирование
  • Позволяет "приближать" отдельные части изображения

Пример с масштабированием:

<svg width="100" height="100" viewBox="50 50 100 100"> <circle cx="100" cy="100" r="50" fill="#e74c3c"/> </svg>

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

  • Всегда указывайте viewBox для масштабируемых SVG
  • Сохраняйте пропорции с width/height
  • Используйте preserveAspectRatio для контроля пропорций
  • Для иконок используйте круглые числа (0 0 24 24)

Ограничения и особенности:

  • Без viewBox SVG может отображаться некорректно
  • Отрицательные значения могут обрезать изображение
  • Не влияет на абсолютные единицы внутри SVG (px, pt)
  • Требует точного соответствия с внутренними координатами

Пример с preserveAspectRatio:

<svg width="300" height="150" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="45" fill="#2ecc71"/> </svg>

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