Viewbox - удобный инструмент для работы с векторной графикой

Viewbox - это атрибут в SVG, который определяет пространство координат, в котором располагаются элементы SVG. Он позволяет отображать SVG-изображение на экране в размерах, отличных от оригинальной величины, без потери качества и изменения пропорций.

Viewbox содержит четыре значения, определяющие координаты и масштаб, а именно x, y, width и height. Они указывают на начальную позицию всех элементов внутри SVG и в каком масштабе они должны быть отображены.

Пример кода с использованием viewbox:

html

Этот пример показывает квадрат красного цвета размером 80х80, который будет отображаться внутри окна с размерами 100х100, координаты x и y означают пространство вокруг квадрата, а ширина и высота определяют размер области отображения.

Если изменить размеры viewBox, например, до "0 0 200 200", то квадрат станет меньше по отношению к всей области отображения SVG:

html

В результате, квадрат будет занимать меньше места на экране, но при этом сохранит свои пропорции и не будет искажен.

Viewbox позволяет создавать адаптивные SVG-изображения, которые могут быть легко масштабированы и адаптированы под разные размеры экранов и устройств без потери качества.