viewBox

Атрибут viewBox определяет положение и размеры области просмотра SVG в пользовательском пространстве.

Значение атрибута viewBox — это список из четырёх чисел, разделённых пробелами и/или запятой: min-x, min-y, width и height. min-x и min-y представляют наименьшие координаты X и Y, которые может иметь viewBox (координаты начала координат viewBox), а width и height задают размер viewBox. В результате получается viewBox — прямоугольник в пользовательском пространстве, отображаемый в границы области просмотра элемента SVG (не область просмотра браузера). Если SVG содержит атрибут viewBox (часто в сочетании с атрибутом preserveAspectRatio), преобразование растягивает или изменяет размер области просмотра SVG, чтобы она соответствовала определённому контейнеру.

Элементы

Этот атрибут можно использовать с элементами SVG, описанными в следующих разделах.

<marker>

Для элемента <marker> атрибут viewBox задаёт положение и размеры содержимого элемента <marker>.

<pattern>

Для элемента <pattern> атрибут viewBox задаёт положение и размеры содержимого плитки узора.

<svg>

Для элемента <svg> атрибут viewBox задаёт положение и размеры содержимого элемента <svg>.

<symbol>

Для элемента <symbol> атрибут viewBox задаёт положение и размеры содержимого элемента <symbol>.

<view>

Для элемента <view> атрибут viewBox задаёт положение и размеры содержимого элемента <view>.

Примеры

Фрагмент кода ниже содержит три элемента <svg> с разными значениями атрибута viewBox и одинаковыми дочерними элементами <rect> и <circle>, которые создают совершенно разные результаты. Размер <rect> задаётся с помощью относительных единиц, поэтому визуальный размер получившегося квадрата выглядит неизменным независимо от значения viewBox. Длина радиуса — значение атрибута r элемента <circle> — во всех случаях одинакова, но это значение в пользовательских единицах вычисляется относительно размера, заданного в viewBox, поэтому результаты различаются.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

Пользовательские единицы r="4" вычисляются относительно размеров viewBox, из-за чего размеры окружностей значительно различаются. Точное влияние атрибута viewBox зависит от атрибута preserveAspectRatio.

Спецификации