viewBox
=======

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

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

Пример
------
```

html, body, svg {
  height:100%
}

svg:not(:root) {
  display: inline-block;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 С относительными единицами, такими как проценты,
 размер квадрата не меняется в зависимости от
 значения viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 При больших значениях viewBox круг получается
 маленьким, потому что его радиус указан в абсолютных
 единицах: расстояние 4 получается маленьким относительно
 размера окна 100, указанного во viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Также не зависит от viewBox, как и в предыдущем примере -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 С маленьким значением размера viewBox круг получается
 большим, потому что радиус 4 намного больше, если размер
 области отображения равен 10, чем если он равен 100
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 Точка с координатами (0, 0) теперь является центром области
 отображения. 100% всё ещё приравнивается к полному размеру
 области отображения (10 на 10), поэтому квадрат выглядит
 сдвинутым в правый нижний угол
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 Так как точка (0, 0) находится в центре, а координаты круга,
 равные 50%, относительно размера области отображения (10 на 10)
 принимаются равными 5, круг оказывается с центром
 в правом нижнем углу
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
```


На отображение с `viewBox` также влияет атрибут `preserveAspectRatio (en-US)`.

**Примечание:** при значениях `width` и `height` меньших или равных `0` элемент не отображается

Пять элементов используют этот атрибут: `<marker>` (en-US), `<pattern>`, `<svg>`, `<symbol>` (en-US) и `<view>` (en-US).

marker
------

Для элемента `<marker>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<marker>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

pattern
-------

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

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

svg
---

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

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

symbol
------

Для элемента `<symbol>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<symbol>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

view
----

Для элемента `<view>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<view>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

Смотрите также
--------------

* SVG Getting Started: Positions