Позиции

В этой статье мы рассмотрим, как SVG (масштабируемая векторная графика) задаёт позиции и размеры объектов в контексте рисунка, включая систему координат и значение измерения в «пикселях» в масштабируемом контексте.

Сетка

Для всех элементов SVG использует систему координат, или систему сетки, похожую на ту, что используется в Canvas (а также во многих других средствах для рисования на компьютере). Иными словами, верхний левый угол документа считается точкой (0,0), или началом координат. Позиции измеряются в пикселях от верхнего левого угла: положительное направление оси x — вправо, а положительное направление оси y — вниз.

Обратите внимание: это немного отличается от того, как в детстве вас учили строить графики (ось y перевёрнута). Однако именно так располагаются элементы в HTML (по умолчанию документы LTR считаются не RTL-документами, в которых координата X отсчитывается справа налево).

Пример

Элемент

<rect x="0" y="0" width="100" height="100" />

задаёт прямоугольник, который начинается в верхнем левом углу и простирается на 100px вправо и на 100px вниз.

Что такое «пиксели»?

В простейшем случае один пиксель в SVG-документе соответствует одному пикселю на устройстве вывода (то есть на экране). Но в названии SVG не было бы слова «масштабируемая», если бы не существовало нескольких способов изменить это поведение. Подобно абсолютным и относительным размерам шрифта в CSS, SVG определяет абсолютные единицы (с идентификатором размерности, например «pt» или «cm») и так называемые пользовательские единицы, у которых такого идентификатора нет и которые представляют собой обычные числа.

Если не указано иное, одна пользовательская единица равна одной экранной единице. В SVG есть несколько способов явно изменить это поведение. Начнём с корневого элемента svg:

<svg width="100" height="100">…</svg>

Приведённый выше элемент задаёт холст SVG размером 100x100px. Одна пользовательская единица равна одной экранной единице.

<svg width="200" height="200" viewBox="0 0 100 100">…</svg>

Размер всего холста SVG здесь составляет 200px на 200px. Однако атрибут viewBox задаёт часть холста, которую нужно отобразить. Эти 200x200 пикселей отображают область, начинающуюся с пользовательской единицы (0,0) и простирающуюся на 100x100 пользовательских единиц вправо и вниз. Фактически это увеличивает область размером 100x100 единиц и удваивает размер изображения.

Текущее соответствие пользовательских единиц экранным единицам (для отдельного элемента или всего изображения) называется пользовательской системой координат. Помимо масштабирования, систему координат можно также поворачивать, наклонять и отражать. Пользовательская система координат по умолчанию сопоставляет один пользовательский пиксель с одним пикселем устройства. (Однако устройство может по-своему определять, что считать одним пикселем.) Длины в SVG-файле, заданные с указанием конкретных единиц измерения, например «in» или «cm», рассчитываются так, чтобы отображаться в итоговом изображении в масштабе 1:1.

Это иллюстрирует цитата из спецификации SVG 1.1:

[...] предположим, что пользовательский агент может определить из своего окружения, что «1px» соответствует «0.2822222mm» (то есть 90dpi). Тогда при любой обработке содержимого SVG: [...] «1cm» равен «35.43307px» (и, следовательно, 35.43307 пользовательским единицам)