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.
Примечание:
При значениях width и height меньших или равных 0 элемент не отображается
Пять элементов используют этот атрибут: <marker>, <pattern>, <svg>, <symbol> и <view>.