27 files changed, 266 insertions, 32 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..f98250b821 100644
--- a/files/ru/web/svg/элемент/a/index.html
+++ b/files/ru/web/svg/element/a/index.html
@@ -1,9 +1,10 @@
 ---
 title: a
-slug: Web/SVG/Элемент/a
+slug: Web/SVG/Element/a
 tags:
   - SVG
 translation_of: Web/SVG/Element/a
+original_slug: Web/SVG/Элемент/a
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/element/animate/index.html
index 90988b58f8..834677e633 100644
--- a/files/ru/web/svg/элемент/animate/index.html
+++ b/files/ru/web/svg/element/animate/index.html
@@ -1,12 +1,13 @@
 ---
 title: <animate>
-slug: Web/SVG/Элемент/animate
+slug: Web/SVG/Element/animate
 tags:
   - NeedsUpdate
   - SVG
   - SVG Animation
   - svg анимация
 translation_of: Web/SVG/Element/animate
+original_slug: Web/SVG/Элемент/animate
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html
index 3b1259dcb3..9a99ec4c5a 100644
--- a/files/ru/web/svg/элемент/animatemotion/index.html
+++ b/files/ru/web/svg/element/animatemotion/index.html
@@ -1,11 +1,12 @@
 ---
 title: <animateMotion>
-slug: Web/SVG/Элемент/animateMotion
+slug: Web/SVG/Element/animateMotion
 tags:
   - SVG
   - svg анимация
   - Элемент
 translation_of: Web/SVG/Element/animateMotion
+original_slug: Web/SVG/Элемент/animateMotion
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/element/circle/index.html
index 3f1907b3bf..4a1095f146 100644
--- a/files/ru/web/svg/элемент/circle/index.html
+++ b/files/ru/web/svg/element/circle/index.html
@@ -1,10 +1,11 @@
 ---
 title: <circle>
-slug: Web/SVG/Элемент/circle
+slug: Web/SVG/Element/circle
 tags:
   - NeedsUpdate
   - SVG
 translation_of: Web/SVG/Element/circle
+original_slug: Web/SVG/Элемент/circle
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/element/defs/index.html
index 0312b05e34..b7e4a302dd 100644
--- a/files/ru/web/svg/элемент/defs/index.html
+++ b/files/ru/web/svg/element/defs/index.html
@@ -1,12 +1,13 @@
 ---
 title: <defs>
-slug: Web/SVG/Элемент/defs
+slug: Web/SVG/Element/defs
 tags:
   - NeedsUpdate
   - SVG
   - Контейнер SVG
   - Элемент
 translation_of: Web/SVG/Element/defs
+original_slug: Web/SVG/Элемент/defs
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html
index f04083c1e1..332d9abe94 100644
--- a/files/ru/web/svg/элемент/ellipse/index.html
+++ b/files/ru/web/svg/element/ellipse/index.html
@@ -1,9 +1,10 @@
 ---
 title: <ellipse>
-slug: Web/SVG/Элемент/ellipse
+slug: Web/SVG/Element/ellipse
 tags:
   - NeedsUpdate
 translation_of: Web/SVG/Element/ellipse
+original_slug: Web/SVG/Элемент/ellipse
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/element/feblend/index.html
index acd3547dcd..a131dd6aa6 100644
--- a/files/ru/web/svg/элемент/feblend/index.html
+++ b/files/ru/web/svg/element/feblend/index.html
@@ -1,9 +1,10 @@
 ---
 title: <feBlend>
-slug: Web/SVG/Элемент/feBlend
+slug: Web/SVG/Element/feBlend
 tags:
   - фильтры
 translation_of: Web/SVG/Element/feBlend
+original_slug: Web/SVG/Элемент/feBlend
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html
index 64e32d019f..cd84e97285 100644
--- a/files/ru/web/svg/элемент/foreignobject/index.html
+++ b/files/ru/web/svg/element/foreignobject/index.html
@@ -1,7 +1,8 @@
 ---
 title: <foreignObject>
-slug: Web/SVG/Элемент/foreignObject
+slug: Web/SVG/Element/foreignObject
 translation_of: Web/SVG/Element/foreignObject
+original_slug: Web/SVG/Элемент/foreignObject
 ---
 <div>{{SVGRef}}<br>
 Элемент <strong><code>&lt;foreignObject&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br>
diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/element/g/index.html
index c425f3c5b8..dca6a5d04c 100644
--- a/files/ru/web/svg/элемент/g/index.html
+++ b/files/ru/web/svg/element/g/index.html
@@ -1,10 +1,11 @@
 ---
 title: <g>
-slug: Web/SVG/Элемент/g
+slug: Web/SVG/Element/g
 tags:
   - NeedsUpdate
   - SVG
 translation_of: Web/SVG/Element/g
+original_slug: Web/SVG/Элемент/g
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/element/image/index.html
index e417a4ac65..1b72f153d6 100644
--- a/files/ru/web/svg/элемент/image/index.html
+++ b/files/ru/web/svg/element/image/index.html
@@ -1,10 +1,11 @@
 ---
 title: <image>
-slug: Web/SVG/Элемент/image
+slug: Web/SVG/Element/image
 tags:
   - NeedsUpdate
   - SVG
 translation_of: Web/SVG/Element/image
+original_slug: Web/SVG/Элемент/image
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/element/index.html
index b65942e344..00bc2dc254 100644
--- a/files/ru/web/svg/элемент/index.html
+++ b/files/ru/web/svg/element/index.html
@@ -1,11 +1,12 @@
 ---
 title: Справочник SVG элементов
-slug: Web/SVG/Элемент
+slug: Web/SVG/Element
 tags:
   - SVG
   - SVG Reference
   - Руководство
 translation_of: Web/SVG/Element
+original_slug: Web/SVG/Элемент
 ---
 <p>« <a href="/ru/docs/Web/SVG" title="SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Attribute" title="SVG/Attribute">Справочник SVG атрибутов</a> »</p>
 
diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/element/line/index.html
index b7f75c6a96..4b25c44bc3 100644
--- a/files/ru/web/svg/элемент/line/index.html
+++ b/files/ru/web/svg/element/line/index.html
@@ -1,9 +1,10 @@
 ---
 title: <line>
-slug: Web/SVG/Элемент/line
+slug: Web/SVG/Element/line
 tags:
   - SVG
 translation_of: Web/SVG/Element/line
+original_slug: Web/SVG/Элемент/line
 ---
 <div> {{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html
index 37ab6a334d..835d1ec204 100644
--- a/files/ru/web/svg/элемент/lineargradient/index.html
+++ b/files/ru/web/svg/element/lineargradient/index.html
@@ -1,6 +1,6 @@
 ---
 title: <linearGradient>
-slug: Web/SVG/Элемент/linearGradient
+slug: Web/SVG/Element/linearGradient
 tags:
   - NeedsUpdate
   - SVG
@@ -8,6 +8,7 @@ tags:
   - Справка
   - Элемент
 translation_of: Web/SVG/Element/linearGradient
+original_slug: Web/SVG/Элемент/linearGradient
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/element/path/index.html
index 7dc97ca989..6f3ac7dad7 100644
--- a/files/ru/web/svg/элемент/path/index.html
+++ b/files/ru/web/svg/element/path/index.html
@@ -1,7 +1,8 @@
 ---
 title: <path>
-slug: Web/SVG/Элемент/path
+slug: Web/SVG/Element/path
 translation_of: Web/SVG/Element/path
+original_slug: Web/SVG/Элемент/path
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/element/pattern/index.html
index 2d572737d3..104a9b665d 100644
--- a/files/ru/web/svg/элемент/pattern/index.html
+++ b/files/ru/web/svg/element/pattern/index.html
@@ -1,9 +1,10 @@
 ---
 title: <pattern>
-slug: Web/SVG/Элемент/pattern
+slug: Web/SVG/Element/pattern
 tags:
   - SVG
 translation_of: Web/SVG/Element/pattern
+original_slug: Web/SVG/Элемент/pattern
 ---
 <div>{{SVGRef}}<br>
 Элемент <strong><code>&lt;pattern&gt;</code></strong> определяет графический объект, который может быть перерисован с повторяющимися координатами <strong>x</strong> и <strong>y</strong> («мозаичным»), чтобы покрыть область.</div>
diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/element/polygon/index.html
index b1baf626a3..94bbcd3997 100644
--- a/files/ru/web/svg/элемент/polygon/index.html
+++ b/files/ru/web/svg/element/polygon/index.html
@@ -1,9 +1,10 @@
 ---
 title: <polygon>
-slug: Web/SVG/Элемент/polygon
+slug: Web/SVG/Element/polygon
 tags:
   - SVG
 translation_of: Web/SVG/Element/polygon
+original_slug: Web/SVG/Элемент/polygon
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html
index 04906d4fd5..8129db9ab4 100644
--- a/files/ru/web/svg/элемент/radialgradient/index.html
+++ b/files/ru/web/svg/element/radialgradient/index.html
@@ -1,10 +1,11 @@
 ---
 title: <radialGradient>
-slug: Web/SVG/Элемент/radialGradient
+slug: Web/SVG/Element/radialGradient
 tags:
   - NeedsUpdate
   - SVG
 translation_of: Web/SVG/Element/radialGradient
+original_slug: Web/SVG/Элемент/radialGradient
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/element/rect/index.html
index 8e4b7c9af7..0fdc102ad9 100644
--- a/files/ru/web/svg/элемент/rect/index.html
+++ b/files/ru/web/svg/element/rect/index.html
@@ -1,10 +1,11 @@
 ---
 title: <rect>
-slug: Web/SVG/Элемент/rect
+slug: Web/SVG/Element/rect
 tags:
   - NeedsUpdate
   - SVG
 translation_of: Web/SVG/Element/rect
+original_slug: Web/SVG/Элемент/rect
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/element/svg/index.html
index 12e37bee9d..ba8b0dbe7c 100644
--- a/files/ru/web/svg/элемент/svg/index.html
+++ b/files/ru/web/svg/element/svg/index.html
@@ -1,7 +1,8 @@
 ---
 title: <svg>
-slug: Web/SVG/Элемент/svg
+slug: Web/SVG/Element/svg
 translation_of: Web/SVG/Element/svg
+original_slug: Web/SVG/Элемент/svg
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/element/text/index.html
index d63d1b47dd..6bbb3fc7e1 100644
--- a/files/ru/web/svg/элемент/text/index.html
+++ b/files/ru/web/svg/element/text/index.html
@@ -1,11 +1,12 @@
 ---
 title: <text>
-slug: Web/SVG/Элемент/<text>
+slug: Web/SVG/Element/text
 tags:
   - NeedsUpdate
   - SVG
   - SVG text
 translation_of: Web/SVG/Element/text
+original_slug: Web/SVG/Элемент/<text>
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/element/use/index.html
index 12d7007932..39e26289f3 100644
--- a/files/ru/web/svg/элемент/use/index.html
+++ b/files/ru/web/svg/element/use/index.html
@@ -1,12 +1,13 @@
 ---
 title: <use>
-slug: Web/SVG/Элемент/use
+slug: Web/SVG/Element/use
 tags:
   - SVG
   - SVG Графика
   - Ссылка
   - Элемент
 translation_of: Web/SVG/Element/use
+original_slug: Web/SVG/Элемент/use
 ---
 <div>{{SVGRef}}</div>
 
diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html
index e95fd31f68..1af60608af 100644
--- a/files/ru/web/svg/tutorial/основные_фигуры/index.html
+++ b/files/ru/web/svg/tutorial/basic_shapes/index.html
@@ -1,10 +1,11 @@
 ---
 title: Основные Фигуры
-slug: Web/SVG/Tutorial/Основные_Фигуры
+slug: Web/SVG/Tutorial/Basic_Shapes
 tags:
   - SVG
-  - 'SVG:Руководство'
+  - SVG:Руководство
 translation_of: Web/SVG/Tutorial/Basic_Shapes
+original_slug: Web/SVG/Tutorial/Основные_Фигуры
 ---
 <p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
 
diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html
index 6aa2b20b16..446444ca62 100644
--- a/files/ru/web/svg/tutorial/базовые_преобразования/index.html
+++ b/files/ru/web/svg/tutorial/basic_transformations/index.html
@@ -1,7 +1,8 @@
 ---
 title: Базовые трансформации
-slug: Web/SVG/Tutorial/Базовые_Преобразования
+slug: Web/SVG/Tutorial/Basic_Transformations
 translation_of: Web/SVG/Tutorial/Basic_Transformations
+original_slug: Web/SVG/Tutorial/Базовые_Преобразования
 ---
 <div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div>
 
diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/introduction/index.html
index 0ecb1c5f1c..a3c0f8e0e5 100644
--- a/files/ru/web/svg/tutorial/введение/index.html
+++ b/files/ru/web/svg/tutorial/introduction/index.html
@@ -1,10 +1,11 @@
 ---
 title: Введение
-slug: Web/SVG/Tutorial/Введение
+slug: Web/SVG/Tutorial/Introduction
 tags:
   - SVG
   - Руководство
 translation_of: Web/SVG/Tutorial/Introduction
+original_slug: Web/SVG/Tutorial/Введение
 ---
 <p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p>
 
diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/positions/index.html
index 7a660c2d0f..a92d044fa8 100644
--- a/files/ru/web/svg/tutorial/позиции/index.html
+++ b/files/ru/web/svg/tutorial/positions/index.html
@@ -1,10 +1,11 @@
 ---
 title: Расположение (позиции)
-slug: Web/SVG/Tutorial/Позиции
+slug: Web/SVG/Tutorial/Positions
 tags:
   - SVG
-  - 'SVG:Руководство'
+  - SVG:Руководство
 translation_of: Web/SVG/Tutorial/Positions
+original_slug: Web/SVG/Tutorial/Позиции
 ---
 <p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
 
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..64489d873c
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_and_css/index.html
@@ -0,0 +1,214 @@
+---
+title: SVG и CSS
+slug: Web/SVG/Tutorial/SVG_and_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+original_slug: Web/Guide/CSS/Getting_started/SVG_и_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>