initial commit

1 files changed, 115 insertions, 0 deletions

diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..fc3ab83319
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,115 @@
+---
+title: SVG в HTML. Введение
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h2 id="Overview" name="Overview">Описание</h2>
+
+<p>Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.</p>
+
+<h2 id="Source" name="Source">Код</h2>
+
+<p>Демонстрация примера <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">здесь</a>:</p>
+
+<pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+&lt;title&gt;XTech SVG Demo&lt;/title&gt;
+&lt;style&gt;
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+&lt;/style&gt;
+&lt;script&gt;
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;HTML Form&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Введите что-нибудь:&lt;/label&gt;
+    &lt;input type="text"/&gt;
+    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="signalError();" /&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+  &lt;linearGradient id="gradient"&gt;
+    &lt;stop class="begin" offset="0%"/&gt;
+    &lt;stop class="end" offset="100%"/&gt;
+  &lt;/linearGradient&gt;
+  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+&lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Discussion" name="Discussion">Примечание</h2>
+
+<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p>
+
+<p>Такой способ имеет следующие пункты в свою пользу:</p>
+
+<ul>
+ <li>Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон</li>
+ <li>Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую верстку.</li>
+ <li>Это очень просто сделать.</li>
+ <li>Изображение масштабируемое и может растягиваться до нужного размера</li>
+ <li>Мы можем применять декларированные стили как для HTML так и для SVG</li>
+ <li>С помощью JavaScript можно управлять как HTML так и SVG</li>
+ <li>Это полностью валидный документ, основанный на стандартах.</li>
+</ul>
+
+<div class="note">
+<p>Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:</p>
+
+<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+</pre>
+</div>
+
+<h2 id="Details" name="Details">Дополнительно</h2>
+
+<p>Значение атрибута  <code>viewBox</code> определяет область в пространстве пользователя, относительно внешним границам просмотра.</p>
+
+<p><code>viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:</code></p>
+
+<pre class="brush: html"><code>viewBox="0 0 100 100" </code></pre>
+
+<p>Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут <code>preserveAspectRatio. </code>С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow)  области просмотра, края svg могут быть обрезаны или вписаны.</p>
+
+<pre class="brush: html"> preserveAspectRatio="alignment [meet | slice]"</pre>
+
+<p><code>alignment </code>- одно из значений  <code>xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid</code> или <code>xMaxYMax</code>.</p>
+
+<p><code>meet </code>- сохраняет пропорции, умещая svg в область просмотра</p>
+
+<p><code>slice </code>- тоже cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область</p>
+
+<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p>
+
+<pre class="brush: html"> preserveAspectRatio="none"</pre>
+
+<p>Атрибут <code>style </code>применяется для определения стиля элемента.</p>
+
+<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2>
+
+<ul>
+ <li>Сохранение пропорций <a href="http://xiper.net/learn/svg/svg-essentials/preserving-aspect-ratio">ссылка</a></li>
+ <li>Масштабирование и сдвиг <a href="https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx">msdn.microsoft</a></li>
+ <li>Еще SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li>
+</ul>
+
+<p> </p>