1 files changed, 48 insertions, 0 deletions
diff --git a/files/ru/web/svg/tutorial/positions/index.html b/files/ru/web/svg/tutorial/positions/index.html
new file mode 100644
index 0000000000..7a660c2d0f
--- /dev/null
+++ b/files/ru/web/svg/tutorial/positions/index.html
@@ -0,0 +1,48 @@
+---
+title: Расположение (позиции)
+slug: Web/SVG/Tutorial/Позиции
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+
+<h2 id="The_grid" name="The_grid">Сетка</h2>
+
+<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a> (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.</p>
+
+<h4 id="Пример">Пример:</h4>
+
+<p>Элемент</p>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+</pre>
+
+<p>определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.</p>
+
+<h3 id="Что_такое_пиксели">Что такое "пиксели"?</h3>
+
+<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p>
+
+<p>Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента <code>svg</code>:</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+</pre>
+
+<p>Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+</pre>
+
+<p>Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут <code>viewBox определяет часть этого полотна, которая будет отображаться</code>. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.</p>
+
+<p>Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется <strong>системой пользовательских координат</strong>. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.</p>
+
+<p>Цитата из SVG 1.1 специфирования иллюстрирует это:</p>
+
+<blockquote>
+<p>[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)</p>
+</blockquote>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>