XHTML SVG CSS PHP

Dr. O. Hoffmann

SVG- und PHP-Labor

Was im Leben uns verdrießt,
man im Bilde gern genießt.
Johann Wolfgang von Goethe

Skalierbare Vektorgraphik - Maldienste...

Maldienste (englisch: paint server) dienen dazu, Flächen und Ränder mit komplizierteren Strukturen als direkten Farbangaben zu füllen, dies sind vor allem Farbverläufe und Muster. Obgleich dafür einige Elemente verfügbar sind, gibt es etwa auch andere als periodische Muster, die manuell erstellt werden müssen, wobei PHP ausgezeichnet helfen kann, dazu gibt es ebenfalls Beispiele.
Bei komplizierteren Farbverläufen bieten die Versionen 1.1 und 1.2 von SVG hingegen nicht viel Hilfe. Hier ist zwangsläufig viel Handarbeit gefragt und die Dateien können recht umfangreich werden.

Der jeweilige Maldienst wird mit speziellen Elementen konstruiert und mit einem Fragmentidentifizierer versehen. Über letzteren wird dann der Dienst vom betroffenen fill oder stroke referenziert. Ist der Fragmentidentifizierer des Maldienstes etwa id = "bsp", so wird referenziert mit zum Beispiel fill = "url(#bsp)".

Feste Farben

SVG tiny 1.2 bietet die Möglichkeit, feste Farben zu definieren, was deutlich über die Möglichkeiten von der Eigenschaft color hinausgeht, die mit dem Farbwert currentColor referenziert werden kann, und die bereits in SVG 1.1 verfügbar ist.

Mittels des Elementes solidColor können in SVG tiny 1.2 Farbangaben Namen zugeordnet werden. Das ist vor allem nützlich, wenn die Farbangaben einer großen Zahl von Elementen verändert oder animiert werden soll, die mit anderen Elementen gemischt sind. Mittels der Eigenschaft solid-color wird der Farbwert festgelegt, mittels der Eigenschaft solid-opacity zusätzlich der Wert für die Teiltransparenz.

Dazu ein Beispiel entsprechend dem für Klassen und CSS.
Beispiel solidColor (Quelltext zum Beispiel solidColor).

Und ein Beispiel mit Animation:
Beispiel solidColor mit Animation (Quelltext zum Beispiel solidColor mit Animation).

Nachvollziehbar ist dieser einfache neue Maldienst zum Beispiel mit Opera ab Version 9.50.

Farbverlauf oder Gradient

SVG stellt zwei Typen von Farbverläufen als Alternativen zu Farben für fill und stroke zur Verfügung. Bei dem einen handelt es sich um einen linearen Farbverlauf linearGradient, beim anderen um einen radialen radialGradient. Einheiten werden entweder in relativen Koordinaten angegeben, bezogen auf das zu füllende Element (gradientUnits="objectBoundingBox") oder bezogen auf das umgebende Koordinatensystem (gradientUnits="userSpaceOnUse"). Das Attribut spreadMethod entscheidet, ob der Farbverlauf am Ende des definierten Bereiches auf einem Randwert verbleibt (Voreinstellung, pad), sich in gleicher Weise wiederholt (repeat) oder in umgekehrter Reihenfolge wiederholt wird (reflect). spreadMethod ist in SVG tiny 1.2 nicht verfügbar. In SVG tiny 1.1 sind Farbverläufe gar nicht verfügbar.

Ähnlich bei den Angaben zu einer Linie wird beim linearen Verlauf Anfangs- und Endpunkt angegeben, um die Richtung des Verlaufes festzulegen. Dazu dienen die Attribute x1, y1, x2, y2.

Beim radialen Verlauf entsprechen die Angaben eher denen eines Kreises - Mittelpunkt cx, cy, Radius r, dazu kommen fx und fy für den sogenannten fokalen Punkt des Verlaufes - der Startpunkt des Verlaufes, das Ende des Verlaufes liegt hingegen auf einem Kreis mit dem Radius r um den Mittelpunkt (cx, cy). Liegt (fx, fy) außerhalb des Kreises, so soll dies vom Darstellungsprogramm so korrigiert werden, daß der neue fokale Punkt auf dem Schnittpunkt des Kreises mit der Verbindungslinie von (cx, cy) und (fx, fy) liegt. Opera 8 hat da einen kleinen Fehler, der ab Version 9 behoben ist. fx und fy sind in SVG tiny 1.2 nicht verfügbar.

Ähnlich den Transformationen können mit dem Attribut gradientTransform die gleichen Transformationen auf einen Farbverlauf angewendet werden. Auch das ist in SVG tiny 1.2 nicht verfügbar.

Der eigentliche Farbverlauf wird definiert mit dem umschlossenen stop-Element. Mit dem Attribut offset wird die relative Position angegeben, für die eine Angabe gemacht werden soll. Mittels der Attribute stop-color und stop-opacity wiederum werden für diese offset-Position Farbe und Transparenz festgelegt. Die Position muß monoton von stop zu stop steigen. Haben zwei aufeinanderfolgende den gleichen Wert, aber andere Angaben für die die Farbe, so gibt es offenbar an der Stelle einen diskreten Sprung.

Linearer Farbverlauf (Quelltext zum linearen Farbverlauf),
radialer Farbverlauf (Quelltext zum radialen Farbverlauf).

Gucken wir uns die Anordnung der jeweiligen Radien bei einem radialem Verlauf nochmal genauer an:
radialer Farbverlauf - Positionen (Quelltext zum radialen Farbverlauf - Positionen).
Sei r der Radius, c = (cx,cy) das Zentrum des Kreises, f=(fx,fy) der fokale Punkt.
Falls r > |c - f| so gilt:
Der Radius beim offset o (in Anteilen von 1) ist R = o * r.
Der Mittelpunkt liegt bei P = (1 - o) f + o c .
Sonst findet eine Korrektur statt, statt f wird f' verwendet mit
f' = c + (f - c) r / |f - c|
P = (1 - o) f' + o c.

Spannender wird die Angelegenheit, wenn man mehrere Rechtecke mit teiltransparenten Farbverläufen übereinanderlegt. Durch geschickte Kombination kann man so auch nicht triviale Verläufe zwischen verschiedenen Farben in der Ebene hinbekommen, das klappt bereits mit den relativ einfachen linearen Verläufen:
Mehrfarbiger linearer Farbverlauf (Quelltext zum mehrfarbigen linearen Farbverlauf).
Mehrfarbiger linearer Farbverlauf (2) (Quelltext zum mehrfarbigen linearen Farbverlauf (2)).

Mit radialen und transformierten Verläufen lassen sich noch kompliziertere Strukturen erzeugen. Mehrfarbige radiale Farbverläufe (Quelltext zu mehrfarbigen radialen Farbverläufen).
Allerdings braucht es einige Rechnerei, um so einen vorgegebenen nicht trivialen Farbverlauf zu erzeugen. Da zwischen zwei Werten von stop-color affin interpoliert wird, kann es sinnvoll sein, für einen Verlauf viele berechnete stop-color anzugeben. Leider gibt es nicht wie für Kurven oder Animationen spline-Interpolation, das muß also explizit berechnet und genähert werden.

An der Stelle kommt dann also wieder für diverse Probleme PHP zum Einsatz, etwa um Wellen darzustellen: ebene Welle (Quelltext zu ebener Welle).
Interessanter ist natürlich eine klassische Überlagerung ebener Wellen (Quelltext zu klassischen Überlagerung ebener Wellen).

Radiale Wellen lassen sich ebenso erzeugen und überlagern:
radiale Welle (Quelltext zur radialen Wellen)
klassische Überlagerung radialer Wellen (Quelltext zu klassischen Überlagerung radialer Wellen)
klassische Überlagerung radialer Wellen (2) (Quelltext zu klassischen Überlagerung radialer Wellen (2)).

Ein recht einfache Anwendung ist auch die Überlagerung über ein Bild, um einen Verlauf zu einer einfachen Farbe hinzubekommen. Bei einem Verlauf zwischen zwei Bildern wird der Verlauf hingegen als Maske verwendet, welche dann auf ein Bild angewendet wird.
radialer Farbverlauf und Bild - weicher Übergang (Quelltext zum radialen Farbverlauf und Bild - weicher Übergang).

Farbverläufe werden manchmal auch genutzt, um die diffuse Beleuchtung von dreidimensionalen Objekten zu simulieren, um die Illusion eines dreidimensionalen Objektes realistischer erscheinen zu lassen. Da die Projektionsmethoden zur perspektivischen Darstellung mehrdeutig sind, lassen sich so selbst Objekte realistisch darstellen, die es als reale dreidimensionale Objekte gar nicht geben kann:
Farbverlauf als Beleuchtungseffektillusion (Quelltext zum Farbverlauf als Beleuchtungseffektillusion).

Farbfeld

Ist der Farbverlauf deutlich komplizierter als eine Kombination einiger linearer oder radialer Farbverläufe, so muß in den Versionen 1.1 und 1.2 von SVG improvisiert werden. Ähnlich wie bei den Parkettierungen der nächsten Abschnitte empfiehlt es sich, die Fläche mit vielen Vielecken mit unterschiedlicher Farbe zu füllen. Unter den regulären Polygonen kommen vor allem Dreieck, Quadrat und Hexagon in Frage. Beim Quadrat hat man eine einfache Parametrisierung der Positionen der Quadrate, Dreiecke eignen sich besonders für ungleiche Aufteilungen, die sich an der Struktur orientieren. Der Vorteil von Sechsecken liegt darin, daß zum einen die Winkel flacher sind, für eine gleichmäßige Parkettierung die beste Auflösung erreicht wird, was auch der Grund für Bienenwaben ist, wo es hinsichtlich der Effizienz die beste Materialausnutzung ermöglicht.

Es gibt unterschiedliche Möglichkeiten, wie man die einzelnen Elemente einer hexagonalen Parkettierung adressieren kann. Bleibt man bei einer ähnlichen Adressierung mit Spalten und Zeilen wie bei Quadraten, so ist in einer Richtung jeweils eine Verschiebung vorzunehmen, zum Beispiel bei jeder zweiten Spalte der um den halben Punktabstand, in der anderen Richtung, also der Zeile ist dafür der Punktabstand um den Faktor Wurzel aus 3/4 zu stauchen. So bekommt man die Mittelpunkte der Kacheln. Der Abstand oder Radius vom Mittelpunkt zu jeder Ecke einer hexagonalen Kachel ist eigentlich der Punktabstand. Aufgrund von Rundungsartefakten von Darstellungsprogrammen empfiehlt es sich allerdings, die Kachel etwas größer zu machen.

Um zu vermeiden, daß Kanten und Ecken deutlich sichtbar werden, empfiehlt es sich, einen Gaußfilter über die komplette Parkettierung zu legen. Dabei reicht es aus, die Standardabweichung etwa auf die halbe Kachelgröße zu setzen.

Die so erstellte SVG-Datei enthält natürlich hochgradig redundanten Inhalt als Quelltext, daher ist es immer sehr effizient, die Datei zu komprimieren, wie für SVG als Möglichkeit bereits vorgesehen (gzip). Typisch kann so die Datei um mehr als eine Größenordnung verkleinert werden.

Das folgende Beispiel zeigt ein zufälliges Farbfeld, zum Beispiel eine Landschaft oder ein Potential repräsentierend. Zusätzlich kann der Gradient des Potentials angezeigt werden, also die Richtung des stärksten Anstiegs, welcher näherungsweise grob aus den benachbarten Kacheln berechnet wird.
Die zufällige Landschaft entsteht aus einer anfänglich kompletten Zufallsverteilung. Im Rahmen einer Iteration wird dann allerdings für jeden Punkt in jedem Iterationsschritt eine Mittlung über die sechs benachbarten Punkte durchgeführt. Der Gradient wird nach dem letzten Iterationsschritt bestimmt. Je mehr Iterationsschritte durchgeführt werden, desto glatter wird natürlich die Zufallslandschaft, es bleiben also nur wenige Extrema übrig, wenn viele Iterationen durchgeführt werden.

Der gewählte Farbverlauf folgt etwa dem sichtbaren Spektrum des Lichtes, wobei die Ränder mit violett und dunkelbraun sicher etwas karikiert sind. Violett steht für die tiefsten Stellen oder Senken, dunkelbraun für die höchsten Stellen oder Hügel.

Farbfeld (Quelltext zum Farbfeld).
Parameter:
title: Titelinformation pro Kachel anzeigen? (0: nein, sonst ja)
qtyp: Typ Gradientendarstellung (0-5 oder -1: ohne)
kr: Kachelradius (nicht so relevant, weil sich die Größe des Bildes ohnehin an den verfügbaren Darstellungsbereich anpaßt), typisch 10
ds: Skalierungsfaktor Gradientensymbol, typisch kr/30
dw: Zusätzlicher Drehwinkel in Grad für das Gradientensymbol
gauss: Standardabweichung Gaußfilter, typisch kr, bei 0 abgeschaltet
ftyp: Typ der Farbskala (1 bis 15 oder -15 bis -1 für umgedrehte Skala)
fmin, fmax: Farbwert für Potential kleiner als das Minimum, beziehungsweise Maximum (bei diesem Zufallsfeld sollte dies nicht auftreten, weil es auf den zulässigen Bereich skaliert ist)
iter: Anzahl der Iterationen der Zufallslandschaft. typisch 20 (nicht mehr als 200)
selbst: Gewichtung gegenüber den sechs Nachbarn, die jeweils mit 1 berücksichtigt werden, Voreinstellung ist 1
xv,xb,yv,yb: Bereich von bis für x, beziehungsweise y, ganze Zahlen, aus dem Kachelradius ergibt sich der Abstand der Punkte. Die Werte sind nach oben und unten vom Betrag her auf maximal 200 begrenzt
Farbfeld mit Parametern

Muster und Parkettierungen

Mustererstellung

Mittels des Elementes pattern werden Muster definiert. Die Notation schließt weitgehend an die des Farbverlaufes an, die Attribute x, y, width und height verstehen sich von selbst. patternUnits = "userSpaceOnUse" oder "objectBoundingBox" steht für das Koordinatensystem, bei letzterem also in Anteilen von 1, ansonsten in dem Koordinatensystem, in dem das Muster eingesetzt wird. patternContentUnits = "userSpaceOnUse" oder "objectBoundingBox" steht für den Inhalt.
Ähnlich den Transformationen können mit dem Attribut patternTransform die gleichen Transformationen auf ein Muster angewendet werden.
Bei pattern wird die Periodizität des Musters erreicht, indem das Grundrechteck (die viewBox) periodisch in die x- und y-Richtung kopiert wird.
Sicherlich können damit keine aperiodischen Flächenfüllungen oder Parkettierungen wie die vom Typ Penrose (siehe unten) realisiert werden, letztlich können damit aber alle periodischen Typen von Flächenfüllungen realisiert werden, weil die periodischen Typen letztlich alle auf Translation, Rotation und Spiegelung zurückzuführen sind. Die Flächenfüllungen, beziehungsweise die zugehörige viewBox müssen aber nicht zwangsläufig trivial zu bestimmen sein.
Muster sind nicht Bestandteil von SVG tiny und werden auch von Opera 8 nicht dargestellt, von Opera 9 schon.
Gucken wir uns erst einmal ein einfaches Beispiel an: Muster (Quelltext zum Muster).
Und noch ein Muster mit Animation (Quelltext zum Muster mit Animation).

Eine Strategie der Mustererstellung sei an folgendem Beispiel erläutert:
Mustererstellung (Quelltext zur Mustererstellung)
Zunächst wird die Basisstruktur erstellt - hier ein Sechseck oder eine Bienenwabe links oben in magenta. Das beabsichtigte Grundmuster wird mit ausreichend manuell angeordneten Kopien (hier rot) erstellt. In diesem Grundmuster wird ein rechteckiger Ausschnitt gesucht, beziehungsweise berechnet, der sich als periodische Fortsetzung eignet (schwarz). Dies Rechteck wird sodann als Muster verwendet (große Fläche). Mittels patternTransform kann zudem das Grundmuster noch transformiert werden. Das Grundmuster kann nach erfolgreicher Erstellung natürlich einfach ins Element defs oder pattern verschoben werden, damit es nicht direkt angezeigt wird.
Variation zur Mustererstellung (Quelltext zur Variation zur Mustererstellung)
und ein weitere Muster mit gleichseitigen Drei-, Vier- und Sechsecken (Quelltext zum Muster mit gleichseitigen Drei-, Vier- und Sechsecken);
Muster mit gleichseitigen Drei- und Sechsecken (Quelltext zum Muster mit gleichseitigen Drei- und Sechsecken);
Muster mit Rauten (Quelltext zum Muster mit Rauten);
Muster mit gleichseitigen Vier- und Dreiecken (Quelltext zum Muster mit gleichseitigen Vier- und Dreiecken);
Muster mit gleichseitigen Vier- und Achtecken (Quelltext zum Muster mit gleichseitigen Vier- und Achtecken).

Periodische Parkettierung und ebene kristallographische Gruppen

Die Muster können anhand vorhandener Symmetrien in Gruppen eingeteilt werden. Es gibt insgesamt siebzehn verschiedene Gruppen, diese werden ebene kristallographische Gruppen genannt. Die verfügbaren Operationen sind Translation, Drehung und Gleitspiegelung.

Die einfachste Gruppe p1 liegt vor, wenn nur eine Translationssymmetrie vorliegt: p1-Gruppe.
Mittels einer einfachen Rotation der (asymmetrischen) Grundfigur um 180 Grad und eine Translation bekommt man die p2-Gruppe.
Mittels einer einfachen Achsenspiegelung der (asymmetrischen) Grundfigur und eine Translation bekommt man die pm-Gruppe.
Mittels zweier Gleitspiegelungen der (asymmetrischen) Grundfigur bekommt man die pg-Gruppe.
Abwechselnd Spiegelachsen und Gleitspiegelachsen führen zur cm-Gruppe.
Zwei Spiegelachsen senkrecht zueinander und vier zweizählige Rotationszentren führen zur pmm-Gruppe.
Demgegenüber ergibt nur eine Spiegelachse senkrecht mit Gleitspiegelungen senkrecht dazu und zwei zweizählige Rotationszentren die pmg-Gruppe.
Mit zwei zweizähligen Rotationszentren und Gleitspiegelungen senkrecht zueinander entsteht die pgg-Gruppe.
Mit zwei Spiegelachsen senkrecht zueinander und ein zweizähliges Rotationszentrum (nicht auf einer Spiegelachse) entsteht die cmm-Gruppe.
Mit einem vierzähligen und einem zweizähligen Rotationszentrum entsteht die p4-Gruppe.
Mit zwei vierzähligen Rotationszentren und Spiegelachsen (wagerecht, senkrecht, beide Diagonalen) entsteht die p4m-Gruppe.
Eine weitere Gruppe hat zwei vierzählige Rotationszentren, die Spiegelbilder voneinander sind, aber nur Spiegelachsen in zwei Richtungen, die senkrecht zueinander sind. Es gibt zwei zweizählige Rotationszentren in den Schnittpunkten der Spiegelachsen. Ferner gibt es Gleitspiegelachsen parallel zu den Spiegelachsen und zwischen ihnen und auch in einem Winkel von 45 Grad dazu: p4g-Gruppe.
Mit drei verschiedenen dreizähligen Rotationszentren, aber ohne Spiegel- oder Gleitspiegelachse ergibt sich die p3-Gruppe.
Eine weitere Gruppe hat drei verschiedene dreizählige Rotationszentren, Spiegelachsen sind drei Seiten eines gleichseitigen Dreiecks. Jedes Rotationszentrum liegt auf einer Spiegelachse, zusätzlich gibt es Gleitspiegelachsen in drei verschiedene Richtungen, welche mittig zwischen zwei parallelen Spiegelachsen lokalisiert sind: p3m1-Gruppe.
Folgende Gruppe hat drei verschiedene dreizählige Rotationszentren, wobei zwei Spiegelbilder voneinander sind. Die Spiegelachsen liegen in drei unterschiedlichen Richtungen. Wenigstens ein Rotationszentrum liegt nicht auf einer Spiegelachse. Zusätzlich gibt es Gleitspiegelachsen in drei verschiedene Richtungen, welche mittig zwischen zwei parallelen Spiegelachsen lokalisiert sind: p31m-Gruppe.
Bei der nächsten Gruppe gibt es ein sechszähliges Rotationszentrum und zwei dreizählige Rotationszentren und drei zweizählige Rotationszentren. Spiegel- oder Gleitspiegelachsen gibt es nicht: p6-Gruppe.
Eine hochsymmetrische Gruppe ist die folgende mit einem sechszähligen Rotationszentrum und zwei dreizähligen Rotationszentren und drei zweizählige Rotationszentren. Zudem gibt es sechs Spiegelachsen und sechs Gleitspiegelachsen: p6m-Gruppe oder p6m-Gruppe (mit simplen Kreisen).

Deutlich zu sehen sind mit dem adobe-plugin und Opera (besonders ab Version 9.50) etwa deutlich Mängel in der Darstellung von Mustern, die vom Autor auch nicht immer kaschiert werden können. Die Implementierung im Batik/Squiggle scheint hingegen sorgfältiger und vertrauenerweckend zu sein...
Die relativ schwammigen Muster in allen Opera-Versionen kann man umgehen, indem man die Grundfigur sehr groß auslegt und dann etwa mittels patternTransform erst passend verkleinert. Man vergleiche etwa obiges Beispiel der Gruppe p31m mit folgender für Opera optimierter Version: p31m-Gruppe (Alternative). Mit Farbverläufen fällt der Unterschied weniger deutlich aus, dazu eine andere Version zur p6m-Gruppe (mit simplen Kreisen).
Damit umgeht man allerdings auch nicht die Mängel vom adobe-plugin, die darauf zurückzuführen sind, daß einerseits wie auch bei Opera die Eigenschaft overflow ignoriert wird, andererseits aber das Muster auch nicht präzise positioniert wird oder aber die viewBox mangelhaft erfaßt wird.
Firefox zeigt hingegen einige der Beispiele falsch an, wohl eine falsche Interpretation der viewBox.

Aperiodische Parkettierung (Penrose)

Reale Darstellungen von Parkettierungen sind aufgrund der Endlichkeit des darstellbaren Bereiches zwangsläufig nicht streng periodisch, können aber periodisch fortgesetzt werden. Triviale nichtperiodische Strukturen kann man recht einfach erhalten, indem man eine 'Translationsgruppe' gegenüber der nächsten willkürlich verschiebt. Hinzufügen zufälliger einzelner Elemente mit anderer Ausrichtung zerstört natürlich auch die Periodizität. Andererseits kann ein gegebener Ausschnitt immer selbst als p1-Gruppe aufgefaßt werden, was etwa passiert, wenn Hintergrundgraphiken in CSS wiederholt werden.

Es gibt ferner auch nichtperiodische Parkettierungen mit Grundstrukturen, mit denen auch periodische Parkettierungen möglich sind. Davon zu unterscheiden sind die aperiodischen Parkettierungen, bei deren Grundstrukturen es prinzipiell nicht möglich ist, eine periodische Parkettierung vorzunehmen. Der Versuch, damit Periodizität zu erreichen, führt zwangsläufig dazu, daß die Ebene nicht mehr lückenlos parkettierbar ist. Die entstehenden Strukturen können allerdings eine diskrete Rotationssymmetrie oder Spiegelsymmetrie aufweisen.

Einfache aperiodische Parkettierungen sind die Vorschläge von Penrose, etwa die mit Drachen und Pfeil oder die mit dicker und dünner Raute, die zudem ineinander transformierbar sind. Neben einer lokalen Selbstähnlichkeit haben diese Parkettierungen eine Reihe weiterer interessanter Eigenschaften.

Drachen und Pfeil (englisch: kite and dart) sind Formen, mit denen eine aperiodische Parkettierung der Ebene durchgeführt werden kann. Wie das Paar aus dünner und dicker Raute geht diese Parkettierung auf Penrose zurück. Bei Drachen und Pfeil handelt es sich um Vierecke mit exakt einer Spiegelachse. Drachenformen sind beides, denn das jeweilige Viereck hat jeweils zwei Paare von gleichlangen Seiten. Das Verhältnis von langer zu kurzer Seite entspricht dem Goldenen Schnitt mit der Goldenen Zahl (1+51/2)/2 = 1.618033988... . Beim Drachen handelt es sich um die konvexe Form, beim Pfeil sind demgegenüber die kurzen Seiten nach Innen geklappt. Beim Drachen sind drei Innenwinkel 72 Grad und einer 144 Grad (zwischen den beiden kurzen Seiten). Beim Pfeil ist der Winkel zwischen den langen Seiten 72 Grad, der Außenwinkel zwischen den beiden kurzen Seiten 144 Grad und die beiden übrigen Innenwinkel 36 Grad.

Dazu eine Abbildung mit den beiden Grundformen mit Dekoration zur Vermeidung von verbotenen Kombinationen, von denen auch zwei durchgestrichen dargestellt sind. Ferner sind einige immer wiederkehrende Strukturen dargestellt:
Drachen und Pfeil - Grundformen (Quelltext zu Drachen und Pfeil - Grundformen).
PHP ist hier vor allem nützlich, um die Grundform zu berechnen und die Translationen der Grundformen zur Parkettierung einfacher zu machen. Zur Parkettierung selbst wird vorrangig das Element use wie schon bei den Fraktalen verwendet. Sofern man an dem Muster nicht weiterarbeiten will, kann das Resultat dann einfach statisch abgespeichert werden.
Je nachdem, mit welcher Form man beginnt, ergeben sich unterschiedliche Strukturen. Es muß nicht immer einfach sein, eine Fortsetzung des Musters per Hand zu finden, insbesondere, wenn man eine Rotations- oder Spiegelsymmetrie erhalten will. Ansonsten gibt es Verfahren, Inflation und Deflation genannt, mit dem man die Parkettierung auch berechnen lassen kann, siehe weiter unten.
Die verbotenen Kombinationen können zu einer periodischen Parkettierung führen, besonders einfach ist jene, die sich ergibt, wenn man Drache und Pfeil zu einem Parallelogramm zusammenfügt. Durch einfache Translation entlang der kombinierten Form bekommt man eine periodische Parkettierung. Das ist nur bei diesen symmetrischen Grundformen möglich. Es wird noch ein Beispiel angegeben, wie man komplett asymmetrische Formen erzeugt, die man gar nicht mehr falsch zusammenlegen kann - für diese komplett asymmetrischen Formen gibt es keine periodische Parkettierung und es sind auch keine besonderen Regeln oder Verbote mehr notwendig, um eine periodische Parkettierung zu verhindern.

Zwei handgefertigte Beispiele mit obigen Grundformen, eine konstruktive Methode verwendend:
Drachen und Pfeil (1) (Quelltext zu Drachen und Pfeil - (2))
Drachen und Pfeil (2) (Quelltext zu Drachen und Pfeil - (3)).
Dazu eine Variation mit modifizierten Grundformen, welche die Spiegelsymmetrien aufheben, aber nicht die fünfzählige Rotationssymmetrie bei den Beispielen, wo sie vorhanden ist:
Drachen und Pfeil - modifizierte Grundformen (Quelltext zu Drachen und Pfeil - modifizierte Grundformen)
Drachen und Pfeil modifizierte Grundformen (1) (Quelltext zu Drachen und Pfeil modifizierte Grundformen (1))
Drachen und Pfeil modifizierte Grundformen (2) (Quelltext zu Drachen und Pfeil modifizierte Grundformen (2)).
Solche Deformationen sind recht unproblematisch, solange sich die Kurven nicht selbst überschneiden, dann gibt es Probleme mit der Zeichenreihenfolge in SVG. Das trifft auch zu, wenn die Deformation über den direkten Nachbarn im Muster hinausgeht. Mittels fill-rule="evenodd" ist das Problem vermeidbar, wenn es sich um eine Überschneidung bei derselben Seite handelt. Ansonsten muß man nur beachten, daß benachbarte Stücke die gleiche Kurvenform haben - man kennt das ja von den Parkettierungen von Maurits Cornelis Escher.
Drachen und Pfeil - modifizierte Grundformen (3) (Quelltext zu Drachen und Pfeil - modifizierte Grundformen (3))
Die Deformation ist sogar animierbar:
Drachen und Pfeil animierte Grundformen (Quelltext zu Drachen und Pfeil animierte Grundformen).
Um eine Deformation systematisch zu erzielen, kann man einfach mit einer Strecke in x-Richtung beginnen, diese durch eine kubische Kurve ersetzen und dann die Kurven zu den Grundformen zusammensetzen, wobei man auf die richtige Orientierung achten muß, damit nachher alles zusammenpaßt:
Drachen und Pfeil - komplett asymmetrische Grundformen (Quelltext zu Drachen und Pfeil - komplett asymmetrische Grundformen).
Der Vorteil von asymmetrischen Grundformen liegt auch darin, daß es keine Möglichkeit mehr gibt, sie falsch zusammenzufügen, wie an den Beispielen deutlich zu sehen ist.
Drachen und Pfeil - komplett asymmetrische Grundformen mit Überschneidung (Quelltext zu Drachen und Pfeil - komplett asymmetrische Grundformen mit Überschneidung).
Hier wurde das Problem der Zeichenreihenfolge mittels fill-rule="evenodd" vermieden. Bei Überschneidung von zwei Seiten wird man manuell reparieren müssen, um das gewünschte Muster zu realisieren.

Hilfsskript - asymmetrische Grundformen (Quelltext zum Hilfsskript - asymmetrische Grundformen).
Im Quelltext können jeweils andere Kontrollpunkte angegeben werden. Das Ergebnis kann dann verwendet werden, um bei als Ausgangspunkform für die Deflation zu dienen.
Eine Methode, um eine asymmetrische Form zu erhalten, besteht darin, im ersten Schritt die lange und die kurze Seite durch einen (nahezu beliebigen) Pfad zu ersetzen.
Entspricht zum Beispiel die lange Seite dem Pfad "M0 0 100 0", so können dazwischen Kontrollpunkte eingefügt werden, um eine kubische Kurve zu erhalten oder auch etwas komplizierteres. Eine kurze Seite ist dann wegen des festliegenden Seitenverhältnisses ein Pfad "M0 0 61.803398875 0".
Durch entsprechende Drehungen und Verschiebungen können jeweils zwei lange und zwei kurze Pfade zu Drachen und Pfeil zusammengesetzt werden. Dies ist mit den blauen Einzelpfaden angedeutet.
Statt nun die Einzelpfade direkt malen zu lassen, sind die Transformationen mit einem Skript oder manuell auf die Punkte und Kontrollpunkte anzuwenden. Anschließend sind die so transformierten Pfade passend zu den Formen zusammenzusetzen. Zu beachten ist, daß sich die Reihenfolge der Notation bei der Zusammensetzung ändern kann. Das Endergebnis, hier die roten Pfade, müssen dann jedenfalls mit den Einzelpfaden übereinstimmen.
Einfache Selbstüberschneidungen können verwendet werden, wenn fill-rule="evenodd" gesetzt ist. Komplexere Überschneidungen über die nächste Grundform hinaus können jedoch problematisch sein.
Auch die Ecken können verschoben werden, was jedoch Auswirkungen auf zwei Seiten gleichzeitig hat und daher etwas schwieriger zu berücksichtigen ist.

Folgendes Beispiel zur Veranschaulichung der Deflationsmethode:
Drachen und Pfeil aufgeteilt (Quelltext zu Drachen und Pfeil aufgeteilt).
Im Hintergrund in blau-violett sind die Grundformen Drachen und Pfeil dargestellt. Die Grundform wird in verkleinerte Duplikate zerteilt, hier wieder Drachen und Pfeil, blau, grün und rot gerandet. Diese ersetzen letztlich die Grundform und sind hier so angeordnet, daß sie erst korrekt zusammengesetzt eine Parkettierung ergeben.
Bei der Deflationsmethode werden die kleineren Duplikate abermals durch verkleinerte Duplikate ersetzt, und so fort, bis das Muster fein genug erscheint.
Prinzipiell ist es egal, auf welche Figur die Deflation letztlich angewendet wird. Um die endliche Fläche des Anzeigebereiches aber komplett und effektiv zu parkettieren, bietet es sich an, eine Figur zu wählen, die keine Teile hat, die allzu weit über den Anzeigebereich hinausragen, um Rechenleistung und Arbeitsspeicher des Darstellungsprogrammes nicht zu vergeuden, zum Beispiel eine Sonne.
Statt Drachen und Pfeil selbst zu verwenden, können auch die Rauten verwendet werden, um die Grundformen zu ersetzen und dann im nächsten Deflationsschritt wieder verkleinerte Drachen und Pfeile, um diese zu ersetzen.

Andere Variante der Deflationsmethode:
Drachen und Pfeil in Dreiecke aufgeteilt (Quelltext zu Drachen und Pfeil in Dreiecke aufgeteilt).
Im Hintergrund in blau und orange sind die Grundformen Drachen und Pfeil dargestellt. Die Grundform wird in verkleinerte Duplikate zerteilt, hier offene Dreiecke, Strich in blau, grün, rot und magenta. Diese ersetzen letztlich die Grundform und sind hier so angeordnet, daß sie korrekt zusammengesetzt eine Parkettierung ergeben.
Je nachdem, wie die Dreiecke zusammengesetzt (oder eingefärbt) werden, ergibt sich eine Parkettierung mit Dreiecken, Rauten oder mit Drachen und Pfeil.

Hier ein Beispiel für die Deflationsmethode:
Drachen und Pfeil (3) (Quelltext zu Drachen und Pfeil (3)).
Alle dreißig Sekunden werden dann noch ein paar weitere Grundformen per Animation vorgegeben.
Hier werden jeweils halbe Grundelemente verwendet, diese werden wiederum in einer bestimmten Weise durch ganze oder halbe Grundelementen ersetzt, die um das Reziproke der goldenen Zahl verkleinert wurden. Das Ganze passiert rekursiv. Aufgrund der massiven Anwendung von use-Elementen kann das Darstellungsprogramm ein paar Sekunden brauchen, bis das eigentlich recht kleine Bild dargestellt wird. Bei alten Prozessoren kann es zu Problemen kommen, wenn die Rekursion zu oft wiederholt wird, letztlich also zuviele Kopien vom Programm verwaltet werden. Bei der Deflationsmethode zeigt sich auch wieder die Analogie zu Fraktalen. Allerdings wird bei der Deflation nur der letzte Rekursionsschritt wirklich dargestellt.
Der Ansatz verwendet jeweils halbe Drachen und Pfeile, es geht auch mit ganzen:
Drachen und Pfeil (4) (Quelltext zu Drachen und Pfeil (4)).
Und es geht auch mit einer asymmetrischen Grundform:
Drachen und Pfeil (4) (Quelltext zu Drachen und Pfeil (4)).
Hier wird dann auch noch der sichtbare Ausschnitt animiert, damit man sich die Struktur besser im Detail ansehen kann.
Dies ist die Variante mit Überschneidungen:
Drachen und Pfeil (5) (Quelltext zu Drachen und Pfeil (5)).

Es ist somit auch recht einfach möglich, bei der Deflationsmethode zu dem Typ mit den Rauten zu wechseln:
Rauten-Typ (Quelltext zum Rauten-Typ),
oder wenn man so will, beides zu mischen:
Rauten-Typ (2) (Quelltext zum Rauten-Typ (2)).
Eine andere Interpretation besteht darin, daß man es eigentlich nur mit zwei verschiedenen Dreiecken zu tun hat und nicht mit Vierecken: Dreiecks-Typ (Quelltext zum Dreiecks-Typ).

Eine interessante und öfter diskutierte Konstellation von Drachen und Pfeil ist der sogenannte Zehnfüßler (oder Dekapus oder lateinisch/englisch auch decapod). Das Muster bildet ein gleichseitiges Zehneck und hat nur genau eine Spiegelachse (hier in x-Richtung).
Zehnfüßler (Quelltext zum Zehnfüßler).
In der Mitte kann man mit etwas Phantasie den Körper des Zehnfüßlers erkennen - ein Käfer oder eine Fledermaus. Warum der Zehnfüßler seinen Namen trägt, kann man in der Fortsetzung zu einem sogenannten Wagenrad (englisch: cartwheel) erkennen. Bei der Fortsetzung gibt es Bereiche, Strahlen genannt, die eine zehnzählige Rotationssymmetrie aufweisen und sogenannte Speichen, die dazwischen liegen und im Mittel immer gleiche Breite ausweisen. Es gibt zwei Arten von Speichen, die zueinander Spiegelbilder sind. Die Strahlen sind ihr eigenes Spiegelbild. Die Speichen bilden dann gewissermaßen die Füße oder Gliedmaßen des Zehnfüßler.
Wagenrad (Quelltext zum Wagenrad).
Die Muster sind in den verschiedenen Bereichen leicht aufgehellt, um die Strukturen besser kenntlich zu machen.
Das Muster kann natürlich leicht weiter fortgesetzt werden:
Wagenrad - Fortsetzung (Quelltext zur Wagenrad - Fortsetzung).
Auf den Zehnfüßler kann auch die Deflationsmethode angewendet werden und mit jedem Schritt dreht sich der zentrale Zehnfüßler um 180 Grad, um ihn herum entsteht das Wagenrad, beziehungsweise die Fortsetzung davon: Wagenrad - Deflation animiert (Quelltext zur Wagenrad - Deflation animiert).
Die Mitte der Struktur ist mit einem weißen Kreis zur Hilfe gekennzeichnet, die Animation zeigt jeden Deflationsschritt, kehrt dann allerdings wieder in eine Inflation um. Opera verweigert bei dieser Animation die Mitarbeit, die ist jedoch mit dem adobe-plugin oder mit Batik/Squiggle nachvollziehbar, Batik/Squiggle friert allerdings bei einem großen Deflationsgrad ein.
Wagenrad nach Deflation (Quelltext zum Wagenrad nach Deflation).

Interessant ist beim Wagenrad, daß auch eine falsche Anordnung der Speichen zu einer aperiodischen Parkettierung führt:
falsches Wagenrad - 'Quallenballet' (Quelltext zum falschen Wagenrad - 'Quallenballet').
Eine Deflation ist allerdings nur mit dem Dreieckstyp möglich, was man bei genauem Hinsehen bei den falsch eingesetzten ehemaligen Speichen erkennen kann, wo sie auf den ehemaligen Zehnfüßler treffen: falsches Wagenrad - Deflationsproblem (Quelltext zum falschen Wagenrad - Deflationsproblem).
Um das Problem für eine Teilung mit Drachen und Pfeil auszubügeln, müßte der gesamte ehemalige Zehnfüßler ersetzt werden, offenbar mit einer Fortsetzung nach innen, die dann wiederum bei einem Zehnfüßler enden wird, der nur mit einer leicht falschen Anordnung - allerdings immer noch wieder lückenlos - eingepaßt werden kann.
Wird ein ungerader Deflationsgrad verwendet, ist das Muster im Übergangsbereich zwischen den falschen Speichen und dem Zehnfüßler zwar immer noch nicht korrekt, es gibt aber wieder eine Parkettierung mit Drachen und Pfeil: falsches Wagenrad - Deflationsproblem (2) (Quelltext zum falschen Wagenrad - Deflationsproblem (2)).