Для формата, как и для тэга canvas координаты задаются одинаково. Нулевой точкой или точкой отсчета считается верхний левый угол, а положительными направлениями для оси X - правое, и для оси Y - вниз, соответствено. Координаты объекта отображения могут иметь также и отрицательные координаты, при этом в зависимосте от рамки обзора они могут отображаться или нет. Еще обязательными атрибутами считаются ширина и высота, и они тоже могут принимать любые значения в том числе и отрицательные. Это позволяет выводить отображения объектов в инверсионном и перевернутом виде.
Единицы измерения Важной величиной в SVG - единица измерения координаты или значения. По-умолчанию - это пикселы. Но могут быть любые, в т.ч. и метрические или дюймы. Причем все они есть реальное отображение объекта в формате Метрическими единицами могут быть- mm-милиметры. 1 пиксел = 0.2822222mm (90dpi);
- cm-сантиметры. 1cm = 35.43307px
<svg width="100" height="100">Нужно заметить, окно обзора может быть как меньше окна экрана, так и больше его. В последнем случае - включается скролинг. Но всегда любое изображение выходящее за рамки окна обзора обрезается извне. По умолчанию размерность окна обзора следующая
<svg width="100%" height="150">
Само же изображение формируется по координатам, заданным через окно отображения. И они не обязательно должны совпадать с размерностями окна обзора. По умолчанию окно отображение совпадает с положением окна обзора, если не заданы ее размерности отдельным параметром. Этим параметром - viewBox
<svg width="100" height="100" viewBox="-10 -10 200 200">
В примере все координаты изображения желтого квадрата пересчитываются с реальным положение координат и при отображении укладываются в окно обзора, таким образом чтобы они были видимы если они исчислены для окна отображения. В данном случае они уменьшаются в два раза, и точка начала координат сдвигается от 0 экрана на 10 единиц реала и 5 пикселов от левой верхней точки объекта. При этом само поле обозначено рамкой красного цвета, а положительные координаты заполнены синим цветом. Для информативности описания текст примера приводится ниже.<?xml version="1.0" standalone="no"?> <svg width="100" height="100" viewBox="-10 -10 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="-10" y="-10" width="100%" height="100%" fill="none" stroke="#F00" /> <rect width="100%" height="100%" fill="#8CE" /> <rect x="20" y="20" width="100" height="100" fill="#FF8"/> </svg>***В примере, для наглядности, изображение помещено в рамку с отступом и масштаб увеличен в 2 раза Позже мы покажем как можно управлять эффективно выдачей актуального изображения используя перерасчет координат объекта. А пока принимай эту инфу как должное.
