Позиции

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

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

Элемент

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

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

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

Без дополнительной спецификации одна пользовательская единица равна одному экранному элементу. Чтобы явно изменить это поведение, в SVG существует несколько возможностей. Начнём с элемента svg корня:

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

Вышеприведенный элемент определяет простую SVG-область с размером 100x100 пикселей. Одна пользовательская единица равна одному экранному элементу.

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

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

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

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

[...] предположим, что пользовательский агент может определить из своей среды, что «1px» соответствует «0,2822222 мм» (т. е. 90 dpi). Тогда для всех процессов обработки SVG-контента: [...] «1 см» равно «35,43307px» (и, следовательно, 35,43307 пользовательским единицам)