VRML (Virtual Reality Modeling Language)
VRML (Virtual Reality Modeling Language) ist eine HTML-Erweiterung, die es ermöglicht, 3D-Szenen mit einem geeigneten Browser oder einem entsprechenden PlugIn oder Viewer darzustellen. VRML ist eine Skriptsprache, die hauptsächlich Objekte durch sogenannte Knoten erzeugt. Außerdem können Materialeigenschaften, Standpunkte und Lichtquellen definiert werden.
3D-Szenen werden online erzeugt. Daher wird eine schnelle Performance benötigt.

Anmerkung: Aktuell wäre nach wie vor die Version VRML2. VRML wurde jedoch nicht mehr weiterentwickelt
Beispiel:
# VRML V2.0
Shape {
geometry Box {
size 2 3 4
}
Diese VRML-Anweisung erzeugt einen Quader mit den Kantenlängen 2, 3 und 4.

X3D (Extensible 3D)
X3D (Extensible 3D) ist eine HTML-Erweiterung um 3D-Modelle in einem Webbrowser mit einem geeigneten Plugin bzw. Player anzeigen zu können. X3D-Dateien sind im XML-Format geschrieben, basieren auf einem ISO-Standard und sind eine Weiterentwicklung von VRML.

Ausgehend von Definitionen für eine 3D-Szene werden in einem dreidimensionalen Raum Objekte mit bestimmten Eigenschaften, Lichtquellen und eine Kameras mit Standort und Blickwinkel definiert. Mit Hilfe des verwendeten Players bzw. Plugin des Browsers kann sich der Betrachter im 3D-Raum bewegen (zB Zoomen, Ansicht verändern...)

Beispiel:
<?xml version="1.0" encoding="UTF-8"?>>
<X3D profile='Immersive'>
<Scene>
<Viewpoint position="6 4 5" orientation='1 0 0 -0.5'/>
<Transform translation='4 1 0'>
<Shape>
<Box size='2 2 2'/>
<Appearance>
<Material diffuseColor="1 0 0"/>
</Appearance>
</Shape>
</Transform>
</Scene>
</X3D>

Diese X3D-Datei (Dateiendung: .x3d) erzeugt einen verschobenen Würfel mit einer Seitenlänge von 2 Einheiten und der Materialfarbe "Rot". Zu Beginn werden für eine Kamera Standpunkt und Blickrichtung für die Ansicht des 3D-Objekts festgelegt.

SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics) ist eine HTML-Erweiterung zur Darstellung von zweidimensionalen Vektorgrafiken in Webbrowsern. SVG-Dateien sind im XML-Format geschrieben und können von den meisten neuen Webbrowsern ohne zusätzliches Plug-In angezeigt werden.

Das Koordinatensystem hat seinen Ursprung in der linken oberen Ecke des Zeichenbereichs.
Verwendet werden drei Typen von Elementen:
Vkektorgrafiken: Rechteck, Ellipse und Kreis, Polygon und Pfad
Pixelgrafiken: JPG-, PNG- und BMP-Datein, die innerhalb desKoordinatenssystems verlinkt werden
Text
Die Elemente können verschoben, gruppiert, mit Hilfe von CSS gestaltet und animiert werden.

Beispiel:
<?xml version="1.0" encoding="windows-1250"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<rect x="50" y="40" fill="#FBB03B" stroke="#0000ff" width="200" height="120"/>
</svg>

-> Text + Kreis + Pfad: österreichische Städte

Rechteck - <rect... />
Mit dem Tag <rect... /> wird in SVG ein Rechteck gezeichnet. Es sind mindestens die horizontale Länge bzw. [1] Breite (zB width="200") und die [2] Höhe (zB height="100") anzugeben. In diesem Fall wird ein Rechteck gezeichnet, das mit der linken oberen Ecke im [3] SVG-Koordinatenursprung beginnt und die angegebene Breite und Höhe erhält. Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet (siehe Beispiel 1). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet.

Soll das Rechteck nicht beim Koordinatenursprung beginnen sind für den [5] linken oberen Eckpunkt des Rechtecks die x-Koordinate (zB x="20") und die y-Koordinate (zB y="105.13345") anzugeben.
Durch Angabe der [6] Rechteckfüllfarbe (zB fill="#64fd6f") in hexadezimaler Schreibweise erhält das Rechteck die angegebene Farbe (siehe Beispiel 2).

Beispiel 1:
<svg width="400" height="400" fill="#feef89">
<rect width="200" height="100" />
</svg>
Diese SVG-Datei im XML-Format erzeugt in einer Ansichtsebene mit 400x400 Pixel und gelber Füllfarbe ein gelbes 200 Pixel breites und 100 Pixel hohes Rechteck, dessen linke obere Ecke im Koordinatenursprung liegt.

Beispiel 2:
<svg width="400" height="400">
<rect x="20" y="122.13345" fill="#64fd6f" width="190" height="75.35" />
</svg>
Diese SVG-Datei zeichnet in einer Ansichtsebene ein hellgrünes 190 Pixel breites und 75,35 Pixel hohes Rechteck, dessen linke obere Ecke vom Koordinatenursprung horizontal 20 Pixel und vertikal 122,13345 Pixel entfernt ist.

Linie - <line... />
Mit dem Tag <line... /> wird in SVG eine Linie gezeichnet. Es ist mindestens einer der [1] Endpunkte (zB x2="300" Y2="100") der Linie anzugeben. Für den anderen Endpunkt der Linie wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet (zB Vorgabe x1="0" Y1="0"). Außerdem muß die [3] Linienfarbe eingetragen werden (zB stroke="#9000ff") . Ist keine Linienbreite angegeben, wird die kleinste Linienbreite (Vorgabe stroke-width="1") angenommen. (siehe Beispiel 1).
Normalerweise werden beide Endpunkte der Linie (zB [4] x1="0" Y1="80" [5] x2="290" Y2="80") und für breitere Linien außer der Linienfarbe (zB stroke="#fd40dc") auch die [6] Linienbreite (zB stroke-width="3") angegeben (siehe Beispiel 2).
Liegt ein Linienendpunkt [7] außerhalb der SVG-Ansichtsfläche (zB x2="355" Y2="-100") wird die Linie an der Grenze der SVG-Ansichtsfläche abgeschnitten (siehe Beispiel 3).

Beispiele:
<svg width="400" height="400">
<line x2="300" y2="100" stroke="#9000ff" />
<!-- Beispiel 1: Minimale Angaben für lila 1 Pixel breite Linie vom Koordinatenursprung nach rechts unten -->
<line x1="0" y1="80" x2="290" y2="80" stroke="#fd40dc" stroke-width="3"/>
<!-- Beispiel 2: Pinkfarbige horizontale 3 Pixel breite Linie von links nach rechts -->
<line x1="50" y1="200" x2="355" y2="-100" stroke="blue" stroke-width="6" />
<!-- Beispiel 3: Blaue 6 Pixel breite Linie von links unten nach rechts oben, außerhalb des SVG-Ansichtsfenstes unsichtbar-->
</svg>

Kreis - <circle... />
Mit dem Tag <circle... /> wird in SVG ein Kreis gezeichnet. Es ist mindestens der [1] Radius (zB r="100") des Kreises anzugeben. Für den Mittelpunkt des Kreises wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [3] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich des Kreises außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel des Kreises zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt des Kreises
(zB [4] cx="140" cy="110"), der [5] Radius (zB r="66.66") und die [6] Füllfarbe des Kreises (zB fill="#fd40dc") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="250" height="200" fill="#21ff8f">
<circle r="100"/>
<!-- Beispiel 1: Minimale Angaben für einen Kreis mit dem Radius 100, dessen nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<circle cx="160" cy="110" r="77.77" fill="#f9b256"/>
<!-- Beispiel 2: Oranger Kreis mit dem Mittelpunkt auf den Koordinaten x=160 und y=110 und dem Radius 77,77 -->
</svg>

Ellipse - <ellipse... />
Mit dem Tag <ellipse... /> wird in SVG eine Ellipse gezeichnet. Es ist mindestens der [1] horizontale Radius (zB rx="80") und der [2] vertikale Radius (zB ry="160") der Ellipse anzugeben. Für den Mittelpunkt der Ellipse wird der [3] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich der Ellipse außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel der Ellipse zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt der Ellipse
(zB [5] cx="200" cy="90"), der [6] horizontale Radius (zB rx="99.999"), der [7] vertikale Radius (zB ry="55.55") und die [8] Füllfarbe der Ellipse (zB fill="yellow") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="330" height="180" fill="#fe799e">
<ellipse rx="80" ry="160"/>
<!-- Beispiel 1: Minimale Angaben für eine Ellipse mit den beiden Radien 80 und 160, deren nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<ellipse cx="200" cy="90" rx="99.999" ry="55.55" fill="yellow"/>
<!-- Beispiel 2: Gelbe Ellipse mit dem Mittelpunkt auf den Koordinaten x=200 und y=90 und den beiden Radien 99,999 und 55,55-->
</svg>

Polylinie - <polyline... />
Mit dem Tag <polyline... /> wird in SVG eine Polylinie (Linienzug) gezeichnet. Es sind mindestens[1] [2] zwei Punkte (zB points=20,50 190,20"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Mit diesen Angaben wird eine [3] Polylinie mit 1 Liniensegment und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[4] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 5 Liniensegmente) einer Polylinie angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polylinien auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[5] Vorgabemäßig wird die Farbe der Fläche, die der Polylinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe fill="green" bestimmt . Ist die Polylinie nicht geschlossen, begrenzt eine Verbindungsline zwischen Anfangs- und Endpunkte der Polylinie die Fläche (siehe Beispiel 3).
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="300" fill="#ffd200">
[3]<polyline points="20,50 190,20" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für eine blaue, 1 Pixel breite Polylinie mit zwei Punkten eines einzigen Liniensegments -->
[4]<polyline points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#5a00ff" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Eine 8 Pixel breite, violette Polylinie mit 6 Punkten und 5 Liniensegmenten, ohne Füllung -->
[5]<polyline points="10,120 98,144 183,232 40,288" stroke="black" stroke-width="15"/>
<!-- Beispiel 3: Eine 16 Pixel breite, schwarze Polylinie mit 4 Punkten und 3 Liniensegmenten sowie der Füllfarbe des SVG-Ansichtsfensters -->
</svg>

Polygon - <polygon... />
Mit dem Tag <polygon... /> wird in SVG ein Polygon (geschlossener Linienzug) gezeichnet. Es sind mindestens[1] [2] [3] drei Punkte (zB points=20,50 190,20 0,0"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Anfangs- und Endpunkt werden durch eine gerade Linie verbunden. Mit diesen Angaben wird ein [4] Polygon mit 3 Liniensegmenten (Dreieck), der Farbe der SVG-Ansichtsfläche und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[5] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 6 Liniensegmente) eines Polygons angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polygone auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[6] Vorgabemäßig wird die Farbe der Fläche, die der Polygonlinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe (zB fill="yellow") bestimmt. (siehe Beispiel 3).
siehe auch -> Polylinie - <polyline... />

Beispiele:<svg width="300" height="300" fill="#91f581">
[4]<polygon points="20,50 190,20 0,0" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für ein blaues, 1 Pixel breites Polygon mit drei Punkten; Ergebnis: Dreieck mit Füllungsfarbe der SVG-Ansichtsfläche -->
[5]<polygon points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#fa19c3" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Ein 8 Pixel breites, pinkes Polylgon mit 6 Punkten und 6 Liniensegmenten, ohne Füllung -->
[6]<polygon points="10,120 98,144 183,232 40,288" stroke="blue" stroke-width="15" fill="yellow" />
<!-- Beispiel 3: Ein 15 Pixel breites, blaues Polygon mit 4 Punkten und 5 Liniensegmenten sowie der Füllfarbe gelb -->
</svg>

Pfad - <path... />, Übersicht
Mit dem Tag <path... /> wird in SVG ein Pfad (path) erstellt. Damit können Linien, Polygonzüge, Kurven, aber auch komplexe Formen gezeichnet werden. Alle Anweisungen für Pfade beginnen mit <path d="..." .../>. Buchstaben innerhalb des Tags bestimmen, welche Art von Pfad gezeichnet wird. (zB mit dem Buchstaben L werden Linien oder Polygonzüge gezeichnet). Dabei werden bei Großbuchstaben absolute Koordinaten (zB Q20 100) und bei Kleinbuchstaben relative Koordinaten (zB q20 100) verwendet.

Übersicht über grundsätzliche Möglichkeiten zum Zeichnen von Pfaden:
[1] Beginn: Punkt, bei dem der Pfad beginnen soll - M (Move to)
[2] Linienzug offen: Linie oder zusammenhängende Linien - L (LineTo)
[3] Linienzug geschlossen: Linie oder zusammenhängende Linien, wobei der letzte Punkt mit dem ersten verbunden wird - Z (ClosePath)
[4] Linie horizontal: horizontale Linie vom aktuellen Punkt bis zum Endpunkt - H (Horizontal LineTo)
[5] Linie vertikal: vertikale Linie vom aktuellen Punkt bis zum Endpunkt - V (Vertical LineTo)
[6] Bézier-Kurven: verschiedene Bézierkurven - Kubische Bézierkurven (Standard-Bézierkurven): C (CurveTo), S (Shorthand/Smooth CurveTo) - quadratische Bézierkurven: Q (Quadratic Bézier CurveTo), T (Shorthand/Smooth Quadratic Bézier CurveTo)
[7] Ellipsenbogen: Ausschnitte von Ellipsen in verschiedenen Varianten - A (Elliptical Arc)

Pfad - <path... />, Linienzug offen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als offener Linienzug gezeichnet werden. Der Tag dafür beginnt mit <path d="... ..." />
Anzugeben ist in absoluten oder relativen Koordinaten:
[1] M oder m: Startpunkt des Pfades bzw. Linienzuges (zB "M10 10 )
[2] L oder l: Weitere Punkte des Pfades bzw. Linienzuges (zB "L110 50 )
[3] Farbe des Pfades (zB stroke="blue")
[4] Breite des Pfades (zB stroke-width="5")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polylinie - <polyline... />

Beispiele: <svg width="300" height="400">
[6] <path d="M10 10 L110 50 L180 10 L250 70" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als offener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung -->
[7] <path d="m0 50 l80 50 l90 -40 l110 60" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als offener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün -->
</svg>

Pfad - <path... />, Linienzug geschlossen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als geschlossener Linienzug gezeichnet werden. Der Unterschied zum offenen Linienzug besteht nur darin, dass nach den Koordinaten für die Punkte der Buchstabe Z eingegeben werden muss: <path d="... ...Z" />
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="400">
[8] <path d="M10 10 L110 50 L180 10 L250 70 Z" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als geschlossener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung, letzter Punkt wird mit Startpunkt verbunden -->
[9] <path d="m0 50 l80 50 l90 -40 l110 60 z" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als geschlossener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün, letzter Punkt wird mit Startpunkt verbunden -->
</svg>

Pfad - <path... />, Linie horizontal, Linie vertikal
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. mit einfachen Angaben eine horizontale oder vertikale Linie gezeichnet werden. Außer dem Startpunkt muß bei der horizontalen .Linie nur die X-Kordinate des Endpunktes und bei der vertikalen Linie die Y-Koordinate des Endpunktes eingegeben werden. Die Endpunkte können in relativen oder absoluten Koordinaten angegeben werden. Der Koordinaten des Startpunkts M oder m werden immer als absolute Koordinaten interpretiert. Außerdem sind noch die Farbe der Linie und die Linienbreite anzugeben.

[1] horizontale Linie: <path d="Mx1 y1 Hx2" ... />
Es wird eine horizontale Linie vom [2] Startpunkt M bis zum [3] Endpunkt H oder h gzeichnet.

[4] vertikale Linie: <path d="Mx1 y1 Vy2" ... />
Es wird eine vertikale Linie vom Startpunkt M bis zum Endpunkt V oder v gzeichnet
Anzugeben ist in absoluten oder relativen Koordinaten:
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Linie - <line... />

Beispiele: <svg width="1000" height="1000" fill="black">
<path d="M0 100 H200" stroke="blue" stroke-width="2"/>
<!-- Beispiel 1: 2 Pixel breite, blaue, horizontale Linie wird vom Startpunkt M zum Endpunkt H gezeichnet, absolute X-Koordinate = 200 -->
<path d="M100 0 V200" stroke="#f336ff" stroke-width="5"/>
<!-- Beispiel 2: 5 Pixel breite, pinke, vertikale Linie wird vom Startpunkt M zum Endpunkt V gezeichnet, absolute Y-Koordinate = 200 -->
<path d="m20 80 h200" stroke="#ffac36" stroke-width="5"/>
<!-- Beispiel 3: 5 Pixel breite, orange, horizontale Linie wird vom Startpunkt M zum Endpunkt h gezeichnet, relative X-Koordinate = 200 | absolute X-Koordinate = 220 -->
<path d="m120 20 v200" stroke="green" stroke-width="10"/>
<!-- Beispiel 4: 10 Pixel breite, grüne, vertikale Linie wird vom Startpunkt M zum Endpunkt v gezeichnet, relative Y-Koordinate = 200 | absolute Y-Koordinate = 220 -->
<!-- Die neue gezeichneten Linien liegen über der den vorher gezeichneten Linien -->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: Q (Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Quadratische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Quadratische Bézierkurve (zB "M10 10 )
[1B] [1C] Q (absolute Koordinaten) oder q (relative Koordinaten) mit Angabe von zwei Punkten: [1B] 1. Punkt = Kontrollpunkt für die Quadratische Bézierkurve und Punkte der [1D] Tangente vom Startpunkt und der [1E] Tangente vom Endpunkt der Quadratische Bézierkurve; [1C] 2. Punkt = Endpunkt der Quadratischen Bézierkurve; [1F] Verbindungslinie durch die Halbierungspunkte der beiden Tangenten ergibt Tangente durch Scheitel der Quadratischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele: <svg width="330" height="350">
[1] <path d="M10 10 Q 120 200 310 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt [1A] M zum [1C] Endpunkt gezeichnet; absolute Koordinaten nach Q definieren [1B] Kontrollpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 q 50 -110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom Startpunkt [2A] M zum [2C] Endpunkt gezeichnet; relative Koordinaten nach q definieren [2B] Kontrollpunkt für die Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Kubische Bézierkurve: C (CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Kubische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Kubischen Bézierkurve (zB "M10 10 )
[1B] [1C] [1D] C (absolute Koordinaten) oder c (relative Koordinaten) mit Angabe von drei Punkten: [1B] 1. Punkt und [1C] 2. Punkt = zwei Kontrollpunkte für die Kubische Bézierkurve und Punkt der [1E] Tangente vom Startpunkt und der [1F] Tangente vom Endpunkt der Kubischen Bézierkurve; [1D] 3. Punkt = Endpunkt der Kubischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="330" height="350">
<path d="M10 10 C 120 200 210 10 310 50" stroke="magenta" stroke-width="4" fill="none"/>
[1]<!-- Beispiel 1: 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt [1A] M zum [1D] Endpunkt gezeichnet; Koordinaten nach C definieren zwei [1B] [1C] Kontrollpunkte und den [1D] Endpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 c 50 -110 160 110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt [2A] M zum [2D] Endpunkt gezeichnet; Koordinaten nach c definieren relative Koordinaten der zwei [2B] [2C] Kontrollpunkte für und den [2D] Endpunkt für die Kurve, [5] Füllung: gelb-->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: S (Shorthand / Smooth Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [8] Quadratische Bézierkurve: kann mit dem Pfad-Kommando [9] T (Shorthand / Smooth Quadratic Bézier CurveTo) weitergeführt werden. Dabei wird als Kontrollpunkt der letzte gespiegelte [9A] Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Qx2 y2 x3 y3 Tx4 y4" />

Ergänzend zur Quadratischen Bézierkurve sind für die weiterführende quadratische Bézierkurve mindestens ein Punkt anzugeben:
[9B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von einem Punkte nach S (oder s) = [9B] Endpunkt der weiterführenden Quadratischen Bézierkurve; neuer [9A] Kontrollpunkt ist der gespiegelte vorherige Kontrollpunkt, der auch ein Punkt der [9C] Tangente zum Endpunkt der weiterführenden Quadratischen Bézierkurve ist; weitere Punkte für die Quadratische Bezierkurve können hinzgefügt werden
; siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="430" height="480">
[9]<path d="M10 100 Q80 180 200 100 T400 100" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [8] 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach T definieren einen neuen [9B] Endpunkt für die [9] weiterführende Kurve, [9A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, keine Füllung-->

[11] <path d="M10 300 q100 -60 160 200 40 t200 -40" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [10] 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom StartpunktM zum Endpunkt gezeichnet; relative Koordinaten nach t definieren einen neuen [11B] Endpunkt für die für die [11] weiterführende Kurve, [11A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Kubische Bézierkurve: S (Shorthand / Smooth CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [1] Kubische Bézierkurve: kann mit dem Pfad-Kommando [6] S (Shorthand / Smooth CurveTo) weitergeführt werden. Dabei wird als erster Kontrollpunkt der letzte gespiegelte Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Cx2 y2 x3 y3 x4 y4 Sx5 y5 x6 y6" />

Ergänzend zur Kubischen Bézierkurve sind für die weiterführende kubische Bézierkurve mindestens zwei Punkte anzugeben:
[6A] [6B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von zwei Punkten: [6A] 1. Punkt nach S (oder s) = weiterer Kontrollpunkt für die weiterführende kubische Bézierkurve, der gleichzeitig ein Punkt der [6C] Tangente zum [6B] Endpunkt der weiterführenden kubischen Bézierkurve ist; erster Kontrollpunkt ist der letzte [6D] gespiegelte Kontrollpunkt der [1] vorherigen Kurve; weitere Kontrollpunkte und Punkte der weiterführenden kubischen Bézierkurve können hinzugefügt werden;
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="470" height="420">
[6] <path d="M10 10 C120 200 210 10 310 50 S329 10 450 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach S definieren einen weiteren [6A] Kontrollpunkt und den [6B] Endpunkt für die [6] weiterführende Kurve, keine Füllung-->

[7] <path d="M10 300 c50 -110 160 110 300 30 s303 30 150 60" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [2] 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; relative Koordinaten nach s definieren einen weiteren Kontrollpunkt [7A] und den neuen [7B] Endpunkt für die [7] weiterführende Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Ellipsenbogen: A (Elliptical Arc)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. [1] Ellipsenbogen gezeichnet werden. Anzugeben sind für die Ellipse die beiden Radien, die Rotation der X-Achse, welcher Teil und in welche Richtung gezeichnet werden soll, sowie Anfang und Endpunkt der Ellipse.
<path d="Mx1 y1 Arx ry alpha larg-arc-flag sweep-flag x4 y4" />

Im Einzelnen sind folgende Parameter anzugeben:
[2] M oder m: Startpunkt der Ellipse
[3] nach A oder a - Parameter des Ellipsenbogens:
 [3A] rx: Radius der Ellipse auf der X-Achse (zB 120)
 [3B] ry: Radius der Ellipse auf der Y-Achse (zB 80)
 [3C]  [7C] alpha: Rotation der X-Achse der Ellipse: [3C] 0 = keine Rotation;  [7C] Rotation in Grad (zB 90)
 [3D] larg-arc-flag: 0 = kleiner Teil der Ellipse, 1 = großer Teil der Ellipse
 [3E] sweep-flag: 0 = Bogen wird entgegen dem Uhrzeugersinn gezeichnet, 1 = Bogen wird im Uhrzeugersinn gezeichnet
 [3F] x₄ y₄: Absolute bzw. relative Koordinaten des Endpunkts des Ellipsenbogens
[4] Die strichlierten Bögen wären die Ergänzungsbögen zur vollständigen Ellipse
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="400" height="380">
[1]<path d="M80 186 A120 100 0 1 1 260 186" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breiter, magenta Ellipsenbogen wird vom Startpunkt [2] M zum [3F] Endpunkt gezeichnet; [3A] Radius der X-Achse = 120; [3B] Radius der XY-Achse = 100;  [3C] 0 = keine Rotation; [3D] 1 = großer Teil der Ellipse; [3E] 1 = gezeichnet im Uhrzeigersainn, keine Füllung -->
[5] <path d="M100 350 A100 80 90 0 0 260 350" stroke="#00ddb6" stroke-width="6" fill="none"/>
<!-- Beispiel 2: [5] 6 Pixel breiter, blaugrüne Ellipsenbogen wird vom Startpunkt [6] M zum [7F] Endpunkt gezeichnet; [7A] Radius der X-Achse = 100; [7B] Radius der Y-Achse = 80; [7C] 90 = Rotation der X-Achse des Bogens um 90 Grad; [7D] 0 = kleiner Teil der Ellipse (hier die Hälfte); [7E] 0 = gezeichnet entgegen dem Uhrzeigersainn, [8] Füllung: gelb -->
</svg>

Text - <text>...</ text>: Grundlagen
Mit dem Tag Text (text) <text>...</ text> kann in SVG [1] Text gezeichnet werden. Anzugeben ist zumindest der Startpunkt des Textes und der Textinhalt.
<text x="x1" y="y1">Textinhalt</text>
Der Startpunkt wird durch die X-Koordinate und die Y-Koordinate festgelegt.

Beispiele:<svg width="400" height="500">
[1]<text x="10" y="20">Text</text>
<!-- Beispiel 1: Minimale Angaben für einen Text mit Standardbeschriftung und Standardfarbe-->
[2] <text x="10" y="40" fill="green"> Text: grün</text>
<!-- Beispiel 2: Text mit grüner Füllung -->
[3] <text x="10" y="70" fill="blue" font-size="24px">Text: blau, 24 Pixel</text>
<!-- Beispiel 3: Text mit blauer Füllung, 24 Pixel groß-->
[4] <text x="10" y="100" fill="none" font-size="24px" stroke="#000000">Text: ohne Füllung, nur Umriss</text>
<!-- Beispiel 4: Text ohne Füllung, 24 Pixel groß, mit Umriss in Standardbreite und Standardfarbe-->
[5] <text x="10" y="150" fill="yellow" font-size="44px" stroke="red" stroke-width="2">Text: Umriss 2 Pixel</text>
<!-- Beispiel 5: Text mit gelber Füllung, 44 Pixel groß, mit 2 Pixel breitem roten Umriss--> </svg>

Text: Vertikaler Text
Mit bestimmten Attributen des Tags Text (text) <text>...</ text> kann in SVG [1] Text vertikal ausgegeben werden.
[1] Die vertikale Ausrichtung des Textes wird durch das Attribut writing-mode bestimmt:
[1A] writing-mode="tb" oder [1B] style="writing-mode: tb;" Einige Browser akzeptieren die Anweisung nur in Verbindung mit Attribut style.
[2] Zusätzlich kann auch die Ausrichtung (Orientierung) der Zeichen bestimmt werden:
glyph-orientation-vertical:="deg" oder style="lyph-orientation-vertical: deg;"
Für deg werden ganze Zahlen in Grad für die Orientierung der Zeichen erwartet:
[2A] glyph-orientation-vertical:="0" Die Zeichen sind horizontal ausgerichtet
[2B] glyph-orientation-vertical:="180" Die Zeichen sind horizontal ausgerichtet und stehen auf dem Kopf
[2C] glyph-orientation-vertical:="270" Die Zeichen sind vertikal und spiegelverkehrt ausgerichtet.
Das Attribut glyph-orientation-vertical ist nur in Verbindung mit dem Attribut writing-mode sinnvoll. Manche Browser ignorieren es vollkommen.
Siehe auch -> Text: Grundlagen!

Beispiele:
<svg width="300" height="400">
[3]<text x="20" y="20" font-size="24px" writing-mode="tb">Text vertikal</text>
<!-- Beispiel 3: Vertikale Textausrichtung Standard-->
[4] <text x="50" y="20" font-size="24px" style="writing-mode: tb;">Text vertikal</text>
<!-- Beispiel 4: Vertikale Textausrichtung Standard, in Verbindung mit Attribut style -->
[5] <text x="80" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="0">Text vertikal</text>
<!-- Beispiel 5: Vertikale Textausrichtung, Zeichenorientierung waagrecht -->
[6] <text x="110" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 0;">Text vertikal</text>
<!-- Beispiel 6: Vertikale Textausrichtung, Zeichenorientierung waagrecht , in Verbindung mit Attribut style -->
[7] <text x="140" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="180">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf -->
[8] <text x="170" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 180;">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf, in Verbindung mit Attribut style -->
[9] <text x="200" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="270">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt -->
[10] <text x="230" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 270;">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt, in Verbindung mit Attribut style --> </svg>