SVG viewBox: полное руководство с примерами

Этот атрибут принимает четыре числа, разделенные пробелами или запятыми: viewBox="min-x min-y width height". Первые два значения (min-x, min-y) задают координаты верхнего левого угла этого виртуального окна относительно внутренней системы координат SVG. Вторые два значения (width, height) определяют ширину и высоту этого окна. Важно понимать, что эти числа не имеют прямых единиц измерения (вроде пикселей) внутри файла — они задают пользовательскую систему координат, в которой вы рисуете свои фигуры.

Давайте рассмотрим простой пример. У нас есть SVG-холст размером 200 на 200 пикселей.

<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- Квадрат, растянутый на всю систему координат viewBox -->
  <rect x="0" y="0" width="100" height="100" fill="lightblue"/>
  <!-- Круг в центре системы координат viewBox -->
  <circle cx="50" cy="50" r="20" fill="darkblue"/>
</svg>

В этом примере атрибуты width и height SVG (200х200) задают фактический размер изображения на веб-странице. Атрибут viewBox же говорит: «Возьми область моего холста от точки (0,0) до точки (100,100) и растяни ее на эти 200х200 пикселей». В результате наш квадрат и круг займут весь доступный размер, а все расчеты координат внутри SVG будут вестись относительно системы от 0 до 100.

Здесь работает простое правило: область, заданная viewBox, автоматически масштабируется (растягивается или сжимается), чтобы вписаться в отведенный ей физический размер (width/height). Этот процесс называется равномерное масштабирование по умолчанию, но его поведение можно менять с помощью атрибута preserveAspectRatio. Давайте разберем на примере.

<svg width="300" height="150" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="coral"/>
</svg>

Физический размер SVG — 300x150 (соотношение 2:1). Область viewBox — 100x100 (соотношение 1:1). По умолчанию SVG будет стараться вписать viewBox в заданный размер, сохраняя пропорции (preserveAspectRatio="xMidYMid meet"). Это значит, что квадратная область viewBox будет отмасштабирована до 150x150 (чтобы поместиться по высоте) и будет выровнена по центру по горизонтали. По бокам останутся пустые области (по 75 пикселей с каждой стороны).

Он состоит из двух частей: выравнивания (align) и метода масштабирования (meet или slice). Формат записи: preserveAspectRatio="[align] [meetOrSlice]".

Выравнивание (align)

Определяет, как будет позиционироваться viewBox внутри viewport’а. Комбинация из xMin, xMid, xMax и yMin, yMid, yMax. Например, xMidYMid (значение по умолчанию) центрирует по обоим осям.

Методы meet и slice

1. meet (по умолчанию): Масштабирует viewBox так, чтобы он полностью поместился в область width/height, сохраняя пропорции. Могут появиться пустые поля.
2. slice: Масштабирует viewBox так, чтобы он полностью заполнил область width/height, сохраняя пропорции. Часть viewBox будет обрезана.

<svg width="300" height="150" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin slice">
  <rect x="0" y="0" width="100" height="100" fill="lightgreen"/>
  <circle cx="50" cy="50" r="40" fill="darkgreen"/>
</svg>

Для полного отключения сохранения пропорций (растянуть viewBox на всю область как растровую картинку) используется специальное значение preserveAspectRatio="none". В этом случае координаты viewBox будут просто нелинейно отмасштабированы до размеров viewport’а.

Вы можете выбрать любую удобную для вашей задачи систему. Например, вы можете рисовать график, где viewBox="0 0 1000 500", и одна единица будет условно равна тысяче рублей или десяти километрам. А можете создать иконку с viewBox="0 0 24 24", что стало стандартом для многих наборов иконок. Все элементы внутри (<circle>, <path>, <rect>) будут использовать эти пользовательские единицы, что делает код чище и логичнее.

Одним из ключевых преимуществ такого подхода является независимость от абсолютного размера. Вы можете легко менять атрибуты width и height SVG, не пересчитывая координаты каждой фигуры внутри. Вся графика автоматически перемасштабируется. Это делает SVG идеальным для создания адаптивных интерфейсов.

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

1. Создание «бесконечного» холста и панорамирование

Задайте viewBox с шириной и высотой, равными, например, 1000. Ваш физический SVG может быть маленьким (400x300). Используя JavaScript, вы можете динамически менять первые два параметра viewBox (min-x, min-y), создавая эффект камеры, которая перемещается по огромному холсту. Это основа для интерактивных карт или редакторов.

const svg = document.querySelector('svg');
let panX = 0, panY = 0;
function pan(dx, dy) {
    panX += dx;
    panY += dy;
    svg.setAttribute('viewBox', `${panX} ${panY} 400 300`);
}
// pan(100, 50); // Сдвинет "камеру" вправо и вниз

2. Зуммирование

Меняя третий и четвертый параметры viewBox (width, height), вы можете увеличивать или уменьшать масштаб. Уменьшение этих чисел — зум-in (приближение), увеличение — зум-out (отдаление).

3. Кадрирование и отображение части SVG

Допустим, у вас есть большая SVG-карта. Чтобы показать только определенный регион, вы просто вычисляете его bounding box и устанавливаете эти значения в viewBox. Это мощный инструмент для работы со спрайтами в SVG.

4. Адаптивность без медиазапросов

Комбинация viewBox и CSS — мощный инструмент. Установите в SVG width="100%" и height="auto", а viewBox задайте фиксированные пропорции. Контейнер будет резиновым, а содержимое — идеально масштабируемым. Или наоборот, задайте height="100vh", а width="auto" для заполнения по высоте.

<svg viewBox="0 0 200 50" style="width: 100%; height: auto;">
  <rect x="0" y="0" width="200" height="50" fill="gold"/>
</svg>

Работа с viewBox иногда приводит к типичным ошибкам. Вот на что стоит обратить внимание:

• Пустой или отсутствующий viewBox: Без viewBox все координаты внутри SVG трактуются как абсолютные пиксели относительно viewport’а. При изменении width/height ваша графика не будет масштабироваться, а может просто обрезаться или смещаться. Это самая частая причина «поломки» адаптивных иконок.
• Несовпадение пропорций и неожиданные пустые области: Если вы видите нежелательные отступы вокруг вашего SVG, проверьте соотношение сторон viewBox и внешнего контейнера, а также значение preserveAspectRatio.
• Отрицательные значения min-x и min-y: Это абсолютно валидный прием! Он позволяет легко работать с координатами, уходящими в «отрицательную» область, что удобно для центрирования фигур или создания симметричных паттернов.
• Взаимодействие с CSS: Помните, что width и height SVG можно контролировать через CSS. Но viewBox — это атрибут, его нельзя задать через CSS. Изменять его динамически можно только через JavaScript или прямо в разметке.

Атрибут viewBox — это не просто техническая деталь, а настоящая суперсила формата SVG. Он превращает статичное векторное изображение в гибкую, адаптивную и интерактивную систему координат. Понимание принципов его работы открывает двери к созданию сложной, отзывчивой графики для современного веба: от идеально масштабируемых иконок и иллюстраций до интерактивных инфографик, карт и мини-игр. Освоив viewBox, вы получаете полный контроль над тем, как ваша векторная графика живет и взаимодействует с динамичным пространством веб-страницы.

Если Вы мечтаете создавать современные, «живые» сайты, где каждый элемент — от адаптивной SVG-графики до сложных интерфейсов — работает безупречно, тогда обратите внимание на наш онлайн-курс обучения верстке. Он научит вас не просто верстать, а мыслить как профессиональный фронтенд-разработчик, понимая саму суть технологий. А если вам нужен готовый, мощный и продающий результат прямо сейчас — наша команда воплотит ваши идеи в идеально отлаженный сайт, который будет привлекать клиентов и расти вместе с вашим бизнесом.