---
title: viewBox
slug: Web/SVG/Attribute/viewBox
tags:
  - SVG
translation_of: Web/SVG/Attribute/viewBox
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>

<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p>

<p>Значение атрибута <code>viewBox</code> — это набор четырёх чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p>

<div id="topExample">
<div class="hidden">
<pre class="notranslate">html, body, svg {
  height:100%
}

svg:not(:root) {
  display: inline-block;
}</pre>
</div>

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

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

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

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

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

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

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<p>На отображение с <code>viewBox</code> также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.</p>

<div class="blockIndicator note">
<p><strong>Обратите внимание: </strong>при значениях <code>width</code> и <code>height</code> меньших или равных <code>0</code> элемент не отображается</p>
</div>

<p><br>
 Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.</p>

<h2 id="marker">marker</h2>

<p>Для элемента {{SVGElement('marker')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;marker&gt;</code>.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><em>нет</em></td>
  </tr>
  <tr>
   <th scope="row">Анимируемое</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<h2 id="pattern">pattern</h2>

<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определяет расположение и размеры содержимого шаблона.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><em>нет</em></td>
  </tr>
  <tr>
   <th scope="row">Анимируемое</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<h2 id="svg">svg</h2>

<p>Для элемента {{SVGElement('svg')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;svg&gt;</code>.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><em>нет</em></td>
  </tr>
  <tr>
   <th scope="row">Анимируемое</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<h2 id="symbol">symbol</h2>

<p>Для элемента {{SVGElement('symbol')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;symbol&gt;</code>.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><em>нет</em></td>
  </tr>
  <tr>
   <th scope="row">Анимируемое</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<h2 id="view">view</h2>

<p>Для элемента {{SVGElement('view')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;view&gt;</code>.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><em>нет</em></td>
  </tr>
  <tr>
   <th scope="row">Анимируемое</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
</ul>