27 files changed, 213 insertions, 5 deletions
diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html
deleted file mode 100644
index b6a5d49ea2..0000000000
--- a/files/ru/web/svg/attribute/onload/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: onload
-slug: Web/SVG/Attribute/onload
----
-<p>Link not exist</p>
diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/element/a/index.html
index 97c2daf793..97c2daf793 100644
--- a/files/ru/web/svg/элемент/a/index.html
+++ b/files/ru/web/svg/element/a/index.html
diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/element/animate/index.html
index 90988b58f8..90988b58f8 100644
--- a/files/ru/web/svg/элемент/animate/index.html
+++ b/files/ru/web/svg/element/animate/index.html
diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html
index 3b1259dcb3..3b1259dcb3 100644
--- a/files/ru/web/svg/элемент/animatemotion/index.html
+++ b/files/ru/web/svg/element/animatemotion/index.html
diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/element/circle/index.html
index 3f1907b3bf..3f1907b3bf 100644
--- a/files/ru/web/svg/элемент/circle/index.html
+++ b/files/ru/web/svg/element/circle/index.html
diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/element/defs/index.html
index 0312b05e34..0312b05e34 100644
--- a/files/ru/web/svg/элемент/defs/index.html
+++ b/files/ru/web/svg/element/defs/index.html
diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html
index f04083c1e1..f04083c1e1 100644
--- a/files/ru/web/svg/элемент/ellipse/index.html
+++ b/files/ru/web/svg/element/ellipse/index.html
diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/element/feblend/index.html
index acd3547dcd..acd3547dcd 100644
--- a/files/ru/web/svg/элемент/feblend/index.html
+++ b/files/ru/web/svg/element/feblend/index.html
diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html
index 64e32d019f..64e32d019f 100644
--- a/files/ru/web/svg/элемент/foreignobject/index.html
+++ b/files/ru/web/svg/element/foreignobject/index.html
diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/element/g/index.html
index c425f3c5b8..c425f3c5b8 100644
--- a/files/ru/web/svg/элемент/g/index.html
+++ b/files/ru/web/svg/element/g/index.html
diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/element/image/index.html
index e417a4ac65..e417a4ac65 100644
--- a/files/ru/web/svg/элемент/image/index.html
+++ b/files/ru/web/svg/element/image/index.html
diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/element/index.html
index b65942e344..b65942e344 100644
--- a/files/ru/web/svg/элемент/index.html
+++ b/files/ru/web/svg/element/index.html
diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/element/line/index.html
index b7f75c6a96..b7f75c6a96 100644
--- a/files/ru/web/svg/элемент/line/index.html
+++ b/files/ru/web/svg/element/line/index.html
diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html
index 37ab6a334d..37ab6a334d 100644
--- a/files/ru/web/svg/элемент/lineargradient/index.html
+++ b/files/ru/web/svg/element/lineargradient/index.html
diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/element/path/index.html
index 7dc97ca989..7dc97ca989 100644
--- a/files/ru/web/svg/элемент/path/index.html
+++ b/files/ru/web/svg/element/path/index.html
diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/element/pattern/index.html
index 2d572737d3..2d572737d3 100644
--- a/files/ru/web/svg/элемент/pattern/index.html
+++ b/files/ru/web/svg/element/pattern/index.html
diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/element/polygon/index.html
index b1baf626a3..b1baf626a3 100644
--- a/files/ru/web/svg/элемент/polygon/index.html
+++ b/files/ru/web/svg/element/polygon/index.html
diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html
index 04906d4fd5..04906d4fd5 100644
--- a/files/ru/web/svg/элемент/radialgradient/index.html
+++ b/files/ru/web/svg/element/radialgradient/index.html
diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/element/rect/index.html
index 8e4b7c9af7..8e4b7c9af7 100644
--- a/files/ru/web/svg/элемент/rect/index.html
+++ b/files/ru/web/svg/element/rect/index.html
diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/element/svg/index.html
index 12e37bee9d..12e37bee9d 100644
--- a/files/ru/web/svg/элемент/svg/index.html
+++ b/files/ru/web/svg/element/svg/index.html
diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/element/text/index.html
index d63d1b47dd..d63d1b47dd 100644
--- a/files/ru/web/svg/элемент/text/index.html
+++ b/files/ru/web/svg/element/text/index.html
diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/element/use/index.html
index 12d7007932..12d7007932 100644
--- a/files/ru/web/svg/элемент/use/index.html
+++ b/files/ru/web/svg/element/use/index.html
diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html
index e95fd31f68..e95fd31f68 100644
--- a/files/ru/web/svg/tutorial/основные_фигуры/index.html
+++ b/files/ru/web/svg/tutorial/basic_shapes/index.html
diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html
index 6aa2b20b16..6aa2b20b16 100644
--- a/files/ru/web/svg/tutorial/базовые_преобразования/index.html
+++ b/files/ru/web/svg/tutorial/basic_transformations/index.html
diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/introduction/index.html
index 0ecb1c5f1c..0ecb1c5f1c 100644
--- a/files/ru/web/svg/tutorial/введение/index.html
+++ b/files/ru/web/svg/tutorial/introduction/index.html
diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/positions/index.html
index 7a660c2d0f..7a660c2d0f 100644
--- a/files/ru/web/svg/tutorial/позиции/index.html
+++ b/files/ru/web/svg/tutorial/positions/index.html
diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html
new file mode 100644
index 0000000000..a69c4281af
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_and_css/index.html
@@ -0,0 +1,213 @@
+---
+title: SVG и CSS
+slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p>
+
+<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p>
+
+<p>Это вторая секция Части II <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Руководство по CSS</a>.<br>
+ Предыдущая секция: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
+ Следующая секция: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
+
+<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3>
+
+<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p>
+
+<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p>
+
+<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p>
+
+<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>Немного подробностей</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p>
+
+    <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
+
+    <p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action_An_SVG_demonstration" name="Action:_An_SVG_demonstration">За дело: Демонстрация SVG</h3>
+
+<p>Создайте новый документ SVG, как обычный текстовый файл, <code>doc8.svg</code>. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Создайте новый файл CSS, <code>style8.css</code>. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: css">/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+
+<p>Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.</p>
+
+<p>Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:</p>
+
+<table style="border: 2px outset #3366bb;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примечания к демонстрации:</p>
+
+<ul>
+ <li>Документ SVG привязывается к таблице стилей общепринятым способом.</li>
+ <li>SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Задание</caption>
+ <tbody>
+  <tr>
+   <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Посмотреть решение к этому заданию.</a></p>
+
+<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4>
+
+<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>