viewBox
« SVG Attribute reference home
Аттрибут viewBox определяет расположение и размеры окна отображения SVG.
Значение атрибута viewBox — это набор четырёх чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).
html, body, svg {
height:100%
}
svg:not(:root) {
display: inline-block;
}
<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>.
pattern
svg
symbol
Для элемента <symbol> (en-US), viewBox определяет расположение и размеры содержимого элемента <symbol>.
view
Для элемента <view> (en-US), viewBox определяет расположение и размеры содержимого элемента <view>.