Системы координат и единицы SVG – viewport и viewBox

Весь SVG-контент рисуется внутри SVG-областей просмотра. Каждая SVG-область просмотра определяет область рисования с размером (width, height) и началом координат, измеряемым в абстрактных пользовательских единицах. ( W3C)

Canvas – это бесконечное пространство, в котором размещаются SVG-элементы. Видимая часть этого пространства, ограниченная экраном или контейнером, называется viewport, или областью просмотра. Понимание связи между canvas, viewport и viewBox важно для точного SVG-макета и адаптивного масштабирования.

Что объясняет эта статья

• Canvas – абстрактное пространство рисования SVG.
• Viewport – видимое окно, заданное атрибутами width и height.
• Начальная система координат начинается в точке (0,0) в левом верхнем углу.
• SVG использует пользовательские единицы для координат и размеров.
• viewBox может создать другую пользовательскую систему координат для масштабирования, приближения и позиционирования.

Canvas и Viewport

Canvas – это абстрактная неограниченная плоскость, которая может содержать любые координаты, положительные и отрицательные. Весь SVG-контент отображается внутри viewport, то есть области просмотра, которая задает участок canvas с размером и точкой начала координат. По умолчанию начало координат находится в точке (0,0). Размер начальной области просмотра задается атрибутами width и height у внешнего элемента <svg>.

    <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg">
    </svg>

Код выше задает width и height для SVG viewport. Изображение видно через окно размером 900×500 пикселей. Такая область просмотра называется initial viewport, или начальной областью просмотра.

Начальная и пользовательская система координат

Рассмотрим, как SVG описывает положение и размеры объектов при рисовании.

Система координат SVG по умолчанию похожа на систему координат в HTML. Она работает как двумерная плоскость x-y. Начальная SVG-система координат создается в начальной области просмотра: точка (0,0) находится в левом верхнем углу, положительное направление x идет вправо, а положительное направление y идет вниз. Для координат (x, y), ширины и высоты можно использовать единицы cm, mm, in, em, ex, pt, pc и px. По умолчанию SVG использует пиксели.

Важно различать начальную систему координат SVG и пользовательскую систему координат SVG. У внешнего элемента <svg> может быть атрибут viewBox. Если viewBox не задан, пользовательская система координат совпадает с начальной системой координат.

Атрибут viewBox задает пользовательскую систему координат, которая может отличаться от начальной. viewBox принимает четыре значения:

• min-x – x-координата левой границы прямоугольника viewBox.
• min-y – y-координата верхней границы прямоугольника viewBox.
• width – ширина прямоугольника viewBox.
• height – высота прямоугольника viewBox.

Значения атрибута записываются в кавычках: viewBox="min-x min-y width height".

Viewport можно представить как окно, через которое вы смотрите на SVG-контент. viewBox тоже задает прямоугольную область просмотра содержимого, но работает на уровне координат: он выбирает часть canvas и масштабирует ее в видимую область. Рассмотрим пример:

    <svg width="900" height="500" viewBox="220 125 450 250" xmlns="http://www.w3.org/2000/svg">
    </svg>

В этом фрагменте viewBox выбирает область canvas с начальной точкой (220,125), шириной 450 и высотой 250. Затем выбранная область отображается внутри всего viewport размером 900×500. Визуально это похоже на обрезку нужного фрагмента и его увеличение до размера области просмотра.

На рисунке слева показаны бесконечный canvas SVG-документа, начальная область просмотра и пользовательский viewBox. На рисунке справа показан результат применения атрибута viewBox.

В результате применения viewBox пользовательская единица стала соответствовать двум единицам начальной области просмотра. Произошло масштабирование: выбранный прямоугольник координат был увеличен, чтобы заполнить видимую область.

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

Как читать SVG-координаты и единицы

1. Начните с внешнего элемента <svg> и проверьте его width и height.
2. Считайте (0,0) левым верхним углом начальной области просмотра.
3. Читайте значения x как смещение вправо, а значения y как смещение вниз.
4. Проверьте, есть ли viewBox, потому что он может переназначить пользовательские координаты на область просмотра.
5. Используйте координатные атрибуты элементов, такие как x, y, cx, cy, points, или команды path data, чтобы понимать размещение графики.

Типичные ошибки и исправления

Проблема	Причина	Исправление
SVG-контент обрезается	viewBox задает область меньше, чем нарисованный контент	Увеличьте width и height в viewBox или настройте значения min-x и min-y
SVG выглядит растянутым	Пропорции viewBox не совпадают с пропорциями viewport	Сохраняйте пропорциональные размеры viewBox или управляйте масштабированием через preserveAspectRatio
Объекты выглядят слишком большими или слишком маленькими	Масштаб пользовательской системы координат понят неверно	Пересчитайте единицы viewBox относительно размера viewport
Контент неожиданно сдвинут	В viewBox неверно заданы значения min-x или min-y	Настройте значения начала координат, чтобы выровнять нужную область содержимого
После изменения viewBox ничего не меняется	В заданной области нет видимого содержимого	Проверьте, что нарисованные элементы попадают внутрь границ viewBox

Быстрые рецепты

Задача	SVG-пример
Задать фиксированный viewport	<svg width="400" height="200"></svg>
Сделать SVG масштабируемым	<svg width="400" height="200" viewBox="0 0 400 200"></svg>
Приблизить конкретную область	<svg width="400" height="200" viewBox="100 50 200 100"></svg>

FAQ – SVG-координаты и единицы

В чем разница между SVG viewport и viewBox?

Viewport – это видимая область вывода, обычно заданная через width, height, CSS или контейнер макета. viewBox определяет, какой прямоугольник координат будет отображен внутри этой области просмотра.

Почему ось y в SVG направлена вниз?

Начальная система координат SVG начинается в точке (0,0) в левом верхнем углу. Положительные значения x идут вправо, а положительные значения y идут вниз, как во многих экранных системах координат.

Что такое пользовательские единицы SVG?

Пользовательские единицы – это координатные единицы, которые используются внутри SVG-чертежа. Без viewBox одна пользовательская единица обычно соответствует одному CSS-пикселю; с viewBox пользовательские единицы масштабируются, чтобы заполнить viewport.

Почему изменение viewBox увеличивает или уменьшает SVG-контент?

SVG масштабирует прямоугольник viewBox, чтобы он заполнил viewport. Меньший viewBox показывает меньше пользовательских единиц и делает содержимое визуально крупнее; больший viewBox показывает больше пользовательских единиц и делает содержимое визуально меньше.

Спецификация и связанные ресурсы

• Глава спецификации SVG Coordinate systems, transformations, and units определяет системы координат SVG, области просмотра, пользовательские единицы, трансформации и единицы длины.
• Раздел viewBox attribute объясняет, как SVG сопоставляет прямоугольник пользовательских координат с viewport.
• Раздел Units описывает пользовательские единицы, CSS-единицы и правила преобразования длин.
• Продолжите со статьей SVG viewBox, чтобы разобрать практические примеры масштабирования, обрезки, позиционирования и адаптивного SVG.
• Используйте SVG-трансформации, когда нужно переместить, повернуть, масштабировать, наклонить или отразить существующую SVG-графику с помощью атрибута transform.
• Откройте статью SVG-фигуры, чтобы увидеть, как координаты задают прямоугольники, окружности, эллипсы, линии, polyline и polygon.
• Перейдите к SVG Path Data для команд path data, которые используют координаты, включая M, L, H, V, C, Q и A.