aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/svg/element
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/svg/element')
-rw-r--r--files/de/web/svg/element/animate/index.html115
-rw-r--r--files/de/web/svg/element/circle/index.html114
-rw-r--r--files/de/web/svg/element/foreignobject/index.html133
-rw-r--r--files/de/web/svg/element/index.html209
-rw-r--r--files/de/web/svg/element/path/index.html98
-rw-r--r--files/de/web/svg/element/polygon/index.html142
-rw-r--r--files/de/web/svg/element/rect/index.html164
-rw-r--r--files/de/web/svg/element/svg/index.html135
-rw-r--r--files/de/web/svg/element/textpath/index.html71
-rw-r--r--files/de/web/svg/element/view/index.html149
10 files changed, 1330 insertions, 0 deletions
diff --git a/files/de/web/svg/element/animate/index.html b/files/de/web/svg/element/animate/index.html
new file mode 100644
index 0000000000..ffb97d1947
--- /dev/null
+++ b/files/de/web/svg/element/animate/index.html
@@ -0,0 +1,115 @@
+---
+title: animate
+slug: Web/SVG/Element/animate
+tags:
+ - Element
+ - SVG
+ - SVG Animation
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>animate</code> Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.</p>
+
+<p>Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem <code>href</code> attribut des Zielelements.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/SVGAnimateElement" title="DOM/SVGAElement">SVGAnimateElement</a></code> Schnittstelle.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[6-7]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;rect x="10" y="10" width="100" height="100"&gt;
+ &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
+ dur="10s" repeatCount="indefinite"/&gt;
+ &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</p>
+
+<h2 id="Bedenken_bezüglich_der_Barrierefreiheit">Bedenken bezüglich der Barrierefreiheit</h2>
+
+<p>Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.</p>
+
+<p>Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designen von sicheren Web Animationen für Bewegungsempfindlichkeit - Ein Artikel der Extraklasse</a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Eine Einführung in die Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsives Design für Bewegungen | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Verstehen der WCAG, Guideline 2.2 Erklärungen</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Verstehen der Erfolgskriteren 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spezifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("SVG Animations 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
+ <td>{{Spec2("SVG Animations 2")}}</td>
+ <td>Keine Änderung</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Initiale Definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatiblität">Browser Kompatiblität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde von strukturierten Daten generiert. Wenn Du etwas zu diesen Daten beitragen willst dann checke <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und sende uns einen Pull Request.</div>
+
+<p>{{Compat("svg.elements.animate")}}</p>
+</div>
+
+<p> </p>
diff --git a/files/de/web/svg/element/circle/index.html b/files/de/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..001b06f8cc
--- /dev/null
+++ b/files/de/web/svg/element/circle/index.html
@@ -0,0 +1,114 @@
+---
+title: circle
+slug: Web/SVG/Element/circle
+tags:
+ - Grafikelement
+ - Kreis
+ - Mittelpunkt
+ - Radius
+ - SVG
+ - form
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p>Das Element <code>circle</code> (Kreis) gehört zu den Grundformen in SVG. Kreise werden durch Angabe eines Mittelpunkts und eines Radius erzeugt.</p>
+
+<h2 id="Verwendungskontext">Verwendungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg viewBox="0 0 120 120" version="1.1"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;circle cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg" title="https://developer.mozilla.org/files/3252/circle.svg">circle.svg</a></p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert das {{ domxref("SVGCircleElement") }} Interface.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Merkmal</th>
+ <th scope="col">Chrome</th>
+ <th scope="col">Firefox (Gecko)</th>
+ <th scope="col">Internet Explorer</th>
+ <th scope="col">Opera</th>
+ <th scope="col">Safari</th>
+ </tr>
+ <tr>
+ <td>Grundsätzliche Unterstützung</td>
+ <td>1.0</td>
+ <td>{{ CompatGeckoDesktop('1.8') }}</td>
+ <td>{{ CompatIE('9.0') }}</td>
+ <td>{{ CompatOpera('8.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>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Grundsätzliche Unterstützung</td>
+ <td>{{ CompatAndroid('3.0') }}</td>
+ <td>{{ CompatGeckoMobile('1.8') }}</td>
+ <td>{{ CompatNo() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatSafari('3.0.4') }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Diese Übersicht basiert auf diesen <a href="/en-US/docs/Web/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">Quellen</a>.</p>
+
+<h2 id="Verwandte_Begriffe">Verwandte Begriffe</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+</ul>
diff --git a/files/de/web/svg/element/foreignobject/index.html b/files/de/web/svg/element/foreignobject/index.html
new file mode 100644
index 0000000000..f76fd63b34
--- /dev/null
+++ b/files/de/web/svg/element/foreignobject/index.html
@@ -0,0 +1,133 @@
+---
+title: foreignObject
+slug: Web/SVG/Element/foreignObject
+translation_of: Web/SVG/Element/foreignObject
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>foreignObject</code>-Element ermöglicht die Einbindung eines fremden XML-Namespace, dessen graphischer Inhalt von einem anderen User-Agent dargestellt wird. Der eingebundene fremde graphische Inhalt ist Subjekt der SVG-Transformationen und des Compositing.</p>
+
+<p>Der Inhalt des <code>foreignObject</code> wird in einem anderen Namespace vermutet. Jedes SVG-Element innerhalb eines <code>foreignObject</code> wird nicht gezeichnet, es sei denn, ein korrekt definiertes SVG-Subdokument mit einer sauberen <code>xmlns</code>-Attribut-Spezifikation ist rekursiv eingebettet. Eine Situation, in der dies geschehen kann, ist, wenn ein SVG-Dokumentenfragment in einem Nicht-SVG-Dokumentenfragment eingebettet ist, welche wiederum in einem SVG-Dokumentenfragment eingebettet ist (z.B. ein SVG-Dokumentenfragment beinhaltet ein XHTML-Dokumentenfragment, welches seinerseits ein anderes SVG-Dokumentenfragment beinhaltet).</p>
+
+<p>Üblicherweise wird ein <code>foreignObject</code> in Verbindung mit dem {{ SVGElement("switch") }}-Element und dem {{ SVGAttr("requiredExtensions") }}-Attribut verwendet, um eine saubere Prüfung der entsprechenden User-Agent-Unterstützung zu ermöglichen und eine alternative Rendermethode zu liefern, wenn der User-Agent nicht unterstütz wird.</p>
+
+<h2 id="Anwendungskontext">Anwendungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: xml">&lt;svg width="400px" height="300px" viewBox="0 0 400 300"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;desc&gt;Dieses Beispiel benutzt das 'switch'-Element, um eine
+ Ausweichmöglichkeit der graphischen Darstellung zu liefern,
+ falls XHTML nicht unterstützt werden sollte.&lt;/desc&gt;
+
+ &lt;!-- Das 'switch'Element wird das erste Kindelement auswählen,
+ dessen Testergebnisse auf true zurückliefern. --&gt;
+ &lt;switch&gt;
+
+ &lt;!-- Verarbeite das eingebettete XHTML, falls das requiredExtensions-Attribut
+ true zurückliefert (z.B. wenn der User-Agent XHTML
+ in SVG eingebettet unterstützt). --&gt;
+ &lt;foreignObject width="100" height="50"
+ requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>"&gt;
+ &lt;!-- XHTML-Inhalt steht hier --&gt;
+ &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
+ &lt;p&gt;Hier ist ein Absatz, welcher einen Zeilenumbruch benötigt.&lt;/p&gt;
+ &lt;/body&gt;
+ &lt;/foreignObject&gt;
+
+ &lt;!-- Ansonsten verarbeite das folgende alternative SVG.
+ Beachte, dass das 'text'-Element keine Test-Attribute besitzt.
+ Wenn keine Test-Attribute angegeben werden, wird das Element so
+ behandelt, als hätte es keine Test-Attribute und liefert true zurück. --&gt;
+ &lt;text font-size="10" font-family="Verdana"&gt;
+ &lt;tspan x="10" y="10"&gt;Hier ist ein Absatz, welcher&lt;/tspan&gt;
+ &lt;tspan x="10" y="20"&gt;einen Zeilenumbruch benötigt.&lt;/tspan&gt;
+ &lt;/text&gt;
+ &lt;/switch&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+</ul>
+
+<h2 id="DOM-Interface">DOM-Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code>-Interface.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>1.0</td>
+ <td>1.9</td>
+ <td>{{ CompatNo() }}</td>
+ <td>2.0</td>
+ <td>3.0</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Chrome for Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>2.0</td>
+ <td>{{ CompatNo() }}</td>
+ <td>2.0</td>
+ <td>3.0</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Diese Tabelle basiert auf <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">diesen Quellen</a>.</p>
diff --git a/files/de/web/svg/element/index.html b/files/de/web/svg/element/index.html
new file mode 100644
index 0000000000..4e7586d0b0
--- /dev/null
+++ b/files/de/web/svg/element/index.html
@@ -0,0 +1,209 @@
+---
+title: SVG Elementreferenz
+slug: Web/SVG/Element
+tags:
+ - SVG
+ - SVG Referenz
+translation_of: Web/SVG/Element
+---
+<h2 id="SVG_Elemente">SVG Elemente</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>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <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>
+</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("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("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <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("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("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("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="Kategorien">Kategorien</h2>
+
+<h3 id="Animationselemente">Animationselemente</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Grundformen">Grundformen</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Containerelemente">Containerelemente</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p>
+
+<h3 id="Beschreibende_Elemente">Beschreibende Elemente</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Filterelemente">Filterelemente</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Farbverlaufselemente">Farbverlaufselemente</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}</p>
+
+<h3 id="Grafikelemente">Grafikelemente</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Lichtquellenelemente">Lichtquellenelemente</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Formelemente">Formelemente</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Strukturelle_Elemente">Strukturelle Elemente</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Textelemente">Textelemente</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Textkindelemente">Textkindelemente</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Nicht_kategorisierte_Elemente">Nicht kategorisierte Elemente</h3>
+
+<p>{{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("foreignObject")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("hkern")}}, {{SVGElement("mpath")}}, {{SVGElement("script")}}, {{SVGElement("stop")}}, {{SVGElement("style")}}, {{SVGElement("view")}}, {{SVGElement("vkern")}}</p>
diff --git a/files/de/web/svg/element/path/index.html b/files/de/web/svg/element/path/index.html
new file mode 100644
index 0000000000..ebc123889a
--- /dev/null
+++ b/files/de/web/svg/element/path/index.html
@@ -0,0 +1,98 @@
+---
+title: <path>
+slug: Web/SVG/Element/path
+translation_of: Web/SVG/Element/path
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <strong><code>&lt;path&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> Element ist das allgemeine Element zum definieren einer Form. Alle Grundformen können mit einem path-Element erzeugt werden.</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;path d="M 10,30
+ A 20,20 0,0,1 50,30
+ A 20,20 0,0,1 90,30
+ Q 90,60 50,90
+ Q 10,60 10,30 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr("d")}}</dt>
+ <dd>Dieses Attribut definiert die Form des Pfades.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <code>''</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Dieses Attribut lässt den Author die Gesammtlänge des Pfades in der Einheit des Nutzers definieren.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attribute</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Style Attribute</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</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("SVG Paths", "#PathElement", "&lt;path&gt;")}}</td>
+ <td>{{Spec2("SVG Paths")}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG2", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+ <td>{{Spec2("SVG2")}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.path")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
+</ul>
diff --git a/files/de/web/svg/element/polygon/index.html b/files/de/web/svg/element/polygon/index.html
new file mode 100644
index 0000000000..d620bfa203
--- /dev/null
+++ b/files/de/web/svg/element/polygon/index.html
@@ -0,0 +1,142 @@
+---
+title: <polygon>
+slug: Web/SVG/Element/polygon
+tags:
+ - Element
+ - Referenz
+ - SVG
+ - SVG Grafik
+translation_of: Web/SVG/Element/polygon
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <strong><code>&lt;polygon&gt;</code></strong> Element definiert eine geschlossene Form, die aus mehreren geraden Linien besteht. Der letzte Punkt wird mit dem ersten Punkt verbunden. Für geöffnete (nicht verbundene) Formen existiert das  {{SVGElement("polyline")}} Element.</p>
+
+<h2 id="Verwendung">Verwendung</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Bedingte Verarbeitungsattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Kernattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Grafische Ereignisattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Darstellungsattribute</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Zielgenaue_Attribute">Zielgenaue Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("points")}}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die {{domxref("SVGPolygonElement")}} Schnittstelle.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spezifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+ <td>{{Spec2('SVG2')}}</td>
+ <td>Keine Änderung</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+ <td>{{Spec2('SVG1.1')}}</td>
+ <td>Initiale Definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</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>Grundlegende Unterstützung</td>
+ <td>{{CompatChrome('1.0')}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop('1.8')}}</td>
+ <td>{{CompatIE('9.0')}}</td>
+ <td>{{CompatOpera('8.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>Grundlegende Unterstützung</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>
+
+<p>Diese Tabelle basiert auf <a href="/en-US/docs/Web/SVG/Compatibility_sources">diesen Daten</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
diff --git a/files/de/web/svg/element/rect/index.html b/files/de/web/svg/element/rect/index.html
new file mode 100644
index 0000000000..1098542db5
--- /dev/null
+++ b/files/de/web/svg/element/rect/index.html
@@ -0,0 +1,164 @@
+---
+title: <rect>
+slug: Web/SVG/Element/rect
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">Das <strong><code>&lt;rect&gt;</code></strong> Element ist ein SVG Element, aus welchem Rechtecke mittels einer definierten Eckposition, einer Höhe und einer Breite erstellt werden können.</span> Zudem sind Rechtecke mit abgerundeten Ecken möglich.</p>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</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>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<dl>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Legt die x-Koordinate des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Legt die y-Koordinate des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Legt die Breite des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Legt die Höhe des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("rx")}}</dt>
+ <dd>Legt den horizontalen Eckradius des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("ry")}}</dt>
+ <dd>Legt den vertikalen Eckradius des rect-Elements fest.</dd>
+</dl>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das {{domxref("SVGRectElement")}} Interface.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Nutzung_des_rect-Elements">Einfache Nutzung des rect-Elements</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;rect x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Simple_rect_usage", 120, 120)}}</p>
+
+<h3 id="Rect-Element_mit_abgerundeten_Ecken">Rect-Element mit abgerundeten Ecken</h3>
+
+<h4 id="SVG_2">SVG</h4>
+
+<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+ xmlns="http://www.w3.org/2000/svg"&gt;
+
+ &lt;rect x="10" y="10" width="100" height="100" rx="15" ry="15"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Rect_with_rounded_corners", 120, 120)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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#RectElement', '&lt;rect&gt;')}}</td>
+ <td>{{Spec2('SVG2')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
+ <td>{{Spec2('SVG1.1')}}</td>
+ <td>Erste Definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kombatibilität">Browser Kombatibilität</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>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basis Unterstützung</td>
+ <td>1.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop('1.8')}}</td>
+ <td>{{CompatIE('9.0')}}</td>
+ <td>{{CompatOpera('8.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>Basis Unterstützung</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>
+
+<p>Die Tabelle stützt sich auf <a href="/en-US/SVG/Compatibility_sources">diese Quellen</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+</ul>
diff --git a/files/de/web/svg/element/svg/index.html b/files/de/web/svg/element/svg/index.html
new file mode 100644
index 0000000000..7be6f700fe
--- /dev/null
+++ b/files/de/web/svg/element/svg/index.html
@@ -0,0 +1,135 @@
+---
+title: <svg>
+slug: Web/SVG/Element/svg
+tags:
+ - Element
+ - Referenz
+ - SVG
+ - SVG Kontainer
+ - Web
+translation_of: Web/SVG/Element/svg
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>svg</code> Element ist ein Container, der ein neues Koordinatensystem und ein <a href="/en-US/docs/Web/SVG/Attribute/viewBox">Darstellungsfeld</a> definiert. Es wird als das äußerste Element jedes SVG Dokuments verwendet, aber kann auch dazu dienen SVG Fragmente innerhalb von einem anderen SVG oder einem HTML Dokument einzubetten.</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Das <code>xmlns</code> Attribute wird nur benötigt wenn das <code>svg</code>-Element das äußerste Element eines <em>SVG Dokuments</em> ist.</p>
+</div>
+
+<div id="Exeemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;circle cx="50" cy="50" r="40" stroke="red" fill="grey" /&gt;
+ &lt;circle cx="150" cy="50" r="4" stroke="red" fill="grey" /&gt;
+
+ &lt;svg viewBox="0 0 10 10" x="200" width="100"&gt;
+ &lt;circle cx="5" cy="5" r="4" stroke="red" fill="grey" /&gt;
+ &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Berücksichtige das folgende SVG Bild (dies stellt die italienische Nationalflagge dar):</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+ width="150" height="100" viewBox="0 0 3 2"&gt;
+
+ &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+ &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+ &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Es könnt folgendermaßen in ein HTML5 Dokument inkludiert werden:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+ &lt;meta charset="UTF-8" /&gt;
+ &lt;title&gt;HTML/SVG Example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+ &lt;svg width="150" height="100" viewBox="0 0 3 2"&gt;
+ &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+ &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+ &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+ &lt;/svg&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("version")}}</li>
+ <li>{{SVGAttr("baseProfile")}}</li>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("contentScriptType")}}</li>
+ <li>{{SVGAttr("contentStyleType")}}</li>
+ <li>{{SVGAttr("viewBox")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code> Interface.</p>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spezifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('SVG2', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+ <td>{{Spec2('SVG2')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+ <td>{{Spec2('SVG1.1')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("svg.elements.svg")}}</p>
diff --git a/files/de/web/svg/element/textpath/index.html b/files/de/web/svg/element/textpath/index.html
new file mode 100644
index 0000000000..c7b1218887
--- /dev/null
+++ b/files/de/web/svg/element/textpath/index.html
@@ -0,0 +1,71 @@
+---
+title: textPath
+slug: Web/SVG/Element/textPath
+translation_of: Web/SVG/Element/textPath
+---
+<div>{{SVGRef}}</div>
+
+<p>Neben der Fähigkeit, Text auf einer Geraden Linie zu zeichnen, kann SVG diesen auch entlang der Form eines {{ SVGElement("path") }} Elements platzieren. Um von dieser Funktion Gebrauch zu machen, füge den gewünschten Text in einem<code>textPath</code> Element mit einem<code>xlink:href</code> Attribut mit einer Referenz zu dem {{ SVGElement("path") }} Element.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+ &lt;defs&gt;
+ &lt;path id="MyPath"
+ d="M 100 200
+ C 200 100 300 0 400 100
+ C 500 200 600 300 700 200
+ C 800 100 900 100 900 100" /&gt;
+ &lt;/defs&gt;
+
+ &lt;use xlink:href="#MyPath" fill="none" stroke="red" /&gt;
+
+  &lt;text font-family="Verdana" font-size="42.5"&gt;
+ &lt;textPath xlink:href="#MyPath"&gt;
+ We go up, then we go down, then up again
+ &lt;/textPath&gt;
+ &lt;/text&gt;
+
+ &lt;!-- Show outline of the viewport using 'rect' element --&gt;
+ &lt;rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="black" stroke-width="2" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Live result:</p>
+
+<p>{{EmbedLiveSample("Example",500,175)}}</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en/DOM/SVGTextPathElement" title="en/DOM/SVGTextPathElement">SVGTextPathElement</a></code> interface.</p>
diff --git a/files/de/web/svg/element/view/index.html b/files/de/web/svg/element/view/index.html
new file mode 100644
index 0000000000..eea389a533
--- /dev/null
+++ b/files/de/web/svg/element/view/index.html
@@ -0,0 +1,149 @@
+---
+title: <view>
+slug: Web/SVG/Element/view
+translation_of: Web/SVG/Element/view
+---
+<div>{{SVGRef}}</div>
+
+<p>&lt;view&gt; ist ein definierter Weg, das Bild zu betrachten, wie eine Vergrößerungsstufe oder eine Detail-Ansicht.</p>
+
+<h2 id="Gebrauchs-Kontext">Gebrauchs-Kontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Aria_attributes" title="en/SVG/Attribute#Core">Bereichattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Kernattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Global_event_attributes" title="en/SVG/Attribute#Core">Globale Ereignisattribute</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("viewBox")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("zoomAndPan")}}</li>
+ <li>{{SVGAttr("viewTarget")}}</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="600" height="200" viewBox="0 0 600 200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+ &lt;defs&gt;
+ &lt;radialGradient id="gradient"&gt;
+ &lt;stop offset="0%" stop-color="#8cffa0" /&gt;
+ &lt;stop offset="100%" stop-color="#8ca0ff" /&gt;
+ &lt;/radialGradient&gt;
+ &lt;/defs&gt;
+
+ &lt;circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/&gt;
+
+ &lt;view id="halfSizeView" viewBox="0 0 1200 400"/&gt;
+ &lt;view id="normalSizeView" viewBox="0 0 600 200"/&gt;
+ &lt;view id="doubleSizeView" viewBox="0 0 300 100"/&gt;
+
+ &lt;a xlink:href="#halfSizeView"&gt;
+ &lt;text x="5" y="20" font-size="20"&gt;half size&lt;/text&gt;
+ &lt;/a&gt;
+ &lt;a xlink:href="#normalSizeView"&gt;
+ &lt;text x="5" y="40" font-size="20"&gt;normal size&lt;/text&gt;
+ &lt;/a&gt;
+ &lt;a xlink:href="#doubleSizeView"&gt;
+ &lt;text x="5" y="60" font-size="20"&gt;double size&lt;/text&gt;
+ &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 200)}}</p>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the {{domxref("SVGViewElement")}} interface.</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', 'linking.html#ViewElement', '&lt;view&gt;')}}</td>
+ <td>{{Spec2('SVG2')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('SVG1.1', 'linking.html#ViewElement', '&lt;view&gt;')}}</td>
+ <td>{{Spec2('SVG1.1')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("15.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("15.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-15 22:31:15 +0000