Сетка
SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.
Пример
Элемент
<rect x="0" y="0" width="100" height="100" />
определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.
Что такое "пиксели"?
В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Масштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идент��фикаторов, являющиеся простыми цифрами.
Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента svg:
<svg width="100" height="100">
Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.
<svg width="200" height="200" viewBox="0 0 100 100">
Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут viewBox определяет часть этого полотна, которая будет отображаться. ��ти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.
Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется системой пользовательских координат. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.
Цитата из SVG 1.1 специфирования иллюстрирует это:
[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)