Что такое viewport и viewBox в SVG и за что они отвечают?

Что проверяют

Понимаете ли вы систему координат SVG. Это база для всего, что делают с иконками и графиками: адаптивность, обрезка, толщина линий при масштабировании. По ответу видно, рисуете ли вы векторную графику осознанно или подбираете числа наугад, пока не совпадёт.

Как отвечать

Viewport это окно, в котором рисуется картинка, то есть фактический размер элемента на странице; задаётся атрибутами width и height либо стилями. Это не тот viewport, что у браузера, совпадение названий сбивает.

viewBox задаёт систему координат внутри окна четырьмя числами: сдвиг по осям, ширина и высота. Содержимое рисуется в пользовательских единицах, а браузер масштабирует прямоугольник viewBox так, чтобы он лёг в viewport.

<svg viewBox="0 0 24 24" width="48" height="48" aria-hidden="true">
  <path d="M4 12h16" stroke="currentColor" stroke-width="2"/>
</svg>

Здесь иконка нарисована в сетке 24 на 24 и показана вдвое крупнее без потери качества. Как именно она вписывается, решает preserveAspectRatio: по умолчанию пропорции сохраняются и рисунок центрируется, значение none растягивает его под окно. Для резиновой вставки задают viewBox и ширину в долях контейнера, а высоту отдают пропорциям.

Где спотыкаются

Задают только width и height. Без viewBox картинка не масштабируется: внутренние координаты остаются абсолютными, и содержимое обрезается краем окна вместо того, чтобы уменьшиться вместе с ним.

Ставят viewBox не по геометрии рисунка. Экспорт из редактора часто приносит лишние поля холста, и иконка в интерфейсе выглядит смещённой и мельче соседних, хотя размеры у всех заданы одинаковые.

Пишут имя атрибута строчными буквами там, где регистр важен: setAttribute из JavaScript и разметка в JSX требуют именно viewBox, при другом написании атрибут просто игнорируется. Сюда же толщина обводки: она масштабируется вместе со всем остальным, и удержать её помогает vector-effect.