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