Viewbox - графический элемент в SVG для масштабирования изображений

ViewBox - это атрибут в <svg> (масштабируемой векторной графики), который определяет область просмотра или видимости элементов на холсте. Он позволяет указать размеры и масштаб изображения, а также управлять показываемыми элементами внутри <svg>-элемента.

Атрибут viewbox определен следующим образом:

viewBox="min-x min-y width height"

• min-x и min-y являются координатами верхнего левого угла области просмотра. Это определяет начальные координаты рисунка.
• width и height - это ширина и высота области просмотра. Это определяет размеры изображения.

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

<svg viewBox="0 0 200 200">
   <circle cx="100" cy="100" r="50" fill="red"/>
   <rect x="50" y="50" width="100" height="100" fill="blue"/>
</svg>

В приведенном примере viewbox установлен на "0 0 200 200". Это означает, что область просмотра начинается с координат (0,0) в верхнем левом углу и имеет ширину и высоту 200 пикселей. Внутри области просмотра нарисованы круг и прямоугольник.

Круг с центром в (100,100) и радиусом 50 пикселей закрашен красным цветом. Прямоугольник с координатами (50,50) и размерами 100x100 пикселей закрашен синим цветом. Оба элемента внутри области просмотра видны благодаря атрибуту viewbox.

Использование атрибута viewbox особенно полезно при масштабировании SVG-изображений. Если размеры viewbox изменяются, то все элементы внутри него масштабируются пропорционально. Это позволяет создавать адаптивные и отзывчивые графики, которые легко приспособить под разные размеры экранов и устройств.

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