SVG/ Zeichnen mit SVG

Aus Wikibooks

[Bearbeiten] Einführung

Das Konzept von SVG besteht darin, für die Repräsentation von Inhalt zum einen Grundformen anzubieten, die häufig verwendet werden. Es kann auch Text graphisch repräsentiert werden, der aber weiterhin als Text lesbar im Quelltext des Dokumentes steht. Für allgemeine graphische Formen steht zum anderen ein allgemeines Element zur Verfügung, um beliebige Formen anzunähern.

Zumeist wird es sinnvoll sein, den graphischen Formen auch noch weitere Eigenschaften zuweisen zu wollen, etwa Farbe oder Eigenschaften des Randes. Dazu werden bevorzugt spezielle Attribute notiert, die nicht spezifisch für bestimmte Elemente sind, die als sogenannte Präsentationsattribute bei nahezu allen Elementen notiert werden können. Diese werden in einem anderen Abschnitt behandelt und hier nur verwendet, sofern für die Darstellung hilfreich oder notwendig.

[Bearbeiten] Grundformen

[Bearbeiten] Linien

SVG
1.1	1.5	8	4	2	3.2	1.7

Linien mit SVG

Linien -genauer gesagt Strecken- werden in SVG durch das Element line beschrieben. Eine Linie wird hierbei durch den Startpunkt mit den Attributen x1 und y1 und den Endpunkt mit den Attributen x2 und y2 spezifiziert. Nicht angegebene Attribute x1, y1, x2, y2 werden als 0 angenommen.

Die Attribute sind animierbar.

Das Beispiel zeigt zwei sich überkreuzende Linien. Da Linien an sich keine flächige Ausdehnung haben, sind sie nur als Rand sichtbar und das auch nur, wenn man wie hier das zugehörige Präsentationsattribut stroke explizit angibt, hier mit dem Farbwert 'black', also schwarz.

Nun könnte man vermuten, daß Linien alleine nicht besonders viel hergeben, schön dekoriert kann man aber bereits alleine mit ihnen reizvolle abstrakte Bilder erstellen: Linienscharen mit einer kubischen Bézierkurve als Scharfunktion.

LineElement W3C Referenz

[Bearbeiten] Rechtecke

SVG
1.1	1.5	8	4	2	3.2	1.7

Einfaches Rechteck

Ein einfaches Rechteck wird mit dem Element rect angegeben. Die Position der linken oberen Ecke wird mit den Attributen x und y festgelegt. Breite und Höhe werden mit den Attributen width und height angegeben. Diese wenigen Angaben reichen bereits aus, um ein Rechteck darzustellen. Für eine willkürliche Ausrichtung ist dann allerdings das allgemein verfügbare Attribut transform zu verwenden, damit kann das Rechteck dann in die gewünschte Ausrichtung gedreht werden. Nicht angegebene x oder y entsprechen 0, nicht angegebene oder negative width oder height sind in SVG 1.1 ein Fehler, in SVG tiny 1.2 unterbindet dies die Darstellung, ebenso wie der Wert 0 in beiden Profilen. Die Attribute sind animierbar.

Ohne weitere Angaben ist solch eine Grundform schwarz gefüllt. Dies kann durch die Angabe von Präsentationsattributen geändert werden.

Ein Rechteck kann auch abgerundete Ecken haben. Abgerundete Ecken werden durch die Angabe der Attribute rx und ry erreicht.Dabei legt rx den Radius der Rundung in x-Richtung fest und ry in Richtung der y-Achse (genauer handelt es sich da um die Angaben zur Hälfte der Hauptachsen der Ellipsenbögen).

Wird nur eines der Attribute rx und ry angegeben, wird das andere mit dem gleichen Wert angenommen. Überschreitet der Wert für den Radius den jeweiligen Wert für die halbe Höhe beziehungsweise Breite, so wird der Wert auf die halbe Höhe, beziehungsweise Breite reduziert.

In welcher Reihenfolge Korrektur und Übernahme des Wertes von rx und ry erfolgen, wird in folgendem Beispiel getestet. Wird etwas Rotes sichtbar, liegt beim verwendeten Darstellungsprogramm jedenfalls ein Implementierungsfehler vor: Beispiel-SVG zur Verwendung des Elementes rect. Genauere Angaben sind den Beschreibungen im Dokument zu entnehmen.

Die Attribute x, y, rx, ry, width und height sind animierbar.

RectElement W3C Referenz

[Bearbeiten] Kreise

SVG
1.1	1.5	8	4	2	3.2	1.7

Einfacher Kreis

Ein Kreis wird in SVG durch das Element circle repräsentiert. Hierzu müssen wir die horizontale Position des Kreismittelpunktes mit dem Attribut cx und die vertikale Position des Kreismittelpunktes mit dem Attribut cy und den Radius des Kreises mit dem Attribut r angeben. Nicht angegebene cx oder cy werden als 0 angenommen. Wird in SVG 1.1 der Radius nicht angegeben, so ist dies ein Fehler. In SVG tiny 1.2 unterbindet dies die Anzeige des Kreises. Die Attribute sind animierbar.

Auch wenn die Kreise lediglich eine Spezialform der Elipsen sind, besitzt SVG hierfür ein eigenes Element. CircleElement W3C Reverenz

[Bearbeiten] Ellipsen

SVG
1.1	1.5	8	4	2	3.2	1.7

Einfache Ellipse

Eine Ellipse wird mit dem – wie nicht anders zu erwarten – Element ellipse beschrieben. Eine Ellipse enthält zwei Radienattribute zur Darstellung. Zum einem das für die Horizontale das Attribut rx und zum anderen das für die Vertikale ry. Auch hier legen wie beim Kreis mit den Attributen cx und cy den Mittelpunkt fest. Für eine andere Ausrichtung ist wieder das allgemeine Attribut transform zu bemühen, um die Ellipse in die entsprechende Ausrichtung zu drehen.

Nicht angegebene cx und cy werden als 0 angenommen. Nicht angegebene oder negative rx und ry sind in SVG 1.1 ein Fehler, in SVG tiny 1.2 unterbinden sie die Darstellung des Elementes, ebenso wie in beiden Profilen der Wert 0. Die Attribute sind animierbar.

EllipseElement W3C Referenz

[Bearbeiten] Linienzüge

SVG
1.1	1.5	8	4	2	3.2	1.7

Um einen Linienzug anzugeben, wird das Element polyline verwendet. Ein Linienzug besteht aus mehreren geraden Kurvenstücken, die aneinandergehängt werden. Die Form ist in der Regel offen. Für eine geschlossene Form wäre stattdessen das Element polygon zu verwenden.

Dies Element hat ein spezifisches Attribut points. Der Wert dieses Attributes ist eine Liste von Koordinaten, die mit Leerzeichen separiert sind oder jeweils mit einem Komma mit optionalem Leerzeichen davor oder dahinter. Die Koordinaten sind reelle Zahlen, wissenschaftliche Notation ist zulässig. Ferner sind immer Koordinatenpaare anzugeben, erst für die x-Richtung, dann für die y-Richtung. In SVG 1.1 ist die Angabe einer ungeraden Anzahl von Koordinaten ein Fehler. In SVG tiny 1.2 resultiert daraus, daß das Element nicht dargestellt wird, ebenso, wenn das Attribut gar keine Koordinaten enthält. Ansonsten ist die Darstellung dieselbe wie bei einem korrespondierenden Pfad.

Das Attribut points ist animierbar, jedoch nicht additiv und die Struktur des Attributwertes läßt keine sinnvolle Animation mit dem calcMode paced zu. In SVG 1.1 ist es bedingt durch die Äquivalenz zu einem Pfad notwendig, für jeden Animationswert die gleiche Anzahl von Koordinatenpaaren anzugeben. In SVG tiny 1.2 kann aufgrund der gleichen Äquivalenz bei einer diskreten Animation auch die Anzahl der Koordinatenpaare variiert werden.

Beispiel:

Beispiel-SVG zur Verwendung des Elementes polyline

[Bearbeiten] Polygone

SVG
1.1	1.5	8	4	2	3.2	1.7

Um ein Polygon oder Vieleck, also einen geschlossenen Linienzug anzugeben, wird das Element polygon verwendet. Ein Polygon besteht aus mehreren geraden Kurvenstücken, die aneinandergehängt werden. Der letzte Punkt wird mit dem ersten verbunden.

Dies Element hat ein spezifisches Attribut points. Der Wert dieses Attributes ist eine Liste von Koordinaten, die mit Leerzeichen separiert sind oder jeweils mit einem Komma mit optionalem Leerzeichen davor oder dahinter. Die Koordinaten sind reelle Zahlen, wissenschaftliche Notation ist zulässig. Ferner sind immer Koordinatenpaare anzugeben, erst für die x-Richtung, dann für die y-Richtung. In SVG 1.1 ist die Angabe einer ungeraden Anzahl von Koordinaten ein Fehler. In SVG tiny 1.2 resultiert daraus, daß das Element nicht dargestellt wird, ebenso, wenn das Attribut gar keine Koordinaten enthält. Ansonsten ist die Darstellung dieselbe wie bei einem korrespondierenden Pfad.

Das Attribut points ist animierbar, jedoch nicht additiv und die Struktur des Attributwertes läßt keine sinnvolle Animation mit dem calcMode paced zu. In SVG 1.1 ist es bedingt durch die Äquivalenz zu einem Pfad notwendig, für jeden Animationswert die gleiche Anzahl von Koordinatenpaaren anzugeben. In SVG tiny 1.2 kann aufgrund der gleichen Äquivalenz bei einer diskreten Animation auch die Anzahl der Koordinatenpaare variiert werden.

Beispiel ein Pentagramm (mit einigen Präsentationsattributen):

(die Präsentationsattribute fill-opacity und stroke-opacity sind in SVG tiny 1.1 nicht verfügbar, in SVG tiny 1.2 schon.)

Beispiel-SVG zur Verwendung des Elementes polygon

[Bearbeiten] Exkurs Polygone malen

SVG bietet einmal abgesehen vom Element rect keine weiteren Elemente zum malen spezieller, benannter Polygone. Der Autor muß sich also selbst darum kümmern, um an die Koordinaten der Ecken seines Polygons zu gelangen.

Programme wie Inkscape bieten eine graphische Oberfläche, wo man insbesondere symmetrische Polygone wie die regulären (konvexen) und sogenannte Sterne mit vorgefertigten Funktionen malen kann. Bei Inkscape wie bei zahlreichen anderen Programmen ist das Resultat dann allerdings ein allgemeiner Pfad, kein polygon-Element (was hinsichtlich der Qualität solcher Programme Fragen aufwirft, die hier aber nicht diskutiert werden müssen).

So oder so sind die Möglichkeiten solcher Programme, einem Autor zu helfen, spezielle Polygone zu malen, recht beschränkt, insofern ist es naheliegend, ein kleines eigenes Programm oder Skript zu schreiben, welches die Koordinaten berechnet und als Zeichenkette entsprechend dem Attributwert von points ausgibt. Dazu sollen im Folgenden ein paar einfache Beispiele betrachtet werden.

Reguläre (konvexe) Polygone zeichnen sich dadurch aus, daß sie gleichseitig sind und zwischen allen benachbarten Seiten der gleiche Winkel auftaucht. Zusätzlich handelt es sich um einen Linienzug, der durch die Verbindung einer Liste von Koordinatenpaaren mit den Ecken erstellt werden kann.

Die Koordinaten (x,y) der Ecken eines solchen regulären (konvexen) Polygons lassen sich wie folgt bestimmen, wobei r als der Radius vom Mittelpunkt (cx,cy) des Polygons zu einer Ecke definiert sei und n > 2 die Anzahl der Ecken angibt. Die i-te Ecke, i von 0 bis n-1 mit einem beliebigem Winkel φ der nullten Ecke zur x-Achse hat dann folgende Koordinaten:

x(i) = cx + r cos(2Π i/n + φ)
y(i) = cy + r sin(2Π i/n + φ)

Ganz allgemein ist eine Fläche konvex, wenn die Verbindungslinie zwischen zwei beliebigen Punkten der Fläche komplett in der Fläche liegt, jeweils einschließlich dem Rand.

Reguläre (konvexe) Polygone

Wird die Forderung zur Konvexität weggelassen, ergibt sich mit einem weiteren ganzzahligen Parameter 0 < m < n/2 eine allgemeinere Formel für reguläre Polygone, die echte Sternpolygone einschließt, bei diesen überschneiden sich verschiedene Ränder. Sinnvollerweise sind zudem m und n teilfremd gewählt (abgesehen vom Fall m=1, welcher die konvexen Polygone beschreibt), sonst ist das Ergebnis erneut ein reguläres Polygon, bei dem jedoch die Ecken mehrfach notiert sind.

x(i) = cx + r cos(2Π i m/n + φ)
y(i) = cy + r sin(2Π i m/n + φ)

Sternpolygone

Was gemeinhin unter dem Begriff 'Stern' bei einer graphischen Form verstanden wird, ist nicht scharf definiert. Zumeist hat dies eine niedrigere Symmetrie, etwa indem zwei Radien oder Winkel im Wechsel vorkommen. Eine Variante ist zum Beispiel, was wir in diesem Zusammenhang einmal einen Spiegelstern taufen wollen, weil er Spiegelachsen aufweist):

x(i,1) = cx + r(1) cos(2Π i m/n + φ)
y(i,1) = cy + r(1) sin(2Π i m/n + φ)
x(i,2) = cx + r(2) cos(2Π (i+0.5) m/n + φ)
y(i,2) = cy + r(2) sin(2Π (i+0.5) m/n + φ)

Dabei stehen 1 und 2 jeweils für die verschiedenen Radien. Oft wird man nur m = 1 sehen, die anderen sind aber auch erwähnenswert. Die Koordinatenpaare werden dann abwechselnd notiert, sinngemäß so:

points=" x(0,1), y(0,1) x(0,2), y(0,2) x(1,1), y(1,1), x(1,2), y(1,2) x(2,1), y(2,1), x(2,2), y(2,2) x(3,1), y(3,1), x(3,2), y(3,2) x(4,1), y(4,1), x(4,2), y(4,2) ..."

Spiegelsterne

Die Spiegelachsen dieser Sterne können vermieden werden, wenn zwei verschiedene Winkel φ angegeben werden. Es verbleibt nur noch eine diskrete Drehsymmetrie, diesen Typ taufen wir kurzerhand Drehstern:

x(i,1) = cx + r(1) cos(2Π i m/n + φ(1))
y(i,1) = cy + r(1) sin(2Π i m/n + φ(1))
x(i,2) = cx + r(2) cos(2Π i m/n + φ(2))
y(i,2) = cy + r(2) sin(2Π i m/n + φ(2))

Drehsterne

Oftmals sind auch Sterne zu sehen, die weder eine strenge Drehsymmetrie, noch Spiegelachsen aufweisen. Damit die Formel auch diese beschreiben kann, wird zum Radius einer jeden Ecke eine Zufallszahl addiert, deren Betrag sinnvollerweise kleiner ist als der durchschnittliche Radius. Ähnlich kann auch zum Winkel φ einer jeden Ecke ein kleiner Zufallswinkel hinzuaddiert werden, dessen Betrag sinnvollerweise kleiner ist als die durchschnittliche Differenz der Winkel zwischen zwei benachbarten Ecken.

x(i,1) = cx + r(i,1) cos(2Π i m/n + φ(i,1))
y(i,1) = cy + r(i,1) sin(2Π i m/n + φ(i,1))
x(i,2) = cx + r(i,2) cos(2Π i m/n + φ(i,2))
y(i,2) = cy + r(i,2) sin(2Π i m/n + φ(i,2))

Leicht lassen sich andere Modifikationen und Variationen zu den Formeln finden, um weitere interessante Polygone berechnen lassen zu können.

[Bearbeiten] Text als Graphik

Text in SVG 1.1 wird wie anderer graphischer Inhalt wiedergegeben. Die Wiedergabe hängt allerdings davon ab, welche Schriftart dafür verwendet wird. In der verwendeten Schriftart werden die Buchstaben aus dem Quelltext als Glyphen repräsentiert. Die Schriftart kann auch Ligaturen enthalten, typisch wäre etwa welche für ft, ff, fl etc. Die noch aus der Frakturzeit stammende ß-Ligatur gilt ohnehin als ein Buchstabe, nicht mehr als Ligatur. In einigen Fällen kann es auch sein, daß ein Buchstabe durch mehrere Glyphen repräsentiert wird. Daher muß die Anzahl der Buchstaben nicht mir der der darzustellenden Glyphen übereinstimmen. Die Zählung kann ferner davon abhängen, ob Leerzeichen erhalten bleiben sollen oder komprimiert werden. Bei den meisten Schriftarten ist zudem der von einem Buchstaben benötigte Platz nicht konstant, sondern vom Glyphen abhängig. Daher ist es für den Autor nicht trivial, genau vorherzusagen, wo welche Glyphe dargestellt werden wird. Auch sind nicht in jedem Darstellungsprogramm die vom Autor gewünschten Schriftarten verfügbar, so daß eine Schriftart verwendet werden kann, die lediglich ähnlich zur gewünschten ist, wenn der Autor nicht selbst mit SVG eine eigene Schriftart bereitstellt.

Jedenfalls kann der Autor bei Bedarf detailliert darauf Einfluß nehmen, wo und wie jede Glyphe dargestellt wird. Dazu haben die Textelemente einige Attribute. Für verschiedene Anwendungen stehen mehrere Textelemente zur Verfügung, die als Kindelemente des Basiselementes text auftreten können. In SVG tiny 1.1 tritt nur das Element text auf.

[Bearbeiten] text

SVG
1.1	1.5	8	4	2	3.2	1.7

Hello World

Bereits das Kapitel Start mit SVG hat sich mit der Anzeige von Texten mit SVG beschäftigt. Die einfachste Möglichkeit der Anzeige erfolgt mit dem Element text. Damit unser SVG Anzeigeprogramm auch wissen kann, wo wir diesen Text darstellen möchten, ist es auch hier erforderlich, den Startpunkt zu definieren. Dieser wird durch die Attribute x und y spezifiziert. Wir müssen hierbei jedoch die Höhe unseres Text bedenken, damit dieser nicht außerhalb des sichtbaren Bereiches ist.

Leider ermöglicht uns SVG in den Versionen 1.0 und 1.1 keinen Zeilenumbruch. Dieser kleine "Makel" wurde inzwischen erkannt und kann im Bedarfsfalle seit SVG tiny 1.2 mit dem Element textArea umgangen werden. Wir müssen uns hier also – da wir es noch nicht besser wissen und mit der SVG Version 1.1 arbeiten – ersteinmal durch mehrere text-Elementen helfen. Natürlich gibt es auch andere, schönere Möglichkeiten. Zuerst nochmal das einfache Eingangsbeispiel:

Die Attribute x und y können nicht nur eine Koordinate enthalten, sondern jeweils eine mit Komma oder Leerzeichen separierte Liste von Koordinaten für jeden einzelnen Glyphen. Die Koordinaten stehen für die aktuelle Textposition.

Sind mehr Koordinaten als Glyphen angegeben, werden die überschüssigen Koordinaten ignoriert.

Mit dem Attribut rotate können einzelne Glyphen um die aktuelle Textposition gedreht werden. Der Attributwert ist wiederum eine mit Komma oder Leerzeichen separierte Liste von Winkeln in Grad. Unstrittig ist die Situation, wenn genau ein Winkel angegeben ist, dann werden alle Glyphen um diesem Winkel gedreht. Gibt es mehr Winkel als Glyphen, werden die überschüssigen Winkel ignoriert.

In der anderen Situation mit mehr Glyphen als Winkeln kann es praktische Probleme mit Implementierungen geben und einer als Fehler ausgegebenen Änderung in der Spezifikation. Die neue Variante ist zwar sinnvoller als die alte, bei älteren Darstellungsprogrammen ist natürlich ungewiß, wie diese die Situation interpretieren. Die aktuelle Interpretation ist, daß der letzte Winkel auf alle überschüssigen Glyphen angewendet wird. Die alte, alternative Interpretation war, daß die überschüssigen Glyphen ungedreht bleiben.

Mit den Attributen dx und dy kann die aktuelle Textposition relativ um den angegebenen Wert verschoben werden. Wieder kann eine mit Komma oder Leerzeichen separierte Liste angegeben werden. Die Liste wird analog zu der von x und y interpretiert.

Mit dem Attribut textLength kann der Autor die von ihm berechnete Länge des Textes angeben. Weicht die Berechnung des Darstellungsprogrammes von der Angabe hat, hat das Darstellungsprogramm eine entsprechende Anpassung der Glyphenpositionen vorzunehmen.

Mit dem Attribut lengthAdjust mit den möglichen Werten spacing oder spacingAndGlyphs wird angegeben, wie die Anpassung vorzunehmen ist. Im Falle von spacing werden nur die Abstände zwischen den Glyphen angepaßt. Im Falle von spacingAndGlyphs wird beides gedehnt beziehungsweise komprimiert.

Alle genannten Attribute sind animierbar, rotate ist nicht additiv und calcMode paced ergibt bei der Listenvariante kein sinnvolles Resultat.

dx, dy, textLength und lengthAdjust sind in den tiny-Profilen nicht verfügbar.

Hier kann man mal gucken, welche Attribute vom aktuellen Darstellungsprogramm bereits (korrekt) interpretiert werden: SVG-Beispiel text - spezifische Attribute

W3C Text Referenz

[Bearbeiten] tspan

SVG
1.1	2	9	4	2	3.2	1.7

tspan ist eine Möglichkeit, um Teile eines Textes zu markieren, anders zu dekorieren oder zu positionieren und kann in SVG 1.1 eingesetzt werden (nicht in SVG tiny 1.1). Ohne Positionierungsfunktionalität ist dies Element auch in SVG tiny 1.2 verfügbar

In SVG 1.1 tritt tspan innerhalb von text und textPath auf, in SVG tiny 1.2 auch innerhalb von textArea. Innerhalb von tspan können weitere tspan notiert werden, in SVG tiny 1.2 alle Elemente, die auch im Elternelement notiert werden dürfen, im Falle von textArea also auch tbreak.

Entsprechend zu text hat tspan in SVG 1.1 die gleichen Attribute x, y, dx, dy, rotate, textLength und lengthAdjust. In SVG tiny 1.2 können nur allgemein anwendbare Attribute verwendet werden.

Ist ein Attribut nicht angegeben, kommen jeweils, sofern angegeben, die Attribute des Elternelementes zur Anwendung.

Innerhalb von text können tspan-Elemente mit entsprechenden Attributen dazu dienen, neue Zeilen zu beginnen. Ein Darstellungsprogramm sollte so konstruierte mehrzeilige Texte am Stück markieren und kopieren können, anders als bei mehreren unabhängigen text-Elementen. Allerding hat der Autor selbst zu entscheiden, was jeweils in eine Zeile gehört, einen automatischen Zeilenumbruch gibt es innerhalb von text auch mit tspan nicht.

Beispiel mit Präsentationsattributen (SVG 1.1 und SVG tiny 1.2):

Zweizeiliges Beispiel (SVG 1.1)

Einfacher alle Glyphen eines Wortes drehen (SVG 1.1)

Mit den Autorenangaben zur Textlänge in folgendem Beispiel ist es wahrscheinlich, daß 'Welt' verdichtet wird und 'Hallo' und '!!!' auseinandergezogen. Die Angabe für das innere Element wird von der Angabe des äußeren abgezogen, um das Verhalten des äußeren zu bestimmen. Offenbar sollte also die Angabe für das äußere Element größer als für das innere sein, sonst kann das Darstellung zu keiner plausiblen Darstellung gelangen.

Hier kann man mal gucken, welche Attribute vom aktuellen Darstellungsprogramm bereits (korrekt) interpretiert werden: SVG-Beispiel tspan - spezifische Attribute

Kniffliger wird es natürlich, wenn die Attribute sowohl für text als auch tspan notiert werden. Im Darstellungsprogramm muß dann korrekt implementiert sein, welcher Wert gilt. Zudem sollte das Darstellungsprogramm die evenfalls verfügbaren Elemente title und desc natürlich nicht direkt als graphsiche Textausgabe darstellen, obwohl sie im jeweiligen Element drinstehen.

SVG-Beispiel text und tspan - spezifische Attribute in beiden verwendet

[Bearbeiten] tref

SVG
1.1	-	9	4	-	-	1.7

tref ist ein Element, mit dem Textinhalt anderer Elemente wiederverwendet werden kann und ist in SVG 1.1 verfügbar, nicht in tiny. tref kann innerhalb von text, tspan und textPath notiert werden.

Zum Beispiel kann so Text aus den Elementen title, desc, metadata zur direkten Anzeige als graphischer Inhalt gebracht werden, ohne den Text selbst wiederholen oder als Entität definieren zu müssen.

Die Attribute von XLink sind bei diesem Element verwendbar. Insbesondere dient das Attribut href dazu, ein anderes SVG-Element zu referenzieren, von dem der Text übernommen werden soll. Insbesondere ist href auch animierbar, dargestellter Textinhalt kann also ausgetauscht werden, etwa nützlich für Uhren oder Zähler.

Entsprechend zu text hat tref in SVG 1.1 die gleichen Attribute x, y, dx, dy, rotate, textLength und lengthAdjust. Das Verhalten ist ansonsten entsprechend zu tspan.

Beispiel - Wiederverwendung des Dokumenttitels und von Elementinhalten von Elementen innerhalb des Elementes defs im graphischen Teil:

SVG-Beispiel tref

[Bearbeiten] textPath

SVG
1.1	2	9	4	-	3.2	1.7

Mit dem Element textPath ist es möglich, Text entlang eines Pfades anzuordnen, ist in SVG 1.1 verfügbar, nicht in tiny.

Mit dem Attribut href von XLink ist der Pfad (siehe entsprechenden Abschnitt zu Pfaden) anzugeben, entlang dessen der Text angeordnet werden soll. Ist mehr Text als Pfad vorhanden, wird jedenfalls der überschüssige Text nicht angezeigt. Neben den schon für text besprochenen Attributen textLength und lengthAdjust gibt es einige weitere, die für dieses Element spezfisch sind.

startOffset gibt an, mit welchem Abstand relativ zum Beginn des Pfades der Text begonnen werden soll. Voreinstellung ist 0, Prozentangaben beziehen sich auf die gesamte Pfadlänge. Interessant kann auch ein negativer Wert sein (damit der Beginn des Textes nicht erscheint, kann hilfreich sein, wenn man einen Lauftext animieren will), dies ist nicht explizit ausgeschlossen.

Mittels method mit den möglichen Werten 'align' und 'stretch' wird angegeben, wie sich die Glyphen an den Pfad anpassen sollen. Bei 'align' werden die Glyphen einfach gedreht und verschoben, bei 'stretch' erfolgt auch noch eine Verzerrung des Buchstabens anhand der Krümmung des Pfades. Voreinstellung ist 'align'.

Mittels spacing mit den möglichen Werten 'auto' und 'exact' wird angegeben, wie mit dem Leerraum zwischen den Glyphen umgegangen werden soll. Im Falle von 'exact' ist in der Spezifikation ein Algorithmus angegeben, nach dem vorgegangen werden soll, bei der Voreinstellung 'auto' kann ein Algorithmus verwendet werden, der elegantere Resultate liefert.

startOffset, method und spacing sind animierbar.

Beispiel:

SVG-Beispiel textPath

[Bearbeiten] textArea und tbreak

SVG
1.2 tiny	-	9.5	-	-	-	-

Mit dem Element textArea kann unabhängig vom Element text Textinhalt in einem vorgegebenen Bereich ausgegeben werden, wo der Text automatisch umgebrochen wird. Mit dem Element tbreak kann darin ein manueller Zeilenumbruch vorgenommen werden, mittels tspan kann ein Textfragment anders dekoriert werden.

Mit den Attributen x und y kann die linke obere Ecke des Textblockes angegeben werden, die Voreinstellung ist '0'. Mittels width und height kann Breite und Höhe angegeben werden. Die Werte sind Koordinaten, beziehungsweise Zahlen. Bei width und height kann alternativ auch der Wert 'auto' angegeben werden, wonach die Ausdehnung automatisch berechnet wird. Die Voreinstellung ist 'auto'. Anders als man vielleicht erwarten könnte, wenn man (X)HTML kennt, bedeutet 'auto' insbesonders für width nicht eine implizite Begrenzung durch ein Elternelement oder den Anzeigebereich, bei dem Wert sind sowohl width als auch height unbegrenzt. Erst wenn für width ein konkreter Wert angegeben wird, erfolgt gegebenenfalls ein automatischer Zeilenumbruch, sonst nur wenn einer mittels tbreak explizit angegeben wird. tbreak ist ein leeres Element ohne spezifische Attribute. Ist insbesondere für height ein Wert angegeben und reicht der Platz für den Text nicht aus, so wird überstehender Text nicht angezeigt.

x, y, width und height sind animierbar.

Es gibt einige Eigenschaften, die in SVG tiny 1.2 als Präsentationsattribute zu notieren sind, die spezifisch für textArea sind.

Die Eigenschaft line-increment gibt die Höhe einer Zeile an. Der Wert ist 'auto', 'inherit' oder eine Zahl. 'auto' ist die Voreinstellung, 'inherit' gibt eine Vererbung vom Elternelement an. Die Zahl gibt die Zeilenhöhe in lokalen Einheiten an. Ein negativer Wert wird ignoriert. Die Eigenschaft ist anwendbar auf textArea, tbreak und auf tspan, sofern es sich in textArea befindet.

text-align ist eine Eigenschaft zur Ausrichtung des Textes. Mögliche Werte sind 'start', 'end', 'center' und 'inherit'. Letzteres ist wie immer die Vererbung vom Elternelement. Bei der Schreibrichtung von links nach rechts bedeutet 'start' linksbündiger Text, 'end' rechtsbündiger Text und 'center' horizontal zentrierter Text. Voreinstellung ist 'start'.

display-align ist ebenfalls eine Eigenschaft zur Ausrichtung des Textes. Mögliche Werte sind 'auto', 'before', 'center', 'after', 'inherit'. 'inherit' gibt eine Vererbung vom Elternelement an. Bei der Zeilenfolge von oben nach unten bedeuten 'before' und 'auto' den Text oben ausrichten, 'after' unten ausrichten, 'center' ein vertikales Zentrieren.

line-increment, text-align und display-align sind animierbar.

Einfaches Beispiel:

SVG-Beispiel: 'Die Kleinsten' von Wilhelm Busch

Es ist leicht zu erkennen, daß in SVG die wesentliche Struktur des Gedichtes mit Strophen und Zeilen nicht ordentlich ausgezeichnet werden kann, nur eine graphische Repräsentation angeboten werden kann, die wenig bis keine semantische Struktur enthält. Wie im Abschnitt über Barrierefreiheit erläutert, läßt sich dies jedoch durch die Attribute aus RDFa deutlich verbessern. In diesem Fall kann tspan als Strukturelement verwendet werden und mit dem allgmeinen Attribut property angegeben werden, welche semantische Struktur damit repräsentiert wird. Da die für die Auszeichnung von Text eigentlich geläufige Sprache (X)HTML allerdings auch keine Elemente hat, die für Gedichte semantisch relevant wären, muß da im Bedarfsfalle auf Spezialsprachen ausgewichen werden. Immerhin verbessert das insofern die Zugänglichkeit, als rein aus diesen Angaben ohne die graphische Repräsentation eindeutig die Gedichtstruktur entnommen werden kann.

SVG mit RDFa, Beispiel: 'Die Kleinsten' von Wilhelm Busch

SVG-Beispiel mit automatischem Zeilenumbruch: 'Die Abweisung' von Franz Kafka

[Bearbeiten] Pfade

SVG
1.1	1.5	8	4	2	3.2	1.7

Ein Pfad ist wahrscheinlich das meist verwendete Zeichenwerkzeug das in SVG Verwendung findet. Es wird das Element path verwendet. Es hat die spezifischen Attribute d und pathLength. pathLength gibt an, welche Pfadlänge der Autor für den angegebenen Pfad berechnet hat. Dies ist teilweise für einige Pfadsegmente nur numerisch möglich, weswegen es da Abweichungen zwischen den Ergebnissen des Autors und dem jeweils verwendeten Darstellungsprogramme geben kann. Das Darstellungsprogramme sollte dann die Darstellung zum Beispiel von gestrichelten Linien entlang des Pfades entsprechend anpassen. Nachvollziehbar ist dies zum Beispiel mit Opera.

Das Attribut d enthält die eigentlichen Pfaddaten, das sind Kommandos, meist gefolgt von Koordinaten oder Parametern. Kommandos sind einzelne Buchstaben, Koordinaten oder Parameter sind eine bestimmte Anzahl von Zahlen oder einer vielfachen Menge von Zahlen hinter dem Kommando. Sind für ein Kommando etwa mindestens n weitere Koordinaten oder Parameter notwendig, so können jeweils auch ein ganzzahliges Vielfaches von n an Koordinaten oder Parametern notiert werden. Zu jedem dieser n Koordinaten oder Parameter gehört dann ein Kurvenstück oder -segment, wobei das Kommando bestimmt, wie dieses dargestellt wird. Ein oder mehrere dieser Kurvensegmente können auch Pfadfragment genannt werdem, wenn sie im d-Attribut aufeinander folgen. Ein Pfad kann auch mehrere Unterpfade enthalten, die nicht miteinander verbunden sind. Totzdem handelt es sich bei allen Unterpfaden, die in einem Attribut d notiert werden, um einen Pfad, was folgen haben kann, wenn sich ein Pfad selbst überkreuzt. Je nachdem, was der Autor angibt, wie der Pfad gemalt werden soll, kann das Resultat für ein einen oder mehrere sich kreuzende Pfade deutlich unterschiedlich aussehen.

Ein einfaches Beispiel:

<path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

Sieht kryptisch aus? Richtig, das ist es auch. Folgende Liste bietet eine Kurzübersicht über verfügbare Kommandos. Kommandos werden in großen oder kleinen Buchstaben angegeben. Große Buchstaben entsprechen absoluten Koordinatenangaben. Kleinen Buchstaben entsprechen relativen Angaben, relativ zum letzten Punkt des Pfades (also wirklich Punkt und nicht Kontrollpunkt).

Kommando	Parameter	Funktion	Beschreibung
M, m	(x y)+	Legt die Position des Zeichenstifts fest und beginnt einen neuen Pfad oder Unterpfad.	Legt die Position des Zeichenstifts fest x für waagerecht und y für senkrecht. Es folgt mindestens ein Koordinatenpaar, bei mehreren wird ein Linienzug mit geraden Verbindungslinien angenommen.
L, l	(x y)+	Zeichnet eine gerade Linie	Zeichnet eine gerade Linie von der aktuellen Position zu den angegebenen (x,y) Koordinaten, welche die neue Position festlegen. Weitere Koordinatenpaare können angegeben werden, das ergibt dann einen Linienzug.
H, h	x+	Zeichnet eine horizontale Linie	Zeichnet eine horizontale Linie von der aktuellen Position, die vertikale Position bleibt gleich. Weitere Koordinaten führen wieder zu einem Linienzug.
V, v	y+	Zeichnet eine vertikale Linie	Zeichnet eine vertikale Linie von der aktuellen Position, die horizontale Position bleibt gleich. Weitere Koordinaten führen wieder zu einem Linienzug.
C, c	(x1 y1 x2 y2 x y)+	Zeichnet eine Kubische Bézierkurve	Zeichnet eine kubische Bézierkurve von der aktuellen Position nach (x,y) unter der Verwendung von (x1,y1) als den Kontrollpunkt am Anfang der Kurve und (x2,y2) als den Kontrollpunkt am Ende der Kurve. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muß immer exakt stimmen. Funktionsprinzip einer kubischen Bézierkurve
S, s	(x2 y2 x y)+	Kurzversion zur Fortsetzung einer kubischen Bézierkurve.	Aus dem letzten Kontrollpunkt und Punkt des vorherigen kubischen Bézierkurvensegmentes wird eine stetig differenzierbare Fortsetzung des Pfades berechnet. Ist das vorherige Segment keine kubische Bézierkurve, so wird der fehlende Kontrollpunkt als identisch mit dem Ausgangspunkt angenommen. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muß immer exakt stimmen.
Q, q	(x1 y1 x y)+	Zeichnet eine quadratische Bézierkurve	Zeichnet eine quadratische Bézierkurve von der aktuellen Position nach (x,y) unter Verwendung von (x1,y1) als Kontrollpunkt. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muß immer exakt stimmen. Funktionsprinzip einer quadratischen Bézierkurve
T, t	(x y)+	Kurzversion zur Fortsetzung einer quadratischen Bézierkurve	Aus dem letzten Kontrollpunkt und Punkt des vorherigen quadratischen Bézierkurvensegmentes wird eine stetig differenzierbare Fortsetzung des Pfades berechnet. Ist das vorherige Segment keine quadratische Bézierkurve, so wird der fehlende Kontrollpunkt als identisch mit dem Ausgangspunkt angenommen. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug.
A, a	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+	Zeichnet einen Ellipsenbogen	Zeichnet einen elliptischen Kreisbogen von der aktuellen Position nach (x, y). Die Größe und die Ausrichtung der Ellipse werden bestimmt durch zwei Radien (rx, ry) und einer X-Achsen-Rotation, die bestimmt wie die gesammte Elypse relativ zum Koordinatensystem gedreht wird. Da es dann noch die Möglichkeit gibt, wie herum der Bogen gemalt wird und ob ein kleiner oder großer Bogen gemalt wird, gibt es auch noch Boolsche Parameter large-arc-flag sweep-flag. Die Werte sind 0 oder 1. large-arc-flag 1 bewirkt, daß der große Bogen gemalt wird, der Wert 0 entspricht dem kleinen Bogen. sweep-flag 1 entspricht einer positiven Malrichtung, 0 einer negativen. Im Bedarfsfalle, wenn es keinen Ellipsenbogen gibt, der nach den Angaben Anfangs- und Endpunkt verbindet, werden die Angaben vom Darstellungsprogramm umskaliert. Das Kommando ist in den tiny-Profilen nicht verfügbar. Hinsichtlich der (kontinuierlichen) Animation ist bei diesem Kommando bei diversen Darstellungsprogrammen mit Problemen zu rechnen, wobei das korrekte Verhalten auch nicht unbedingt dem entsprechen mag, was viele Autoren intuitiv erwarten werden.
Z, z	(none)	Schließt den (Unter-)Pfad ab	Zeichnet eine Linie von der aktuellen Position zur ersten Koordinate des aktuellen (Unter-)Pfades.

W3C path Referenz

Die Trennung der Zahlen im Attribut voneinander kann auf verschiedene Weise stattfinden. Einige sehr kompakte Notationen, die in der Spezifikation erlaubt sind, können noch ein paar Bytes sparen, werden aber am ehesten kleine Implementierungsprobleme in Darstellungsprogrammen aufdecken. Sofern der Autor nicht daran interessiert ist, Implementierungsprobleme zu finden, empfiehlt es sich, Zahlen mit Leerzeichen zu separieren, alternativ kann auch ein Komma mit optionalen Leerzeichen davor und danach verwendet werden. Es kann sich also anbieten, die beiden Zahlen eines Koordinatenpaares mit Komma zu trennen und die Koordinatenpaare voneinander mit Leerzeichen oder umgedreht. Das verbessert die Lesbarkeit des Quelltextes und gegebenenfalls das Lokalisieren von Stellen, wo der Autor etwas ändern möchte. Zwischen Kommandos und Zahlen brauchen keine Leerzeichen gesetzt werden und ein Komma wäre dort falsch. Zeilenumbrüche statt Leerzeichen sind auch in Ordnung und können ebenfalls die Lesbarkeit des Quelltextes verbessern.

Sowohl pathLength als auch d sind animierbar. Aufgrund der Struktur des Attributwertes ist d nicht additiv und eine Animation mit calcMode paced ist nicht sinnvoll. Ferner müssen die Animationswerte für d immer exakt dieselbe Abfolge von Kommandos haben und pro Kommando muß die Anzahl der angegebenen Koordinaten und Parameter gleichbleiben. Bei SVG tiny 1.2 können ferner bei verschiedenen Animationswerten große und kleine Kommandos variiert werden, weil die kleinen Kommandos vor der Animation vom Darstellungsprogramm in große umzurechnen sind. Ferner kann bei SVG tiny 1.2 bei einer diskreten Animation der Pfad in jedem Animationswert anders aufgebaut sein und unterliegt nicht den Beschränkungen von SVG 1.1.

Als Sonderfall ist ein Pfad anzusehen, der keine Ausdehnung hat, etwa d="M0 0l0 0". Ein solcher ist darzustellen, wenn das Präsentationsattribut stroke-linecap nicht 'butt' ist. Die Darstellung besteht dann nur aus den Linienenden.

Angaben wie d="M100,100m 100,-100m-100,-100l400,400" sind ebenfalls möglich, der Startpunkt wird dann jeweils verschoben, bis etwas gemalt werden soll, also hier das Kommando l folgt.

[Bearbeiten] Kurven mit speziellen Programmen erzeugen

Nun sind vermutlich nur wenige Autoren bereit und motiviert, kompliziertere Kurven per Hand mit einem Texteditor einzutippen.

Stattdessen bieten sich Programme wie Inkscape an. Diese haben eine graphische Nutzeroberfläche und weitere Hilfen, um mit einem Zeigergerät wie einer Maus oder auch einer Kombination aus elektronischem Stift und einem Tablett Pfade zu malen. Obwohl solche Programme recht nützlich sind, bleibt es einem oft nicht erspart, nach der Erstellung eines Dokumentes den Quelltext gründlich aufzuräumen. Das reduziert nicht nur meist dramatisch die Dateigröße, sondern verbessert auch die Zugänglichkeit. Offen bleibt dabei die Frage, warum solche Programme dem Autor nicht gleich dabei helfen, zugängliche Dokumente zu erstellen und zu optimieren.

Beispiel: 'Hallo Welt!' mit Inkscape als Kalligraphie.

Nachdem das Dokument mit Inkscape erstellt wurde, wurde dies nicht als 'Inkscape-Dokument', sondern als schlichtes SVG-Dokument abgespeichert. Dann wurden die Pfade um die unnötigen Nachkommastellen bereinigt, style-Attribute entsorgt, title und desc ergänzt, die Version von 1.0 auf 1.1 hochgesetzt, das Profil tiny angegeben, ein Rechteck als Hintergrund gesetzt.

Eine weitere Methode besteht darin, eine geeignete Pixelgraphik, etwa das Bild einer Digitalkamera in Pfade zu konvertieren. Dazu dienen zum Beispiel Programme wie Potrace. Potrace läuft als eigenständiges Programm, ist aber auch in Inkscape verfügbar. Eine solche Konversion wird auch Vektorisierung genannt.

Ein erfolgversprechendes Vorgehen bei der Vektorisierung besteht im ersten Schritt darin, ein geeignetes Bild auszuwählen. Dieses sollte aus einem eindeutigen Hauptmotiv bestehen und möglichst einheitlichem Hintergrund. Hoher Kontrast ist ebenfalls von Vorteil. In einem zweiten Schritt kann dieses Bild mit einem Programm wie Gimp manipuliert werden, also störende Details und unregelmäßigen Hintergrund entfernen, gegebenenfalls Kontrast erhöhen. Im dritten Schritt wird mit Potrace die Vektorisierung vorgenommen, wobei zwischen mehreren Strategien gewählt werden kann - Vektorisierung nach Farbe, Kontrast, Anzahl der verschiedenen Farbschichten, aufeinander gestapelt oder unabhängig voneinander etc. Was davon sinnvoll ist, hängt vom Bild ab, aber natürlich auch davon, was man erreichen will.

Zum Beispiel mit Inkscape kann nun das Resulat weiter bearbeitet werden, Pfade können automatisch vereinfacht werden. Die Vereinfachung besteht darin, die Anzahl der Punkte und Kontrollpunkte zu reduzieren und ihre Werte zu einem einfacheren Umriß zu manipulieren. Es gibt auch Hilfen, mit denen manuell Punkte und Kontrollpunkte verändert und manipuliert werden können.

Ist das Ergebnis dann zufriedenstellend, kann dies als einfache SVG-Datei abgespeichert werden. Mit einem kurzen Blick in den Quelltext und auf die Dateigröße wird man feststellen, daß ein solches Ergebnis aufgrund der Dateigröße nicht besonders brauchbar ist und die Genauigkeit der Pfadangaben deutlich zu hoch für die gewünschte Anwendung ist. Zudem hat Inkscape die unangenehme Angewohnheit, Eigenschaften im Attribut style abzulegen, statt in Präsentationsattributen, was für einfachere Darstellungprogramme, die auf SVG tiny ausgelegt sind, eine Zugänglichkeitsbarriere darstellt.

Der nächste Schritt besteht also darin aufzuräumen. Dies kann rein manuell mit einem Texteditor geschehen. Effektiver ist es natürlich, sich dafür ein entsprechendes Programm oder Skript zu schreiben, welches die Genauigkeit der Angaben reduziert und Eigenschaften in Präsentationsattribute konvertiert, gegebenenfalls auch nur die Pfade zur Weiterverwendung extrahiert. Je nach Motiv, Inhalt, Geschick und Zielrichtung läßt sich die Dateigröße so meist auf einige Prozent bis schlimmstenfalls fünfzig Prozent reduzieren.

Beispiel: Vogel.

Die Abstrahierung des Motivs oder die Optimierung ist bei diesem Motiv nur so weit fortgeschritten, daß noch deutlich die Vorgehensweise von Potrace bei der Vekorisierung an der Art der Kurven zu erkennen ist. Potrace erkennt nicht das Motiv selbst, sondern wählt nach Grauwerten oder hier Farben aus, vereinfacht und umrandet gleichartige Gebiete mit jeweils einem Kurvenzug. Bei einer weiteren Optimierung oder Abstrahierung müßte so vorgegangen werden, daß die Pfade wirklich Bestandteilen des Motives zugeordnet werden, also ein weiteres Aufspalten von Unterpfaden in selbständige Pfade, eventuell dann weitere Vereinfachungen, an einigen Stellen auch Präzisierungen und Anpassungen der Kurvenform.

Für diverse Probleme ist es natürlich effektiver, gleich selbst ein Programm oder Skript zu schreiben, um die gewünschten Pfade in einer sinnvollen Genauigkeit zu erzeugen. Dazu ist es dann notwendig, einiges Hintergrundwissen über die in SVG verwendeten Pfade zu haben, darum geht es im nächsten Abschnitt.

[Bearbeiten] Pfadkommandos im Detail

In obiger Kurzbeschreibung ist ja bereits zu lesen, wozu die jeweiligen Pfadkommandos dienen. Um dies wirklich effektiv in eigenen Skripten und Programmen nutzen zu können, lohnt sich ein genauerer Blick auf die Syntax und die Mathematik, welche die Kurvenstücke beschreiben.

Eine Parametrisierung eines Kurvensegmentes ist hilfreich, um das Kurvensegmentes zu analysieren. Generell gilt, daß es für dasselbe Kurvensegment nicht nur eine Parametrisierung gibt, sondern viele. Für gerade, quadratische und kubische Kurvensegmente werden die üblichen Parametrisierungen nach Bézier gewählt. Die Darstellung ist unabhängig von der Parametrisierung, solange diese nicht zum Beispiel innerhalb derselben Animation gewechselt wird. Eine Richtungsinformation ist hilfreich, wenn ein Kurvensegment durch ein weiteres ohne Knick fortgesetzt werden soll (stetig differenzierbare Fortsetzung). Interessant ist dies auch, wenn an beliebiger Stelle eine Richtungsmarkierung wie ein Pfeil angebracht werden soll, ebenso, wenn nach einem Pfadsegment gesucht werden, das ein vorgegebenes unter einem bestimmten Winkel schneiden soll. Die Richtung ergibt sich im Regelfall aus der Ableitung der Parametrisierung, wie sich die Krümmung des Kurvensegmentes aus der zweiten Ableitung ergibt.

Eine Linie in Richtung der Linie beim Punkt P ergibt sich aus der Ableitung A als Linie von P nach P + c A mit c größer als 0.

Bei Parametrisierungen kann es auch an der Parametrisierung liegen, wenn die Ableitung 0 wird, in solchen Fällen kann die zweite Ableitung verwendet werden, um die Richtung zu bestimmen (Regel von L'Hospital). Dieses Problem tritt bei Bézierkurven auf, wenn ein Kontrollpunkt mit dem zugehörigen Anfangs- beziehungsweise Endpunkt zusammenfällt. Sofern nicht alle Punkte zusammenfallen ergibt sich dann die Richtung aus der Richtung zum nächsten (Kontroll-)punkt des gleichen Segmentes, welches vom aktuellen verschieden ist.

[Bearbeiten] M, m

Mit den Kommandos 'M' oder 'm' beginnt jedes Pfadkommando. Da es keine früheren Pfaddaten gibt, bezieht sich das relative Kommando 'm' einfach auf den aktuellen Ursprung. Darauf folgt mindestens ein Koordinatenpaar, welches angibt, wo der Pfad beginnt. Im weiteren Verlauf können neben anderen Kommandos auch weitere Kommandos 'M' oder 'm' in einem Pfad auftauchen. Die bedeutet dann, daß der vorherige Unterpfad beendet ist und ein neuer Unterpfad an der Stelle begonnen wird, die durch das folgende Koordinatenpaar angegeben ist.

Folgen auf 'M' oder 'm' mehrere Koordinatenpaare, so werden die in der angebenene Reihenfolge zu einem Linienzug verbunden. Gibt es nur einen Pfad ohne weitere Unterpfade, so entspricht das dem Element polyline, welches dann zu bevorzugen ist.

Beispiel:

Pfad mit Unterpfaden, nur mit M, m konstruiert.

Schon bereits ein weiterer Unterpfad macht einen Unterschied. Bei Überschneidungen kann das Resulat ein anderes sein als das von zwei Pfaden oder Formen.

Beispiel: Pfade mit und ohne Unterpfade, gleichsinnige und gegensinnige Umläufe.

Pfade der Länge null werden genau dann gemalt, wenn das Präsentationsattribut stroke-linecap auf 'round' oder 'square' steht (dies kann in den Implementierungsanmerkungen der SVG-Spezifikationen nachgelesen werden). Für den Wert 'butt' wird nichts dargestellt. Für 'round' wird ein Kreis mit einem Durchmesser der stroke-width dargestellt. Für 'square' wird ein Quadrat mit der Kantenlänge der stroke-width dargestellt. Die Kanten des Quadrates sind dann zu den (lokalen) x- und y-Richtungen ausgerichtet.

Dies ermöglicht es, sehr kompakt eine Reihe von 'Punkten' als Kreise oder Quadrate mittels eines Pfades mit Unterpfaden der Länge null zu notieren.

In folgendem Beispiel werden einige mögliche Pfade der Länge 0 ausprobiert. Ist jeweils ein unterliegender roter Kreis zu sehen, ist das verwendete Darstellungsprogramm fehlerhaft.

Beispiel: Pfade der Länge 0.

[Bearbeiten] Z, z

Mit dem Kommando 'Z' oder 'z' (was das gleiche bewirkt und keine weiteren folgenden Koordinaten oder Parameter erwartet) wird eine gerade Linie zurück zum Anfangspunkt eines Unterpfades gezogen und somit der Unterpfad geschlossen. Der Anfangspunkt ist gegeben durch das Koordinatenpaar, welches auf das vorherige Kommando 'M' oder 'm' folgt. Sofern auf ein 'Z' oder 'z' kein weiteres 'M' oder 'm' folgt, sondern anderes Kommando, so ist folglich die aktuelle Position die des Anfangspunktes gegeben durch das Koordinatenpaar, welches auf das vorherige Kommando 'M' oder 'm' folgt. Die graphische Repräsentation eines geschlossenen Pfades kann sich leicht von der unterscheiden, die man erhält, wenn man einfach den Endpunkt gleich dem Anfangspunkt explizit angibt. Das hängt mit den Präsentationsattributen stroke-linecap und stroke-linejoin zusammen. Ein mit 'Z' oder 'z' geschlossener Unterpfad hat keine Linienenden, die Kurvensegmente sind zusammengefügt. Ohne dieses Kommando hat es Linienenden. Es wird also jeweils das andere Attribut verwendet.

Pfade mit und ohne Z - Einfluß auf die Darstellung.

Nach einem Kommando z kann auch ein anderes Kommando als M oder m folgen. In folgendem Beispiel folgt ein L. Folglich geht der Pfad am Anfangspunkt weiter. Hier ist eine Spielerei mit diskreter Drehsymmetrie dargestellt, der wiederholt genutzte Anfangspunkt liegt im Drehzentrum bei 0.

Fortsetzung von Pfaden hinter dem Kommando Z.

[Bearbeiten] L, l, H, h, V, v

Mit den Kommandos 'L', 'l', 'H', 'h', 'V', 'v' können gerade Pfadsegmente angegeben werden, mit 'H', 'h' horizontale Linien, mit 'V', 'v' vertikale Linien, indem jeweils die horizontale beziehungsweise vertikale Koordinate des Endpunkts angegeben wird. Mit 'L', 'l' werden Anfangs- und Endpunkt mit einer Linie verbunden.

Eine Parametrisierung ist für ein gerades Pfadsegment recht einfach. Seien Anfangs- und Endpunkt P(0) und P(1), sei der Laufparameter s aus [0,1], so gilt für eine lineare Bézierkurve

k(s) = (1 - s)P(0) + sP(1)
mit der Ableitung
dk(s)/ds = P(1) - P(0)
und der zweiten Ableitung
d²k(s)/ds² = 0

Sudoku-Spielfeld - kompakte Darstellung mit 'H', 'h', 'V', 'v'.

Spielerei mit Unterpfaden, bestehend aus Quadraten - Beispiel für Kommandos 'L' und 'l'.

Als kleine Übung sei nun noch die Frage betrachtet, wie man zwei gerade Pfadsegmente so verlängert, daß sie als ein Kurvenzug dargestellt werden können. Das läuft darauf hinaus, erstmal den Schnittpunkt von zwei Geraden zu finden.

Sei die erste Gerade K(t) gegeben durch die nicht gleichen Punkte P und Q mit dem Parameter t in der Form:
K(t) = (1-t) Q + t P = Q + (P - Q) t = Q + R t mit R = P - Q
Sei die zweite Gerade L(s) gegeben durch die nicht gleichen Punkte U und S mit dem Parameter s in der Form:
L(s) = (1-s) S + s U = S + (U - S) s = S + T s mit T = U - S

Um den Schnittpunkt zweier Geraden (in der Ebene) zu finden, wird zunächst geprüft, ob es einen solchen Schnittpunkt überhaupt gibt. Das ist der Fall, wenn sie nicht parallel sind, wenn also T und R nicht parallel sind. Mit einer Bezeichnung der Komponenten in x- und y-Richtung entsprechend sind R und T parallel, wenn Tx Ry - Ty Rx = 0 ist. Dann gibt es also keinen Schnittpunkt.

Sonst ist der Schnittpunkt V der beiden Geraden gegeben durch:
(Q - S) #R /(T #R) = s
beziehungsweise
(S - Q) #T /(R #T) = t
V = Q + R t = S + T s

Dabei sind #R = (Ry, -Rx) und #T = (Ty, -Tx) senkrecht zu R beziehungsweise T.

Sind s und t größer oder gleich 1, so ergibt Q P V S U den Kurvenzug oder auch einfacher Q V U. Sind s und t kleiner oder gleich 0, so sind die Punkte in anderer Reihenfolge zu notieren: P Q V U S oder auch einfacher P V S. Ist nur einer der Werte kleiner oder gleich 0, der andere größer oder gleich 1, so sind nur für den mit einem Wert kleiner oder gleich 0 die beiden Punkte in der Reihenfolge zu vertauschen. In den anderen Fällen liegt der Schnittpunkt auf mindestens einem der beiden Kurvensegmente und der Linienzug ist anders zu malen, zum Beispiel mit zwei Unterpfaden, entsprechend der parallele Fall.

Diese Betrachtung kann im Folgenden noch nützlich sein, wenn für zwei Pfade ein quadratisches Kurvensegment gesucht wird, mit dem die beiden Pfade ohne Knick verbunden werden sollen. Der Kontrollpunkt entspricht dann dem Punkt V, wenn s und t größer oder gleich 1 sind. Da bei vorgegebener Richtung der Pfade eine Vertauschen nicht möglich ist, stellt sich damit bereits heraus, daß es viele Fälle gibt, wo mehr als ein quadratisches Kurvensegment gebraucht wird, um zwei Pfade ohne Knick miteinander zu verbinden.

[Bearbeiten] Q, q, T, t

Mittels 'Q', 'q', 'T', 't' werden quadratische Kurvensegmente angegeben. Der Kontrollpunkt gibt jeweils an, in welche Richtungen der Pfad am Anfangs- und Endpunkt geht. Die Verhältnisse der Entfernungen zwischen den Punkten haben Einfluß auf den sonstigen Kurvenverlauf.

Seien Anfangs- und Endpunkt P(0) und P(2) und der Kontrollpunkt P(1), sei der Laufparameter s aus [0,1], so gilt für eine quadratische Bézierkurve:

k(s) = (1 - s)²P(0) + 2s(1-s)P(1) + s²P(2)

Und für die Ableitungen nach s gilt folglich:
dk(s)/ds = 2(s-1) P(0) + 2(1 -2s) P(1) + 2s P(2)
oder in der Parametrisierung einer linearen Bézierkurve
dk(s)/ds = (1-s) (2P(1) - 2P(0)) + s (2P(2) - 2P(1))
mit der zweiten Ableitung
d²k(s)/ds² = 2P(0) + 2P(2) - 4P(1).

Weil P(0) = k(s=0) der Anfangspunkt ist und P(2) = k(s=1) der Endpunkt, ist somit
dk(0)/ds = -2 P(0) + 2P(1)
dk(1)/ds = -2 P(1) + 2P(2)
also:
P(1) = P(2) - dk(1)/ds/2 = P(0) + dk(0)/ds/2

Mit den Kommandos 'T' und 't' erfolgt eine automatische Fortsetzung eines vorherigen quadratischen Pfadsegmentes, welche stetig differenzierbar ist, also keinen Knick an der Verbindungsstelle aufweist. Es gibt allerdings beliebig viele solcher Fortsetzungen, in SVG ist nur eine davon automatisch verfügbar, andere sind manuell zu berechnen und mit weiteren Kommandos 'Q' oder 'q' zu notieren.

Dazu wird wie angegeben die Ableitung am Endpunkt verwendet:
A = dk(1)/ds = -2 P(1) + 2P(2)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl a:
P(1, neu) = P(2, alt) + a A/2, beziehungsweise mit relativen Koordinaten p(1, neu) = a A/2
Das T-Kommando entspricht a = 1. 'alt' und 'neu' stehen hier für das alte Kurvenstück und das neue, also der gewünschten Fortsetzung.

• Beispiel: Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando T.
• Beispiel: Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando t.

Bei einem quadratischen Pfad, der mit dem Kommando T oder t fortgesetzt wird, ist die Wirkung eines Kontrollpunktes in dem Sinne nicht lokal, als die Änderung des Kontrollpunktes des anfänglichen Q oder q den gesamten Verlauf des Pfades ändert.

In folgendem Beispiel ist zu sehen, wie mit leicht variiertem Kontrollpunkt zu Beginn des Pfades der gesamte Pfad geändert wird. Der jeweilige Kontrollpunkt ist als Kreis dargestellt, mit der gleichen Farbe gefüllt wie der zugehörige Pfad gemalt ist.

Beispiel: Nichtlokalität von Kontrollpunkten in QT-Pfaden.

Daher eigenen sich quadratische Bézierkurven eher schlecht, um andere Kurven zu approximieren oder zwischen einzelnen Datenpunkten zu interpolieren oder auch zu extrapolieren. Für solche Anwendungen sind kubische Bézierkurven viel besser geeignet, weil sie wegen des zusätzlichen Kontrollpunktes viel flexibler zu handhaben sind und Änderungen an Kontrollpunkten nur in der Nähe des Kontrollpunktes Auswirkungen haben.

Wie im Abschnitt über gerade Kurvensegmente schon angesprochen, kann in einigen Fällen ein quadratisches Pfadsegment verwendet werden, um zwei Kurvenfragmente ohne Knick miteinander zu verbinden, wenn die Richtungen der Ableitungen an den zu verbindenden Enden geeignet ausgerichtet sind.

Beispiel: Kurvensegmente mit quadratischem Pfad verbinden.

Verwendet wird obige Lösung des Problems, den Schnittpunkt zweier Geraden zu finden. Die Richtung der Geraden wird jeweils bestimmt durch die Richtung der Ableitungen an den zu verbindenden Enden, beziehungsweise dort die Richtungen vom Endpunkt zum zugehörigen Kontrollpunkt (oder Anfangspunkt, je nach Typ des Segmentes). Der quadratische Kurvenzug ist grün dargestellt. Die Richtungen der zufällig vorgegebenen Kurvensegmente sind blau dargestellt. Mit Kreisen wird jeweils dargestellt, wo der Kontrollpunkt ist (rosa) oder wo die jeweiligen Pfade beginnen. Hellgrün ist zum Vergleich der Kurvenzug mit automatisch bestimmten Kontrollpunkten bei gleichen Punkten angegeben.

[Bearbeiten] C, c, S, s

Mittels 'C', 'c', 'S', 's' werden kubische Kurvensegmente angegeben. Der erste Kontrollpunkt gibt an, in welche Richtung der Pfad am Anfangspunkt geht. Der zweite Kontrollpunkt gibt an, aus welcher Richtung der Pfad am Endpunkt kommt. Die Verhältnisse der Entfernungen zwischen den Punkten haben Einfluß auf den sonstigen Kurvenverlauf.

Seien Anfangs- und Endpunkt P(0) und P(3) und der erste Kontrollpunkt P(1), der zweite P(2), sei der Laufparameter s aus [0,1], so gilt für eine kubische Bézierkurve:

k(s) = (1 - s)³P(0) + 3s(1-s)²P(1) + 3s²(1-s)P(2) + s³P(3)

Die Ableitungen ergeben sich daraus als:
dk(s)/ds = -3(1 - s)²P(0) + 3(1-4s +3s²)P(1) + 3(2s-3s²)P(2) + 3s²P(3)
oder in der Parametrisierung einer quadratischen Bézierkurve
dk(s)/ds = (1 - s)² (3P(1) - 3P(0)) + 2s(1-s) (3P(2) - 3P(1)) + s²(3P(3) - 3P(2))
Die zweite Ableitung ist somit
d²k(s)/ds² = (1-s) (6P(0) - 12P(1) + 6P(2)) + s (6P(3) -12P(2)) + 6P(1))

Speziell gilt an den Endpunkten:
dk(0)/ds = -3P(0) + 3P(1)
dk(1)/ds = -3P(2) + 3P(3)

oder entsprechend umgestellt:
P(1) = P(0) + dk(0)/ds/3
P(2) = P(3) - dk(1)/ds/3

Mit den Kommandos 'S' und 's' erfolgt eine automatische Fortsetzung eines vorherigen kubischen Pfadsegmentes, welche stetig differenzierbar ist, also keinen Knick an der Verbindungsstelle aufweist. Es gibt allerdings beliebig viele solcher Fortsetzungen, in SVG ist nur eine davon automatisch verfügbar, andere sind manuell zu berechnen und mit weiteren Kommandos 'C' oder 'c' zu notieren.

Dazu wird wie angegeben die Ableitung am Endpunkt verwendet:
A = dk(1)/ds = -3P(2) + 3P(3)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl a:
P(1, neu) = P(3, alt) + a A/3, beziehungsweise mit relativen Koordinaten p(1, neu) = a A/3
Das S-Kommando entspricht a = 1. 'alt' und 'neu' stehen hier für das alte Kurvenstück und das neue, also der gewünschten Fortsetzung. P(2, neu) und P(3, neu) können dann natürlich beliebig gewählt werden, um die Kurve fortzusetzen.

• Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando S.
• Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando s.

Umgekehrt kann es sinnvoll sein, den Pfad nicht hinten, sondern vorne um ein Segment zu verlängern. Dazu wird die Ableitungsformel für den Anfangspunkt verwendet, also:
A = dk(0)/ds = -3P(0) + 3P(1)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl b:
P(2, neu) = P(0, alt) -b A/3, beziehungsweise mit relativen Koordinaten p(2, neu) = -b A/3
P(0, neu) und P(1, neu) können beliebig gewählt werden, die Daten des neuen Kurvensegmentes sind den alten voranzustellen.

• Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, vorne angehängt.

Mit einem kubischen Pfadsegment können anders als mit einem quadratischen Pfadsegment immer zwei Pfade ohne Knick miteinander verbunden werden, sofern aus den zwei Pfaden jeweils die Richtungen ermittelt werden können. Meistens es reicht dazu, daß wie angegeben die Ableitung bestimmbar ist und diese nicht 0 ist, sonst ergibt sich die Richtung entsprechend aus dem anderen Kontrollpunkt, beziehungsweise aus dem anderen Punkt des vorherigen oder des folgenden Pfadsegmentes. Da eine kubische Kurve zwei Kontrollpunkte hat, können diese also unabhängig voneinander in der Richtung des vorherigen beziehungsweise des folgenden Pfades angegeben werden, so daß dadurch immer zwei Pfade mit einem kubischen Pfadsegment ohne Knick verbindbar sind. Dabei wird vorgegangen, wie bereits beschrieben für die Fortsetzung eines Pfades ohne Knick in den vorherigen Absätzen. Das legt dann für das einzupassende Element bis auf die Parameter a und b die beiden Kontrollpunkte fest. Anfangs- und Endpunkt sind ja ohnehin bereits durch den vorherigen und den folgenden Pfad festgelegt.

• Beispiel: Verbindung zweier kubischer Pfade ohne Knicke.

Gilt es, einen längeren Pfad oder Unterpfad so zu schließen, daß kein Knick entsteht, sind die Formeln für die Ableitungen ebenfalls anwendbar.

Mit den Punkten beziehungsweise Kontrollpunkten P(i, 0) bis Pn(i, n) für Kurvensegmente 0 bis n ist die Kurve dann offenbar geschlossen, wenn gilt:
P(0,0) = P(3,n)
Und wenn an der Verbindungsstelle von Anfang und Ende kein Knick auftreten soll, ergibt sich aus den Formeln für die Ableitungen
P(2, n) = (1+v) P(0, 0) - v P(1, 0) mit einer positiven Zahl v.
Hier ist v = 1 auch wieder der Fall, der einer automatischen Fortsetzung analog zum Kommando S entspricht.

Alternativ kann auch der Kontrollpunkt zu Beginn des Pfades passend gewählt werden, durch Umstellung ergibt sich:
P(1, 0) = (1+w) P(3, n) - w P(2, n) mit einer positiven Zahl w.

• Beispiel: 'Sonne und Seuche'.
  

Abstrakte Form und Wort/Dialekt-Spielerei. Geschlossene kubische Kurvenzüge ohne Knicke in mehreren, sich überlagernden Unterpfaden (einschließlich einfacher Animationen; Animationen werden dann in einem späteren Kapitel behandelt und müssen an dieser Stelle nicht nachvollzogen werden).
Der Titel ist in mehrfacher Hinsicht doppeldeutig (sonne und seuche - verschiedene Aussprachen oder Dialektformen des Wortes 'solche') und bezieht sich auf die Umlaufrichtungen der Pfade wie auch die daraus resultierenden Typen von Löchern, wenn sich die Pfade überschneiden, was mit einer Animation der Füllregel verdeutlicht wird. Es bezieht sich auch die verschiedenen Möglichkeiten, Pfade ohne Knick zu schließen.
Auf Füllregeln wird in einem späteren Kapitel noch eingegangen.
der Titel kann natürlich auch auf die abstrakten Formen selbst bezogen werden oder eben auf verschiedene Kunstauffassungen, die nebeneinander koexistieren können wie auch Aussprachen von Wörtern oder allgemeiner Dialekte oder die Interpretationen von Kunstwerken. Die im Element desc vorhandene Beschreibung mag weitere Möglichkeiten zur Deutung eröffnen...

[Bearbeiten] A, a

Mittels 'A' oder 'a' werden elliptische Bögen angegeben. Die Kommandos A und a dürfen nicht in den tiny-Versionen verwendet werden, für diese wären die dann zum Beispiel durch einen Kurvenzug mit kubischen Pfadsegmenten anzunähern.

Beispiele zur Verwendung und zur Bedeutung der Parameter von 'A', beziehungsweise 'a':

• Pfadkommando A.
• Pfadkommando a.

Bedeutung der Parameter der Pfadkommandos 'A' und 'a':
A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Der elliptische Bogen startet am aktuellen Punkt und endet bei (x,y), bei a entsprechend relativ zum Anfangspunkt verschoben um (x,y).
rx und ry sind die halben Hauptachsen der Ellipse.
x-axis-rotation bezeichnet den Winkel in Grad, um den die Halbachse rx aus der x-Richtung gedreht wird.

In der Regel gibt es dann noch vier Möglichkeiten, Anfangs- und Endpunkt mit einem elliptischen Bogen zu verbinden. Mit large-arc-flag '1' wird von zwei Bögen jener mit der größeren Bogenlänge gewählt, für '0' der mit der kleineren.

Mit sweep-flag wird die Zeichenrichtung des Bogens gewählt.
Mit '1' wird mit positivem Winkel gedreht (In SVG ist der Winkel zwischen der x-Richtung und der y-Richtung +90 Grad, entsprechend der zwischen der x-Richtung und der negativen y-Richtung -90Grad).
Mit '0' wird mit negativem Winkel gedreht.

Für elliptische Bögen gibt es einige häufig verwendete Parametrisierungen. Die in SVG verwendete Endpunktnotation ist nur praktisch für Pfade, wie sie im Attribut d auftreten. Eine Umrechnung von den üblichen Parametrisierungen in die Endpunktnotation und umgedreht ist im Anhang der Spezifikation verfügbar.

Eine häufige Parametrisierung ist die Zentraldarstellung. Die sieht wie folgt aus:
e(s) = D(φ) (rx cos(s), ry sin(s)) + c
Dabei ist D(φ) eine Drehung um den Winkel φ, rx und ry sind die Hauptachsen der Ellipse und c der Mittelpunkt der Ellipse. Der Parameter s beginnt beim Startwinkel θ und läuft um den Winkel δ weiter.
Als Ableitung ergibt sich offenbar:
de(s)/ds = D(φ) (- rx sin(s), ry cos(s))
Mittels einer Transformation kann aus e(s) das jeweilige Pfadkommando bestimmt werden.

Für elliptische Bögen gibt es auch Darstellungen in Polarkoordinaten (r, θ=s), etwa
r(s) = p/(1 + e cos(s))
und die Ableitung:
dr(s)/ds = - p e sin(s) / (1 + e cos(s))²
Alternativ kann auch einfach durch Verschieben aus der Zentraldarstellung eine Darstellung gewonnen werden:
r(s) = rx(1 - e cos(s))
mit der Ableitung:
dr(s)/ds = rx e sin(s)
wobei für SVG letztlich ohnehin wieder auf kartesische Koordinaten umgerechnet werden muß:
e(s) = r D(φ) (cos(s), sin(s)) + f
und die Ableitung
de(s)/ds = r D(φ) (-sin(s), cos(s)) + dr/ds * D(φ) (cos(s), sin(s))
Dabei ist rx = p/(1-e²)
ry = p/(1-e²)^1/2
Oder
p = ry²/rx
e = (1 - (ry/rx)² )^1/2

[Bearbeiten] Konversion zwischen Bézierkurven

Eine Konversion von linearen und quadratischen Kurven in kubische Kurven ganz praktisch sein. Dies ist zum Beispiel für Animationen der Fall, weil es nicht zulässig ist, Kommandos zwischen zwei Animationsschritten zu wechseln. Auch sonst kann es zu Vereinfachungen in der Handhabung führen, wenn nur kubische Bézierkurven verwendet werden. Erneut sind oben genannte Parametrisierungen und die Formel für die Ableitungen der Schüssel für die Konversion. Anfangs- und Endpunkt gleich bleiben und ebenfalls die Ableitung dort. Dann ergibt sich:

Konversion L nach Q oder C mit i, f Anfangs- und Endpunkt der Kurve:
M i L f = M i Q (i+f)/2, f
M i C (2i+f)/3, (i+2f)/3, f
Offenbar ist sogar jede quadratische Kurve mit einer Zahl a zwischen 0 und 1 und folgender Form eine Lösung des Problems:
M i L f = M i Q ( (1-a)i + a f), f
Entsprechend mit zwei Zahlen a, b und 0 <= a <= b <= 1
M i C ((1-a)i + a f), ((1-b)i + b f), f

Konversion Q nach C (p Kontrollpunkt):
M i Q p, f = M i C (2p+i)/3, (2p+f)/3, f
Auch hier gibt es weitere Möglichkeiten, die Berechnung bleibt dem Leser zur Übung überlassen.

Beispiel: Pfadkonversionen.
Konversion von einem geraden Pfadsegement zu quadratischen und kubischen Pfadsegmenten und von einem quadratischen zu einem kubischen Pfadsegment.

[Bearbeiten] Weglänge

Nützlich für verschiedene Anwendungen ist die Kenntnis der Weglänge einer Kurve. Dies kann zum Beispiel hilfreich sein, um die Eigenschaft stroke-dasharray gezielt einzusetzen, einschließlich des Zeichnens eines Pfades. Auch kann damit die Bewegung eines Objektes entlang des Pfades mit animateMotion entlang eines Pfades detailliert geplant werden. Ebenfalls interessant kann die Kenntnis der Weglänge werden, wenn Text entlang eines Pfades angeordnet werden soll.

Offenbar ist die Länge eines Pfades die Summe der Längen der Fragmente. Wird mittels 'M' oder 'm' zu einem neuen Unterpfad gesprungen, so trägt dieser Sprung nicht zur Pfadlänge bei.

Ist k(s) wie oben angegeben eine Parametrisierung eines Pfadsegmentes mit s von 0 bis 1, so ist die allgemeine Definition der Weglänge eines zweidimensionalen Pfades mit s von 0 bis f (von 0 bis 1), kx und ky jeweils die x- und y-Komponente des Pfades:
w(f):= ₀∫^f ds ((dkx/ds)² + (dky/ds)²)^1/2

Bei einer geraden Kurvensegment ist das Ergebnis offenbar trivial, die gesamte Weglänge ist der Betrag des Differenzvektors, kurz der Euklidische Abstand oder als Formel für den Anteil f:
w(f) = f * ((kx(0)-kx(1))² + (ky(0)- ky(1))²)^1/2

Bei einer quadratischen Kurvensegment gibt es eine nicht triviale analytische Lösung des Integrals, eine Formel, welche eine Wurzelfunktion und den Logarithmus enthält.

Bei kubischen Kurven und Ellipsenbögen hingegen ergibt sich eine Lösung mit elliptischen Integralen, die normalerweise dann eher numerisch zu lösen sind.

Mittels eines Darstellungsprogrammes des eigenen Vertrauens und der Eigenschaft stroke-dasharray kann die von diesem Darstellungsprogramm berechnete Länge für eine Kurve ebenfalls geschätzt werden, dazu wird stroke-dasharray als Maßstab verwendet. Liegt die Kurvenlänge zum Beispiel in der Größenordnung 1000, so kann angegeben werden: stroke-dasharray="90,10". Daraus ergibt sich dann eine Unterteilung in Abschnitten von 100. Ist die resultierende Abschätzung zum Beispiel 'zwischen 1250 und 1300', so kann der Maßstab verfeinert werden: stroke-dasharray="1249,1,9,1,9,1,9,1,9,1,9,1". Und so weiter, bis ein ausreichend genaues Ergebnis erreicht ist.
Praktische Probleme bei der Methode können auftreten, wenn der Pfad aus mehreren Unterpfaden besteht, weil es da je nach Darstellungsprogramm Implementierungsmängel geben kann (statt daß stroke-dasharray durchläuft, wird es mit jedem Unterpfad neu begonnen). Deswegen kann es notwendig sein, die Länge eines jeden Unterpfades einzeln zu bestimmen.

Beispiel: Weglänge einer Kurve abschätzen durch Verwendung von stroke-dasharray als einfachen Maßstab.
Es sind drei Maßstäbe übereinandergelegt. Um den letzten, hellgelben abzulesen, muß gegebenenfalls das Pfadende rechts unten im Darstellungsprogramm vergrößert werden.