diff options
Diffstat (limited to 'files/de/web/svg/tutorial')
| -rw-r--r-- | files/de/web/svg/tutorial/einführung/index.html | 21 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/fills_and_strokes/index.html | 147 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/index.html | 14 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/pfade/index.html | 239 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/svg_image_tag/index.html | 36 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/svg_schriftarten/index.html | 99 | ||||
| -rw-r--r-- | files/de/web/svg/tutorial/tools_for_svg/index.html | 70 |
7 files changed, 626 insertions, 0 deletions
diff --git a/files/de/web/svg/tutorial/einführung/index.html b/files/de/web/svg/tutorial/einführung/index.html new file mode 100644 index 0000000000..9e4250ed20 --- /dev/null +++ b/files/de/web/svg/tutorial/einführung/index.html @@ -0,0 +1,21 @@ +--- +title: Einführung +slug: Web/SVG/Tutorial/Einführung +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png"></p> +<p><a class="internal" href="/De/SVG" rel="internal" title="De/SVG">SVG</a> ist eine <a class="internal" href="/de/XML" title="De/XML">XML</a>-Sprache, vergleichbar mit <a class="internal" href="/De/XHTML" rel="internal" title="De/XHTML">XHTML</a>, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.</p> +<p>SVG erschien im Jahre 1999 nachdem mehrere Formate zum <a class=" external" href="http:///w3.org">W3C</a> eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während <a class="internal" href="/De/HTML/Canvas" rel="internal" title="De/HTML/Canvas">HTML:Canvas</a> oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.</p> +<h3 id="Vor_dem_Beginn">Vor dem Beginn</h3> +<p>Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel <a class="external" href="http://www.inkscape.org/">Inkscape</a>, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> oder <a href="/de/CSS" title="de/CSS">CSS</a>).</p> +<p>SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im <a class="external" href="http://wiki.svg.org/Viewer_Implementations">SVG Wiki</a>. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.</p> +<p>Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:</p> +<ul> <li>SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)</li> <li>Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.</li> +</ul> +<p>SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die <a href="/de/SVG/Elementreferenz">Elementreferenz</a> und die <a href="/de/SVG/Schnittstellenreferenz">Schnittstellenreferenz</a> zu verwenden, um alles Weitere zu finden.</p> +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p> diff --git a/files/de/web/svg/tutorial/fills_and_strokes/index.html b/files/de/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..2dd5fb9a7f --- /dev/null +++ b/files/de/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,147 @@ +--- +title: Fills and Strokes +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - Anfänger + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> + +<p>Es gibt mehrere Möglichkeiten die Farben von Formen mit zu verändern, mit Inline CSS (inklusive Attributen am Objekt), eingebettetem CSS oder einer externen CSS Datei. Die meisten <a href="/en-US/docs/Glossary/SVG">SVG</a>s im Netz nutzen Inline CSS, aber jede Möglichkeit hat Vor- und Nachteile.</p> + +<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Füllungs- und Konturattribute</h2> + +<h3 id="Painting" name="Painting">Malen</h3> + +<p>Durch das Setzen zweier Attribute beim Element, kann einfache Farbgebung durchgeführt werden: <code>fill</code> und <code>stroke</code>. Dabei setzt <code>fill </code>die Farbe innerhalb des Objektes, während <code>stroke</code> die Farbe der Linien um das Objekt herum bestimmt. Es können die gleichen Namensschemen für CSS Farben genutzt werden, welche auf bei HTML Elementen verwendet werden - also Farbnamen (z.B. <em>red</em>), RGB Werte (z.B. <em>rgb(255, 0, 0)</em>, HEX Codes, rgba und weitere).</p> + +<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + fill-opacity="0.5" stroke-opacity="0.8"/> +</pre> + +<p>Zusätzlich kann die Durchsichtigkeit von <code>fill</code> und <code>stroke</code> in SVG verändert werden. Diese wird durch die <code>fill-opacity</code> und <code>stroke-opacity</code> Attribute gesetzt.</p> + +<div class="note style-wrap">Bemerkung: In Firefox 3+ sind auch rgba Werte möglich, und erzeugen den gleichen Effekt, allerdings wird empfohlen aus Kompatibilitätsgründen fill/stroke-opacity separat zu setzen. Wenn ein rgba Wert und ein fill/stroke-opacity Wert gesetzt wird, so werden beide angewendet.</div> + +<h3 id="Stroke" name="Stroke">Kontur</h3> + +<p>Zusätzlich zu ihren Farbeigeschaften gibt es noch einige andere Attribute, welche festlegen wie eine Kontur auf einer Linie gezeichnet wird.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> +</svg></pre> + +<p>Die <code>stroke-width</code> Eigenschaft setzt die Breite der Kontur. Konturen werden immer zentriert auf dem Pfad gezeichnet. Im obigen Beispiel ist der Pfad in Pink und die Kontur in Schwarz dargestellt.</p> + +<p>Die zweite Eigenschaft von Konturen ist <code>stroke-linecap</code>, welchen ebenfalls oben gezeigt ist. Diese kontrolliert die Form der Konturenden.</p> + +<p>Es gibt drei mögliche Werte für <code>stroke-linecap</code>:</p> + +<ul> + <li><code>butt</code> schließt die Kontur mit einer Geraden Kante, welche senkrecht zur Richtung der Kontur steht und deren Ende schneidet.</li> + <li><code>square</code> ist sehr ähnlich, geht allerdings ein wenig über das Ende des Pfades hinaus. Die Überstand ist gleich der halben Konturbreite (<code>stroke-width</code>).</li> + <li><code>round</code> erzeugt eine Rundung am Ende der Kontur. Der Radius dieser Runding hängt ebenfalls von <code>stroke-width</code> ab.</li> +</ul> + +<p>Die <code>stroke-linejoin</code> Eigenschaft kann verwendet werden, um zu kontrollieren wie Verbindung zweier Liniensegmente gezeichnet wird.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="none" stroke-linejoin="round"/> + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> +</svg></pre> + +<p>Im obigen Beispiel werden jeweils zwei Liniensegmente verbunden. Die Verbindung zwischen beiden wird durch das <code>stroke-linejoin</code> Attribut kontrolliert. Es gibt auch hier drei mögliche Werte. <code>miter</code> erweitert die Kontur leicht, um eine "quadratische Ecke" zu generieren, die nur einen Knick hat. <code>round</code> produziert eine abgerundete Ecke. <code>bevel</code> generiert eine glatte Kante am Übergang, wodurch zwei Knicke entstehen.</p> + +<p>Abschließend können auch gestrichelte (oder gepunktete) Konturen erstellt werden. Hierzu wird das <code>stroke-dasharray</code> Attribut genutzt.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg> +</pre> + +<p>Dem <code>stroke-dasharray</code> Attribut wird eine Liste von Zahlen übergeben, welche durch Kommas getrennt sind.</p> + +<div class="note"> +<p>Bemerkung: Anders als bei Pfaden <strong><em>müssen</em></strong> die Zahlen durch ein Komma getrennt werden (Leerzeichen werden ignoriert).</p> +</div> + +<p>Die erste Zahl gibt die Länge der gefüllten Bereiche an, die zweite Nummer die Länge der ungefüllten Bereiche. Im obigen Beispiel werden also 5 Pixel gefüllt, gefolgt von 5 Pixeln Leerbereich und dann dem nächsten 5 Pixel Strich. Es können mehr Zahlen angegeben werden, um ein komplexeres Muster zu erzeugen. Das erste Beispiel hat drei Zahlen. Der Renderer wiederholt die Zahlen hier zweimal, um ein gleichmäßiges Muster zu erzeugen. Hier werden zuerst 5 Pixel gefüllt, 10 Pixel leer, 5 Pixel gefüllt und dann 5 Pixel leer, 10 gefüllt und abschließend 5 Pixel leer gezeichnet. Dann wiederholt sich dieses Muster.</p> + +<p>Es gibt weitere Kontur- und Füllungseigenschaften, zum Beispiel <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, welche bestimmt welche Farbe überlagerte Formen bekommen; <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, welche festlegt ob eine Kontur miter zeichnet; <a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a> legt fest wo die Strichelung einer Kontur auf der Linie beginnt.</p> + +<h2 id="Using_CSS" name="Using_CSS">CSS verwenden</h2> + +<p>Neben der Möglichkeit Attribute beim Objekt selbst zu setzen, kann auch CSS zum Kontrollieren von Füllungen und Konturen verwendet werden. Attribute die sich mit dem Malen und dem Füllen befassen sind meist verfügbar, also können zum Beispiel <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... auf diese Weise verwendet werden, zusätzlich zu den Verlaufs- und Musterversionen von den unten gezeigten. Attribute wie <code>width</code>, <code>height</code> oder Pfadbefehle können durch CSS nicht verändert werden. Am einfachsten ist es durch Probieren herauszufinden welche Attribute in CSS verfügbar sind.</p> + +<div class="note style-wrap">Die <a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG Spezifikation</a> unterscheidet strikt zwischen Attributen, die <em>Eigenschaften</em> sind und anderen Attributen. Ersteres kann mit CSS verändert werden, letzteres nicht.</div> + +<p>CSS kann mit dem style Attribut direkt beim Element eingefügt werden:</p> + +<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> + +</pre> + +<p>oder es kann in eine spezielle Style-Sektion getan werden, welche eingebunden wird. Anstatt diesen dann in den <code><head></code> zu packen, wie in HTML, wird er in eine Sektion getan, welche <code><a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"><defs></a> </code>heißt.<code> <defs> </code>steht für Definitionen (definitions) und ist dafür da, dass Elemente erstellt werden können, welche nicht direkt im SVG auftauchen, aber von anderen Elementen genutzt werden können.</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ + #MyRect { + stroke: black; + fill: red; + } + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg> +</pre> + +<p>Styles in eine Sektion dieser Art zu bewegen kann es einfacher machen die Eigenschaften großer Elementgruppen anzupassen. Es können zusätzlich Dinge wie <strong>hover-Pseudoklassen</strong> genutzt werden, um Überrolleffekte zu erzeugen:</p> + +<pre class="brush:css;"> #MyRect:hover { + stroke: black; + fill: blue; + } + +</pre> + +<p>Es kann auch ein externes Stylesheet für CSS mit <a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normaler XML-Stylesheet Syntax</a> angegeben werden:</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg></pre> + +<p>dort könnte style.css etwa so aussehen:</p> + +<pre class="brush:css;">#MyRect { + fill: red; + stroke: black; +}</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> diff --git a/files/de/web/svg/tutorial/index.html b/files/de/web/svg/tutorial/index.html new file mode 100644 index 0000000000..26ae32b74a --- /dev/null +++ b/files/de/web/svg/tutorial/index.html @@ -0,0 +1,14 @@ +--- +title: Tutorial +slug: Web/SVG/Tutorial +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial +--- +<p>Dieses Tutorial beschreibt Version 1.1 der Scalable Vector Graphics, <a class="internal" href="/de/SVG" rel="internal" title="de/SVG">SVG</a>, ein W3C XML-Dialekt, die in Firefox 1.5, Opera 8.5 und anderen Browsern integriert ist.</p> +<p>Dieses Tutorial ist in einer <strong>sehr</strong> frühen Aufbauphase. Wenn Sie können, helfen Sie uns, indem Sie ein oder zwei Absätze schreiben. Extrapunkte gibt's für eine ganze Seite!</p> +<h5 id="Einführung">Einführung</h5> +<ul> <li><a class="internal" href="/De/SVG/Tutorial/Einführung" title="De/SVG/Tutorial/Einführung">Einführung</a> </li> <li><a class="internal" href="/De/SVG/Tutorial/Erste_Schritte" title="De/SVG/Tutorial/Erste Schritte">Erste Schritte</a></li> +</ul> +<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p> diff --git a/files/de/web/svg/tutorial/pfade/index.html b/files/de/web/svg/tutorial/pfade/index.html new file mode 100644 index 0000000000..fcf1e30859 --- /dev/null +++ b/files/de/web/svg/tutorial/pfade/index.html @@ -0,0 +1,239 @@ +--- +title: Pfade +slug: Web/SVG/Tutorial/Pfade +tags: + - Fortgeschritten + - HilfeBenötigt + - InhaltBenötigt + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>Das <a href="/en-US/Web/SVG/Element/path"><code><path></code></a> Element ist das mächtigste Element in der SVG Sammlung der <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegenden Elemente</a>. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.</p> + +<p>Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">Polylines</a> erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.</p> + +<p>Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegende Formen</a>). Das <code>"d"</code> Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.</p> + +<p>Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.</p> + +<p>Alle dieser Befehle gibt es in zwei Varianten. Ein <strong>Grossbuchstabe</strong> gibt absolute Koordinaten auf der Seite an und ein <strong>Kleinbuchstabe</strong> gibt relative Koordinaten (z.B. <em>verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links</em>).</p> + +<p>Koordinaten im <code>"d"</code> Attribute sind <strong>immer einheitslos</strong> und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.</p> + +<h2 id="Linienbefehle">Linienbefehle</h2> + +<p>Es gibt fünf Linienbefehle für <code><path></code> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :</p> + +<pre>M x y +</pre> + +<p>oder</p> + +<pre>m dx dy</pre> + +<p>Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Punkte --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit <code>L</code>. <code>L</code> benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.</p> + +<pre> L x y (oder l dx dy) +</pre> + +<p>Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. <code>H</code> zeichnet eine horizontale Line und <code>V</code> zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.</p> + +<pre> H x (oder h dx) + V y (oder v dy) +</pre> + +<p>Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <code><rect></code> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt<span style="line-height: 1.5;">:</span></p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Punkte --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit <code>Z</code> aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.</p> + +<pre> Z (oder z) +</pre> + +<p>Unser Pfad könnte also zu folgendem abgekürzt werden:</p> + +<pre class="brush: xml"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:</p> + +<pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.</p> + +<p>In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.</p> + +<h2 id="Kurvenbefehle">Kurvenbefehle</h2> + +<p>Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.</p> + +<h3 id="Bezier-Kurven">Bezier-Kurven</h3> + +<p>Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.</p> + +<pre> C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="syntaxbox"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.</p> + +<p>Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl <code>S</code> (oder <code>s</code>) definiert wird.</p> + +<pre> S x2 y2, x y (oder s dx2 dy2, dx dy) +</pre> + +<p><code>S</code> erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen <code>S</code>- oder <code>C</code>-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl <code>S</code> nicht einem anderen <code>S</code>- oder <code>C</code>-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der <code>Q</code>-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.</p> + +<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. <code>dx</code> und <code>dy</code> sind nicht relativ zu <code>dx1</code> und <code>dx2</code>).</p> + +<pre> Q x1 y1, x y (oder q dx1 dy1, dx dy) +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.</p> + +<pre> T x y (oder t dx dy) +</pre> + +<p>Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.</p> + +<div class="note"> +<p>Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.</p> +</div> + +<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.</p> + +<h3 id="Arcs" name="Arcs">Bögen</h3> + +<p>Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:</p> + +<pre> A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y + a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy +</pre> + +<p>An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie <a href="/en-US/Web/SVG/Element/ellipse">Ellipsen</a> nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.</p> + +<p>Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.</p> + +<p>Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.</p> + +<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> + <path d="M10 315 + L 110 215 + A 36 60 0 0 1 150.71 170.29 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> + <circle cx="150.71" cy="170.29" r="2" fill="red"/> + <circle cx="110" cy="215" r="2" fill="red"/> + <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> + <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> +</svg> +</pre> + +<p>Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.</p> + +<p>Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.</p> + +<p>Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.</p> + +<p>Falls sie SVG aus <a href="/de/HTML/Canvas">Canvas</a> herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/de/web/svg/tutorial/svg_image_tag/index.html b/files/de/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..040734ffc6 --- /dev/null +++ b/files/de/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,36 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +tags: + - Einsteiger + - JPG-Bilder einfügen + - SVG +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>Das SVG {{ SVGElement("image") }}-Element erlaubt es, Rasterbilder innerhalb von SVG-Objekten einzufügen.</p> + +<p>In diesem Beispiel wird ein .jpg-Bild, aufgerufen durch das {{ SVGAttr("xlink:href") }}-Attribut, in ein SVG-Objekt eingefügt:</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>Folgende wichtige Punkte müsse beachtet werden (festgelegt in den <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3-Spezifikationen</a>):</p> + +<ul> + <li> + <p>Wurde kein Attribut x (oder y) angegeben, wird dafür automatisch 0 gesetzt.</p> + </li> + <li> + <p>Wurde kein Attribut height (oder width) angegeben, wird dafür automatisch 0 gesetzt.</p> + </li> + <li>Ist das Attribut height (oder width) 0, wird das Rendern des Bildes deaktiviert.</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/de/web/svg/tutorial/svg_schriftarten/index.html b/files/de/web/svg/tutorial/svg_schriftarten/index.html new file mode 100644 index 0000000000..57d826cb5e --- /dev/null +++ b/files/de/web/svg/tutorial/svg_schriftarten/index.html @@ -0,0 +1,99 @@ +--- +title: SVG-Schriftarten +slug: Web/SVG/Tutorial/SVG_Schriftarten +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.</p> + +<p><strong>SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. </strong></p> + +<p> + </p><div class="note">Im Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">wurde eine Implementierung nicht berücksichtigt</a>, in <a href="https://www.chromestatus.com/feature/5930075908210688">Chrome 38 wurde sie entfernt</a> (auch in Opera 25) und Firefox hat es auf <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">unbestimmte Zeit verschoben</a>, um sich auf <a href="/en/WOFF" title="en/About WOFF">WOFF</a> konzentrieren zu können. Andere Tools jedoch wie <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.</div> +<p></p> + +<p>Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.</p> + +<h2 id="Eine_Schriftart_definieren">Eine Schriftart definieren</h2> + +<p>Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">aus der Spezifikation</a> und an ihm werden die Details erklärt.</p> + +<pre><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph> + <glyph unicode="@"><!-- Umrisslinie von @ --></glyph> + <!-- weitere Zeichen --> +</font> +</pre> + +<p>Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut <code>id</code>, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut <code>horiz-adv-x</code> legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert <code>1000</code> legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.</p> + +<p>Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut <code>font-family</code>, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels <code>font-family</code> den Zugriff auf die Schriftart. Die Attribute <code>font-weight</code> und <code>font-style</code> erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.</p> + +<p>Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem <code>src</code>-Descriptor bei <code>@font-face</code> in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.</p> + +<p>Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. </p> + +<p>Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut <code>d</code> hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim <code>path</code>-Tag geschieht.</p> + +<p>Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist <code>unicode</code>. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei <code>xml:lang</code>). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.</p> + +<p>Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in <code>font</code> eingesetzt werden. Beide benötigen die Attribute <code>u1</code> und <code>u2</code> und das Attribut <code>k</code>, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="Auf_eine_Schriftart_zugreifen">Auf eine Schriftart zugreifen</h2> + +<p>Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut <code>font-family</code> auf sie zugegriffen werden:</p> + +<pre><font> + <font-face font-family="Super Sans" /> + <!-- und so weiter --> +</font> + +<text font-family="Super Sans">Mein Text benutzt Super Sans</text> +</pre> + +<p>Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.</p> + +<h3 id="Option_CSS_font-face_benutzen">Option: CSS @font-face benutzen</h3> + +<p><code>@font-face</code> kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:</p> + +<pre><font id="Super_Sans"> + <!-- und so weiter --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">Mein Text benutzt Super Sans</text></pre> + +<h3 id="Option_Zugriff_auf_eine_externe_Schriftart">Option: Zugriff auf eine externe Schriftart</h3> + +<p>Das oben erwähnte <code>font-face-uri</code>-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:</p> + +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/de/web/svg/tutorial/tools_for_svg/index.html b/files/de/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..2fd2402d4b --- /dev/null +++ b/files/de/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,70 @@ +--- +title: Tools for SVG +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Nachdem nun die Grundlagen von SVG bekannt sind, soll ein Blick auf einige Tools geworfen werden, um mit SVG-Dateien zu arbeiten.</p> + +<h3 id="Browser_support">Browser support</h3> + +<p>Ab Internet Explorer 9 unterstützen alle großen Browser SVG: IE 9, Mozilla Firefox, Safari, Google Chrome und Opera. Mobile Geräte mit auf Webkit basierenden Browsern unterstützen auch SVG. Auf älteren oder kleineren Geräten besteht die Möglichkeit, dass SVG Tiny unterstützt wird.</p> + +<h2 id="Inkscape">Inkscape</h2> + +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> + +<p>One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it's open source.</p> + +<p>Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.</p> + +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> + +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> + +<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p> + +<h2 id="Apache_Batik">Apache Batik</h2> + +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> + +<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p> + +<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p> + +<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p> + +<h3 id="Other_renderers">Other renderers</h3> + +<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p> + +<h2 id="Raphael_JS">Raphael JS</h2> + +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> + +<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p> + +<h2 id="Snap.svg">Snap.svg</h2> + +<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p> + +<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p> + +<h2 id="Google_Docs">Google Docs</h2> + +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> + +<p>Zeichnungen können als SVG aus Google Docs exportiert werden.</p> + +<h2 id="Wissenschaft">Wissenschaft</h2> + +<p>Beide gut bekannten Plotting-Werkzeug xfig und gnuplot unterstützen den Export als SVG. Um Graphen online-Hilfe zu rendern, nutze man <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>, es unterstützt VML, SVG und canvas und entscheidet anhand des Browsers automatisch, welche Technologie dabei genutzt wird.</p> + +<p>In GIS-Anwendungen (Geographic Information System) wird SVG oft benutzt, um Daten sowohl zu speichern als auch fürs spätere Rendern. Für Näheres siehe <a class="external" href="http://carto.net">carto.net</a>.</p> + +<h2 id="Weitere_Tools!">Weitere Tools!</h2> + +<p>Beim W3C findet sich eine <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">Liste von Programmen</a>, die SVG unterstützen.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> |