initial commit

8 files changed, 820 insertions, 0 deletions

diff --git a/files/pl/web/svg/element/a/index.html b/files/pl/web/svg/element/a/index.html
new file mode 100644
index 0000000000..0bef2fd2ac
--- /dev/null
+++ b/files/pl/web/svg/element/a/index.html
@@ -0,0 +1,149 @@
+---
+title: <a>
+slug: Web/SVG/Element/a
+tags:
+  - Element SVG
+  - SVG
+  - SVG link
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">Element <strong><code>&lt;a&gt;</code></strong> SVG określa hiperłącze.</span></p>
+
+<p>Element<a href="/en-US/docs/Web/HTML/Element/a"> &lt;a&gt; </a><a href="/en-US/docs/Web/HTML/Element/a">HTML </a>jest interpretowany tak samo jak element &lt;a&gt; SVG. Z tego względu w przypadku użycia selektora &lt;a&gt; w CSS lub JavaScript może mieć zastosowanie do nieprawidłowego elementu. Wypróbuj regułę @namespace, aby rozróżnić między nimi.</p>
+
+<h2 id="Użycie">Użycie</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Atrybuty">Atrybuty</h2>
+
+<h3 id="Atrybuty_globalne">Atrybuty globalne</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Xlink attributes</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3>
+
+<div class="note">
+<p>No browser supports all XLink attributes.</p>
+</div>
+
+<ul>
+ <li>{{SVGAttr("href")}}</li>
+ <li>{{SVGAttr("target")}}</li>
+ <li>{{SVGAttr("xlink:show")}}</li>
+ <li>{{SVGAttr("xlink:actuate")}}</li>
+ <li>{{SVGAttr("xlink:href")}} {{deprecated_inline}}</li>
+</ul>
+
+<h2 id="DOM_model">DOM model</h2>
+
+<p>Element implementuje {{domxref("SVGAElement")}}.</p>
+
+<h2 id="Przykład">Przykład</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="140" height="30" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"
+      target="_blank"&gt;
+    &lt;rect height="30" width="120" y="0" x="0" rx="15"/&gt;
+    &lt;text fill="white" text-anchor="middle"
+          y="21" x="60"&gt;SVG on MDN&lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Rezultat">Rezultat</h3>
+
+<p>{{EmbedLiveSample("Example", 170, 60)}}</p>
+
+<h2 id="Specyfikacja">Specyfikacja</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('9.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pl/web/svg/element/animatetransform/index.html b/files/pl/web/svg/element/animatetransform/index.html
new file mode 100644
index 0000000000..e54fffd073
--- /dev/null
+++ b/files/pl/web/svg/element/animatetransform/index.html
@@ -0,0 +1,95 @@
+---
+title: <animateTransform>
+slug: Web/SVG/Element/animateTransform
+tags:
+  - Animacja
+  - Animacje SVG
+  - SVG Animacja
+translation_of: Web/SVG/Element/animateTransform
+---
+<div>{{SVGRef}}</div>
+
+<p>Element animateTransform służy do transformacji właściwości elementu takich jak skalowanie, obracanie, przechylanie.</p>
+
+<h2 id="Użycie">Użycie</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Przykład">Przykład</h2>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" &gt;
+
+    &lt;polygon points="60,30 90,90 30,90"&gt;
+        &lt;animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/&gt;
+    &lt;/polygon&gt;
+&lt;/svg&gt;</pre>
+
+<p><strong>Podgląd na żywo</strong></p>
+
+<p>{{ EmbedLiveSample('Example','120','120') }}</p>
+
+<h2 id="Atrybuty">Atrybuty</h2>
+
+<h3 id="Atrybuty_globalne">Atrybuty globalne</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional processing attributes" title="en-US/docs/Web/SVG/Attribute#Conditional processing attributes">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core attributes" title="en-US/docs/Web/SVG/Attribute#Core attributes">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation event attributes" title="en-US/docs/Web/SVG/Attribute#Animation event attributes">Animation event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink attributes" title="en-US/docs/Web/SVG/Attribute#Xlink attributes">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation attribute target attributes" title="en-US/docs/Web/SVG/Attribute#Animation attribute target attributes">Animation attribute target attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation timing attributes" title="en-US/docs/Web/SVG/Attribute#Animation timing attributes">Animation timing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation value attributes" title="en-US/docs/Web/SVG/Attribute#Animation value attributes">Animation value attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation addition attributes" title="en-US/docs/Web/SVG/Attribute#Animation addition attributes">Animation addition attributes</a> »</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3>
+
+<ul>
+ <li>{{ SVGAttr("by") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h2 id="Model_DOM">Model DOM</h2>
+
+<p>Element implementuje <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p>
+
+<h2 id="Specyfikacja">Specyfikacja</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "&lt;animateTransform&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '&lt;animateTransform&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2>
+
+<p>{{Compat("svg.elements.animateTransform")}}</p>
diff --git a/files/pl/web/svg/element/index.html b/files/pl/web/svg/element/index.html
new file mode 100644
index 0000000000..297ac09a16
--- /dev/null
+++ b/files/pl/web/svg/element/index.html
@@ -0,0 +1,252 @@
+---
+title: SVG element reference
+slug: Web/SVG/Element
+tags:
+  - NeedsTranslation
+  - SVG
+  - SVG Reference
+  - TopicStub
+  - 'l10n:priority'
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/en-US/docs/SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute">SVG Attribute reference</a> »</p>
+
+<h2 id="SVG_elements">SVG elements</h2>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+ <li>{{SVGElement("altGlyphItem")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+ <li>{{SVGElement("cursor")}}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+ <li>{{SVGElement("discard")}}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feDropShadow")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("font")}}</li>
+ <li>{{SVGElement("font-face")}}</li>
+ <li>{{SVGElement("font-face-format")}}</li>
+ <li>{{SVGElement("font-face-name")}}</li>
+ <li>{{SVGElement("font-face-src")}}</li>
+ <li>{{SVGElement("font-face-uri")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+<span id="G">G</span>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+</ul>
+<span id="H">H</span>
+
+<ul>
+ <li>{{SVGElement("hatch")}}</li>
+ <li>{{SVGElement("hatchpath")}}</li>
+ <li>{{SVGElement("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+<span id="L">J K L</span>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("mesh")}}</li>
+ <li>{{SVGElement("meshgradient")}}</li>
+ <li>{{SVGElement("meshpatch")}}</li>
+ <li>{{SVGElement("meshrow")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("missing-glyph")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+<span id="P">N O P</span>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+<span id="R">Q R</span>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("solidcolor")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{SVGElement("unknown")}}</li>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{HTMLElement("video")}}</li>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_elements">Animation elements</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Basic_shapes">Basic shapes</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Container_elements">Container elements</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>
+
+<h3 id="Descriptive_elements">Descriptive elements</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Filter_primitive_elements">Filter primitive elements</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Font_elements">Font elements</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="Gradient_elements">Gradient elements</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="Graphics_elements">Graphics elements</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Graphics_referencing_elements">Graphics referencing elements</h3>
+
+<p>{{HTMLElement("audio")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("mesh")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p>
+
+<h3 id="HTML_elements">HTML elements</h3>
+
+<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("video")}}</p>
+
+<h3 id="Light_source_elements">Light source elements</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Never-rendered_elements">Never-rendered elements</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Paint_server_elements">Paint server elements</h3>
+
+<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p>
+
+<h3 id="Renderable_elements">Renderable elements</h3>
+
+<p>{{SVGElement("a")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p>
+
+<h3 id="Shape_elements">Shape elements</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Structural_elements">Structural elements</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Text_content_elements">Text content elements</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Text_content_child_elements">Text content child elements</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Uncategorized_elements">Uncategorized elements</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
diff --git a/files/pl/web/svg/element/okrąg/index.html b/files/pl/web/svg/element/okrąg/index.html
new file mode 100644
index 0000000000..6ef2bca50e
--- /dev/null
+++ b/files/pl/web/svg/element/okrąg/index.html
@@ -0,0 +1,99 @@
+---
+title: <circle>
+slug: Web/SVG/Element/okrąg
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p>Element <a href="/en-US/docs/Web/SVG">SVG</a> jest podstawowym kształtem SVG, używanym do tworzenia okręgów w oparciu o punkt środkowy i promień.<strong><code>&lt;circle&gt;</code></strong></p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html, body, svg {height: 100%}</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="50" cy="50" r="50" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample ("Przykład", 100, 100)}}</p>
+</div>
+
+<h2 id="Atrybuty">Atrybuty</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr ("cx")}}</dt>
+ <dd>Ten atrybut definiuje współrzędną osi X środka elementu.<br>
+ <small><em>Typ wartości</em> : <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;długość&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;procent&gt;</a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd>
+ <dt id="attr-cy">{{SVGAttr ("cy")}}</dt>
+ <dd>Ten atrybut definiuje współrzędną osi y środka środka elementu.<br>
+ <small><em>Typ wartości</em> :  <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;długość&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;procent&gt;</a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd>
+ <dt id="attr-r">{{SVGAttr ("r")}}</dt>
+ <dd>Ten atrybut definiuje promień elementu.<br>
+ Wartość mniejsza lub równa zero powoduje wyłączenie renderowania okręgu.<br>
+ <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd>
+ <dt>{{SVGAttr ("ścieżkaLength")}}</dt>
+ <dd>Ten atrybut pozwala określić całkowitą długość ścieżki w jednostkach użytkownika.<br>
+ <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;liczba&gt;</strong></a> ; <em>Wartość domyślna</em> : <em>brak</em> ; <em>Animowalny</em> : <strong>tak</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Począwszy od SVG2 i <em>Geometria Propertie</em> s, czyli te atrybuty mogą być również używane jako właściwości CSS dla tego elementu.SVG2 <code>cx</code>, <code>cy</code>and <code>r</code> are</p>
+</div>
+
+<h3 id="Globalne_atrybuty">Globalne atrybuty</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Główne atrybuty</a></dt>
+ <dd><small>Przede wszystkim: {{SVGAttr ('id')}}, {{SVGAttr ('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Atrybuty stylizacji</a></dt>
+ <dd><small>{{SVGAttr ('class')}}, {{SVGAttr ('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Atrybuty warunkowego przetwarzania</a></dt>
+ <dd><small>Przede wszystkim: {{SVGAttr ('requiredExtensions')}}, {{SVGAttr ("systemLanguage")}}</small></dd>
+ <dt>Atrybuty zdarzeń</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "shapes.html#CircleElement", "&lt;circle&gt;")}}</td>
+   <td>{{Spec2 ("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName ("SVG1.1", "shapes.html # CircleElement", "&lt;circle&gt;")}}</td>
+   <td>{{Spec2 ("SVG1.1")}}</td>
+   <td>Początkowa definicja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zgodność_przeglądarki">Zgodność przeglądarki</h2>
+
+<div class="hidden">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam prośbę o wycofanie.</div>
+
+<p>{{Compat ("svg.elements.circle")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li>Inne podstawowe kształty SVG: <strong>{{SVGElement ('ellipse')}}</strong> , {{SVGElement ('line')}}, {{SVGElement ('polygon')}}, {{SVGElement ('polyline')}}, { {SVGElement ("rect")}}</li>
+</ul>
diff --git a/files/pl/web/svg/index.html b/files/pl/web/svg/index.html
new file mode 100644
index 0000000000..e28579c3d5
--- /dev/null
+++ b/files/pl/web/svg/index.html
@@ -0,0 +1,100 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - SVG
+  - Wszystkie_kategorie
+translation_of: Web/SVG
+---
+<p> </p>
+
+<div class="callout-box"><strong><a href="pl/SVG/Przewodnik">Na początek</a></strong><br>
+Kurs mający pomóc w rozpoczęciu nauki SVG.</div>
+
+<div>
+<p><strong>Skalowalna Grafika Wektorowa (SVG)</strong> jest językiem na bazie <a href="pl/XML">XML</a>-a służącym do opisu dwuwymiarowej grafiki wektorowej. Ogólnie SVG jest tym dla grafiki czym XHTML dla tekstu.</p>
+
+<p>SVG jest podobny w zakresie do technologi Macromedia Flash. Jednakże tym co odróżnia SVG od Flasha jest <a class="external" href="http://www.w3.org/Graphics/SVG/">rekomendacja W3C</a> (tj. standard dotyczący zamiarów i celów) oraz to, że oparty jest on na XML-u, a nie na zamkniętym formacie binarnym. SVG jest również specjalnie zaprojektowany do współpracy z innymi standardami <a class="external" href="http://www.w3.org/">W3C</a> jak <a href="pl/CSS">CSS</a>, <a href="pl/DOM">DOM</a> czy <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
+</div>
+
+<p> </p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentacja" name="Dokumentacja"><a>Dokumentacja</a></h4>
+
+    <dl>
+     <dt><a href="pl/SVG_w_Firefoksie">SVG w Firefoksie</a></dt>
+     <dd><small>Artykuł opisuje podzbiór i zachowanie specyfikacji SVG 1.1 aktualnie zaimplementowanej w Firefoksie 2.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/pl/docs/Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie">Wprowadzenie do użycia SVG w HTML-u</a></dt>
+     <dd><small>Ten artykuł oraz <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">powiązany przykład</a> pokazują jak używać SVG w kodzie, aby dodać obrazek tła do formularza. Pokazuje jak można użyć JavaScriptu i CSS-a do manipulowania obrazkami, w taki sam sposób w jaki czynią to z HTML-em.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://jwatt.org/svg/authoring/">SVG - Podręcznik autorski</a></dt>
+     <dd><small>Omawiane są tutaj najczęstsze błędy w SVG oraz wyjaśnia co programiści czynią, by je naprawić.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="pl/Projekt_Mozilla_SVG">Projekt Mozilla SVG</a></dt>
+     <dd><small>Przegląd projektu Mozilla SVG.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="pl/Mozilla_SVG_FAQ">Mozilla SVG FAQ</a></dt>
+     <dd><small>Powyższy FAQ oparty został początkowo na grupie dyskusyjnej mozilla.dev.tech.svg oraz forach forums.mozillazine.org.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4>
+
+    <ul>
+     <li>Obejrzyj fora Mozilli...</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}</p>
+
+    <ul>
+     <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li>
+    </ul>
+
+    <h4 id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
+     <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">Walidator SVG</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p>
+
+    <h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.croczilla.com/svg/samples/">Przykłady SVG</a> (croczilla.com)</li>
+     <li><a class="external" href="http://www.carto.net/papers/svg/samples/">Więcej przykładów</a> (carto.net)</li>
+    </ul>
+
+    <h4 id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h4>
+
+    <dl>
+     <dd><a href="pl/XML">XML</a>, <a href="pl/HTML/Canvas">Canvas</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categories</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p> </p>
+
+<p>{{ languages( { "en": "en/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pt": "pt/SVG" } ) }}</p>
diff --git a/files/pl/web/svg/inne_zasoby/index.html b/files/pl/web/svg/inne_zasoby/index.html
new file mode 100644
index 0000000000..6e5f2508b8
--- /dev/null
+++ b/files/pl/web/svg/inne_zasoby/index.html
@@ -0,0 +1,19 @@
+---
+title: Inne zasoby
+slug: Web/SVG/Inne_zasoby
+tags:
+  - SVG
+  - Wszystkie_kategorie
+translation_of: Web/SVG/Other_Resources
+---
+<p>
+</p>
+<h3 id="Wszystkie_inne_zasoby" name="Wszystkie_inne_zasoby"> Wszystkie inne zasoby </h3>
+<ul><li> <a class="external" href="http://www.croczilla.com/svg/">Zasoby Mozilla SVG</a>
+</li><li> <a class="external" href="http://svg.org/">SVG.org</a>
+</li><li> <a class="external" href="http://www.svgx.org/">SVGX.org</a>
+</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/">Strona domowa W3C SVG</a>
+</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/Test/">Sprawdzian obsługi SVG</a>
+</li><li> <a class=" external" href="http://wiki.svg.org/index.php?title=Server_Configuration" rel="freelink">http://wiki.svg.org/index.php?title=..._Configuration</a>
+</li></ul>
+{{ languages( { "en": "en/SVG/Other_Resources", "ja": "ja/SVG/Other_Resources" } ) }}
diff --git a/files/pl/web/svg/przewodnik/index.html b/files/pl/web/svg/przewodnik/index.html
new file mode 100644
index 0000000000..7f150c7110
--- /dev/null
+++ b/files/pl/web/svg/przewodnik/index.html
@@ -0,0 +1,28 @@
+---
+title: SVG Poradnik
+slug: Web/SVG/Przewodnik
+tags:
+  - SVG
+  - 'SVG:Przewodnik'
+  - Wszystkie_kategorie
+translation_of: Web/SVG/Tutorial
+---
+<p> </p>
+
+<p><br>
+ Poniższy przewodnik opisuje wersję 1.1 Skalowalnej Grafiki Wektorowej <a href="pl/SVG">SVG</a>, a dialektu XML W3C częściowo zaimplementowanego w Firefoksie 1.5, Operze 8.5 oraz innych przeglądarkach.</p>
+
+<p>Jest on na <strong>bardzo</strong> wczesnym etapie rozwoju. Każda pomoc będzie doceniona!</p>
+
+<h5 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h5>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pl/docs/Web/SVG/Przewodnik/Introduction">Wprowadzenie</a></li>
+ <li><a href="pl/SVG/Przewodnik/Na_pocz%c4%85tek">Na początek</a></li>
+ <li>Wiele innych wpisów</li>
+ <li><a href="pl/SVG/Przewodnik/Inne_przewodniki">Inne przewodniki</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial" } ) }}</p>
diff --git a/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html
new file mode 100644
index 0000000000..f816909090
--- /dev/null
+++ b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html
@@ -0,0 +1,78 @@
+---
+title: SVG w XHTML - Wprowadzenie
+slug: Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie
+tags:
+  - SVG
+  - Wszystkie_kategorie
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<p>
+</p>
+<h3 id="Podsumowanie"> Podsumowanie </h3>
+<p>Ten artykuł oraz powiązany z nim przykład pokazują, jak używać <a href="pl/SVG">SVG</a> osadzonego w <a href="pl/XHTML">XHTML</a>, jako tła dla formularza. Pokazuje ponadto, jak <a href="pl/JavaScript">JavaScript</a> i <a href="pl/CSS">CSS</a> mogą być zastosowane do manipulowania obrazem w analogiczny sposób, jak kodem XHTML. Uwaga: poniższy przykład będzie działał wyłącznie w przeglądarkach obsługujących integrację XHTML (nie HTML) z SVG (jak np. Firefox 1.5 Beta 1 - <i>przyp. tłum.</i>)
+</p>
+<h3 id="Kod_.C5.BAr.C3.B3d.C5.82owy"> Kod źródłowy </h3>
+<p>Poniżej przedstawiono kod źródłowy <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">przykładu zastosowania</a> SVG osadzonego w XHTML:
+</p>
+<pre>&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;Enter something:&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;button onclick="signalError();"&gt;Activate!&lt;/button&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>
+<h3 id="Om.C3.B3wienie"> Omówienie </h3>
+<p>Powyższa strona składa się głównie ze zwykłego XHTML, CSS i JavaScriptu. Interesującą częścią
+jest element &lt;svg&gt;. Ten element i jego elementy potomne zostały zadeklarowane w przestrzeni nazw SVG. Element ten zawiera gradient oraz dwie figury nim wypełnione. Kolory ograniczników (ang. <i>stops</i>) gradientu zostały ustawione przez CSS. Kiedy użytkownik wprowadzi coś nieprawidłowego do pola formularza, skrypt ustawia atrybut "<code>invalid</code>" na elemencie &lt;body&gt;, a odpowiednia regułka CSS zmienia końcowy kolor na czerwony. Kolejna regułka CSS wyświetla komunikat o błędzie.
+</p><p>To podejście ma następujące zalety:
+</p>
+<ul><li> zastosowaliśmy zwykły formularz XHTML, który mógłby być częścią istniejącej strony www i dodaliśmy atrakcyjne, interaktywne tło
+</li><li> zachowana została wsteczna kompatybilność z przeglądarkami, które nie obsługują SVG; po prostu nie pojawi się w nich żadne tło
+</li><li> rozwiązanie to jest proste i wydajne
+</li><li> obraz dynamicznie dopasowuje się do żądanych rozmiarów w inteligentny sposób
+</li><li> możemy mieć deklaratywne regułki stylów działające i z HTML, i z SVG
+</li><li> ten sam skrypt manipuluje zarówno XHTML jak i SVG
+</li><li> dokument jest całkowicie oparty na standardach
+</li></ul>
+<h3 id="Szczeg.C3.B3.C5.82y"> Szczegóły </h3>
+<p>Atrybut <code>viewBox</code> tworzy logiczny układ współrzędnych dla obrazu SVG. W tym przypadku nasz obraz jest wyświetlany w oknie (<i>viewport</i>) 100 na 100.
+</p><p>Atrybut <code>preserveAspectRatio</code> sprawia, że stosunek wymiarów obrazu musi być zachowany, centrując obraz, zmieniając jego wymiary do największej możliwej długości lub szerokości (zależnie od tego, która jest większa) i odcinając ewentualne przepełnienie.
+</p><p>Atrybut <code>style</code> przypina element SVG do tła formularza.
+</p>
+<h3 id="Inne_strony"> Inne strony </h3>
+<ul><li> Inny przykład SVG w XHTML: <a class="external" href="http://developer.mozilla.org/en/docs/index.php?title=SVG:Namespaces_Crash_Course:Example">Rój pyłków (en)</a>
+</li><li> Strona <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> na wiki SVG
+</li></ul>
+{{ languages( { "en": "en/SVG_In_HTML_Introduction", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }}