SVG/ Druckversion

Aus Wikibooks
< SVG
Wechseln zu: Navigation, Suche
SVG



Wikibooks


SVG - Das Buch

SVG

SVG (Skalierbare Vektorgraphik, englisch: Scalable Vector Graphics) ist der internationale, vom W3C empfohlene Standard für Vektorgraphiken. SVG ist ein Format der Sprachfamilie XML und beschreibt zweidimensionale Vektorgraphiken.

SVG fügt sich gut in andere bestehende Standards ein, ergänzt sie und wird von ihnen ergänzt. SVG-Dokumente können wie (X)HTML-Dokumente alleine verwendet werden, um Information zugänglich zu vermitteln. Es lassen sich aber auch SVG-Fragmente direkt in beliebige andere XML-basierte Dokumente (zum Beispiel XHTML) einfügen. Andersherum lassen sich auch andere XML-Formate in SVG einfügen, üblich sind insbesondere Metainformationen per RDF und Dublin-Core im Element metadata und direkt anzeigbare Informationen im Element foreignObject.

Die in SVG enthaltenen Fähigkeiten zur deklarativen Animation basieren auf dem XML-Format SMIL, ebenso wie die neuen Multimediaelemente in SVG tiny 1.2. Graphiken können auch über das DOM (Dokument-Objekt-Modell) zum Beispiel per ecmascript manipuliert werden, was neben der deklarativen Animation, die interaktiv begonnen und beendet werden kann, eine andere Möglichkeit eröffnet, auf Ereignisse zu reagieren und mit dem Benutzer zu interagieren. Graphikelemente lassen sich als Verweise verwenden (keine Verwendung eines Elements wie map in (X)HTML notwendig), Filter und Maskierungen können vorgenommen werden, Schriftarten definiert werden und vieles mehr.

Ein aktueller SVG-Standard liegt seit 2003-01-14 in der Version 1.1 als Empfehlung des W3C vor. Eine überarbeitete zweite Auflage mit der Korrektur bekannter Fehler ist 2011-08-16 erschienen. SVG tiny 1.2 liegt seit 2008-12-22 als Spezifikation vor und ist zum einen auf den mobilen Markt ausgerichtet, wie auch die älteren mobilen Varianten von SVG 1.1, zum anderen wird es als Grundmodul für die in Arbeit befindliche Version 2 dienen, für welche auch schon für einige Module Arbeitsentwürfe veröffentlicht wurden. Das Buch beschreibt Version 1.1 und tiny 1.2.

Dieses Buch soll sowohl Einsteigern als Tutorium als auch fortgeschrittenen Anwendern als Referenz dienen, deshalb werden die Elemente in einer (aus Sicht der Autoren, Diskussionen dazu sind gerne willkommen) sinnvollen Reihenfolge eingeführt (auch die Reihenfolge der Attribute folgt dieser Richtlinie so gut wie möglich), und werden zum Nachschlagen in der Referenz referenziert.

Anmerkung zu Vorschaubildern: Da leider die Qualität des Programmes deutlich begrenzt ist, welches aus den SVG-Beispieldateien Vorschaubilder erstellt, sind diese Bilder kein Hinweis auf eine korrekte Interpretation des jeweiligen SVG-Dokumentes. Im Begleittext im SVG-Dokument und im laufenden Text des Buches wird hingegen erläutert, wie die entsprechenden Bestandteile von SVG korrekt zu interpretieren sind. Als zusätzlicher Hinweis ist zumeist für einige Darstellungsprogramme angegeben, ob für diese mit einer korrekten Darstellung des entsprechenden Bestandteils zu rechnen ist. Durch Verbesserung dieser Programme wird sich in Zukunft sicherlich die Zuverlässigkeit der Darstellung erhöhen.

Anmerkung zur PDF-Version: Diese ist mehr oder weniger automatisch erstellt, für die meisten Beispiele gibt es im laufenden Text nur Vorschaubilder und Verweise auf die relevanten SVG-Dateien, die dann jeweils von wikibooks geladen werden können. Alternativ enthält die PDF-Version einen Anhang (7z-Archiv), in welchem die SVG-Dateien enthalten sind. Die Namen entsprechen den Abbildungsnummern in der PDF-Version.

Anmerkung zur Druckversion: Auch hier ist es natürlich notwendig, die meisten Beispiele am Computer nachzuvollziehen, den Quelltext anzusehen. Auch hier gilt, auf die meisten Beispiele wird nur verwiesen beziehungsweise es werden nur Vorschaubilder im laufenden Text angeboten. Die SVG-Dokumente für diese Beispiele werden nicht automatisch mit ausgedruckt, bei eingebundenen Beispielen ist eine ausgedruckte Version natürlich auch nicht besonders zur Analyse oder Weiterverwendung der Quelltexte der Beispiele geeignet.

Eine Übersicht über die in diesem Buch als Beispiele verwendeten und erläuterten SVG-Dokumente ist in der Kategorie SVG-Buch zu finden (ausgenommen einige Beispiele, die bei Wikimedia Commons liegen).

Buchpatenschaft/Ansprechperson: Doktorchen

Einführung[Bearbeiten]

Dieses Kapitel soll kurz die Motivation des Buches erläutern und helfen, sich im Buch zurechtzufinden.


Die Frage nach dem Warum[Bearbeiten]

Warum eigentlich Vektorgraphiken?[Bearbeiten]

Vektorgraphiken lassen sich ohne Qualitätsverlust beliebig skalieren.

„Normale“ Rastergraphiken wie zum Beispiel JPEG/JFIF, PNG oder GIF speichern das Bild als reine Farbinformation, also jedes einzelne Pixel im Falle von GIF und PNG oder aufgrund geschickter Transformationen eher als Farbverteilungen bei JPEG/JFIF. Vektorgraphiken speichern hingegen, aus welchen Elementen ein Bild besteht, also was die darstellenden Programme tun müssen, um das Bild zu präsentieren. Mit Vektorgraphiken ist im Dokument notierbar, was eine inhaltlich wichtige Struktur ist, worauf es ankommt.

Wenn es darum geht, Photographien abzuspeichern, so bieten Rastergraphiken klare Vorteile, denn eine Kamera braucht bei einem Rohdatenformat einfach nur Pixel für Pixel abzuspeichern, was der oder die Bildsensoren wahrnehmen. Weil viele Digitalkameras eine Bayer-Matrix im Sensor haben, interpolieren diese sogar die meisten Pixel nur und führen zumeist auch eine etwas aufwendigere Kompressionstransformation durch, um das Bild (auch) als JPEG/JFIF abspeichern zu können. Bei JPEG/JFIF ist allerdings wiederum die Farbtiefe begrenzt. So kommt es also zu Verlusten, bereits bedingt durch die Aufnahmetechnik oder das Format, mit welchem die Aufnahme abgespeichert wird.

Die Digitalkamera braucht indes nicht zu verstehen, was das Motiv ist, wenngleich dies bei besseren Modellen oftmals der Fall ist, um die automatische Fokussierung und Belichtung zu optimieren. Für die Aufnahme selbst braucht die Digitalkamera allerdings nicht zu wissen, welche Elemente auf dem gewählten Bildausschnitt dargestellt und wichtig sind, auch sind die auf Photographien dargestellten Geometrien und Farbverläufe oftmals derart komplex, dass eine vektorielle Beschreibung ein Vielfaches der Speichergröße benötigen würde.

Vektorformate bieten sich jedoch dort an, wo Graphiken digital gezeichnet und verändert werden und einfach veränderbar bleiben sollen. Dies ist zum Beispiel der Fall bei Konstruktionszeichnungen, Symbolen, Logos, technischen oder wissenschaftlichen Daten und deren Visualisierung. Auch können vorhandene Rastergraphiken um solche Elemente ergänzt werden, etwa durch einen Text, der lesbar bleiben soll, oder durch eine Markierung, die gegebenenfalls wieder entfernbar sein soll.

Vektorgraphiken bieten viele Vorteile:

  • Sie lassen sich vergrößern, ohne dass es zu „Treppenbildung“ kommt (siehe Beispielbild)
  • Sie lassen sich leicht bearbeiten (wenn man z.B. einen Text etwas höher platzieren möchte, muss man nur die Koordinaten des Textelements anpassen, bei Rastergraphiken müsste man die Stelle, an der sich der Text vorher befand, aufwendig nachbearbeiten)
  • Eventuell vorhandener Text lässt sich maschinell durchsuchen
  • Die Dateigröße ist unabhängig von der Auflösung. Sie hängt nur von der Anzahl der dargestellten Elemente ab und ist deshalb bei den angesprochenen Anwendungen oft geringer als die Speicherung als Rastergrafik.

Auch Animationen oder Interaktionen des Nutzers lassen sich bei Vektorformaten leichter berücksichtigen. Bei Animationen muss nicht wie bei Videos die Bewegung bildweise gespeichert werden. Vielmehr ist es möglich, nur einzelne Eigenschaften einzelner Objekte unabhängig von anderen Bildinhalten zu ändern und dies auch nicht bildweise, sondern durch eine Angabe der Interpolationsmethode zwischen wenigen Stützstellen.

Diese Vorteile beruhen vor allem darauf, dass bei der Speicherung als Rastergraphik ein Informationsverlust stattfinden kann, denn ein Pixel in einer Rastergraphik ist einfach nur ein Pixel mit einer bestimmten Farbe, nicht mehr und nicht weniger, das eigentliche Bild war jedoch aus verschiedenen Elementen (zum Beispiel einem Kreis) aufgebaut, die als Rastergraphik nichts anderes als eine Ansammlung aus Pixeln sind, ihre eigentliche Bedeutung geht verloren. Anders bei der Speicherung als Vektorgraphik, die Elemente behalten hier weiterhin ihre Bedeutung und der Informationsverlust (zum Beispiel die letzten Bearbeitungsschritte) wird minimiert.

Mehr dazu im Abschnitt Vektorgraphik.

Warum SVG?[Bearbeiten]

Der SVG-Standard wurde vom W3C (World Wide Web Consortium) ins Leben gerufen, demselben Gremium, das sich auch um die (X)HTML-Spezifikationen und viele andere Standards für das Internet kümmert. SVG ist also ein herstellerunabhängiger Standard auf dem sonst sehr zersplitterten Markt der Vektorformate. Bei dem Entwurf von SVG wurde darauf geachtet, dass es sich möglichst gut in andere Spezifikationen einfügt, so wurde nicht versucht, ein allmächtiges Format zu schaffen, sondern ein Format, das in dem Bereich, für den es konstruiert wurde, sehr mächtig ist (im Falle von SVG Graphikanwendungen), aber nicht versucht, Funktionalität zu beinhalten, die eher in den Aufgabenbereich eines anderen Standards fällt. Um dies zu ermöglichen, wurde SVG auf Basis von XML spezifiziert, was es erlaubt, SVG mit allen anderen XML-basierten Auszeichungssprachen zu kombinieren (vorausgesetzt das Anzeigeprogramm versteht diese) und die etablierten Werkzeuge zum Bearbeiten von XML zu benutzen. Davon wird auch oft Gebrauch gemacht: Metadaten (zum Beispiel Autor und Lizenz, Titel und Beschreibung) werden mittels RDF gespeichert (RDF - englisch: Resource Description Framework), Verweise und Referenzen mittels XLink realisiert, SVG-Dokumente können in andere XML-Dateien (zum Beispiel XHTML oder DocBook) integriert werden, sie können mittels ecmascript dynamisch verändert und mit CSS den aktuellen Bedürfnissen gemäß dekoriert werden (ohne die Graphik selbst zu ändern).

Ein wichtiger Bestandteil von SVG ist auch, dass dieses Format Strukturen beinhaltet, welche die eigentliche Information und Struktur des Bildes zugänglich machen kann. Es gibt ausgereifte Möglichkeiten, im Bild selbst Alternativtexte für alle relevanten Strukturen zu notieren, so dass ein Verständnis der Information des Bildes auch mit einer alternativen Textrepräsentation möglich wird, wenn keine visuelle Präsentation möglich ist – warum auch immer.

Die Verwendung von XML hat den angenehmen Nebeneffekt, dass die Dateien mit einem einfachen Texteditor relativ komfortabel manuell bearbeitet werden können, es werden also keine besonderen Programme benötigt, um Dokumente in diesem Format zu erstellen.

Wie man dieses Buch liest[Bearbeiten]

Nun, grundsätzlich ist das natürlich jedem selber überlassen und hängt ganz von den persönlichen Vorlieben und Lernverhalten ab. Wer etwas Bestimmtes sucht, sollte sich am besten in der Referenz oder im Inhaltsverzeichnis die entsprechenden Stellen heraussuchen. Möchte man eher einen Überblick über das Thema erhalten, so kann man Kapitel anlesen und sich einen Überblick verschaffen, gegebenenfalls zum nächsten Kapitel übergehen. Das Durchlesen des gesamten Buches bietet sich für diejenigen an, die sich ausführlich mit dem Thema beschäftigen wollen.

Konventionen[Bearbeiten]

Elemente, Eigenschaften und Attribute[Bearbeiten]

Attribut-, Eigenschafts- und Elementnamen werden immer mit der gleichen Dekoration versehen, um sie vom übrigen Text abzuheben: Ein Attribut oder eine Eigenschaft und ein Element.

Beispiele[Bearbeiten]

Zu jedem Element oder Attribut sollte mindestens ein Beispiel vorhanden sein, welches in nichtproportionaler Schrift mit Syntaxhervorhebung, bei längeren Beispielen auch mit Zeilennumerierung dargestellt wird. Dabei handelt es sich oft nur um kurze Fragmente einer SVG-Datei, nicht unbedingt um komplette Dokumente:

1 <element attribut="wert">
2     <text>Ich bin ein Quelltext</text>
3 </element>

Alternativ kann das Beispiel natürlich auch direkt als ansehbares, komplettes Dokument vorliegen, dazu folgt man entweder dem entsprechenden Verweis oder navigiert über ein Vorschaubild weiter zum SVG-Beispiel, welches leider nicht direkt in das Buch integrierbar ist. Insbesondere bei umfangreicheren Beispielen wird eher direkt auf die SVG-Datei verwiesen, wo dann sowohl das graphische Ergebnis im Darstellungsprogramm betrachtet werden kann als auch der Quelltext der SVG-Datei, die wiederum selbst oft eine entsprechende Beschreibung enthält. So oder so empfiehlt es sich für eine intensivere Beschäftigung, diese oder eigene Beispiele auf dem eigenen Rechner zu kopieren und dann mit den im Buch diskutierten Merkmalen herumzuexperimentieren, um sich vertrauter damit zu machen, welche Merkmale welche Auswirkungen haben.

Interpretation von Merkmalen durch Darstellungsprogramme[Bearbeiten]

Zu jeder Eigenschaft, zu jedem Attribut oder Element wird angegeben, seit welcher Version des SVG-Standards es vorhanden ist und in welchen Programmen es (korrekt) interpretiert wird. Die Liste der Programme ist nicht vollständig und meist liegt ein kompletter Test einer Eigenschaft oder eines Attributes oder gar eines Elementes gar nicht vor, daher kann dies nur als Anhaltspunkt gesehen werden, der eine kritische Prüfung im Einzelfall leider nicht erspart. Fehlt ein Eintrag zu einem Merkmal für ein bestimmtes Programm, welches dem Leser verfügbar ist, kann dieser gerne nach einem ausführlichen Test ein Ergebnis ergänzen. Dabei hilft sowohl ein Hinweis auf fehlerhaftes wie richtiges Verhalten und auch ein Hinweis auf eine Implementierungslücke.

Beispiel: Ein Element, das seit der Version 1.1 zum SVG-Standard gehört, von Firefox und Safari mindestens seit der Version 4, bei Opera 9, teilweise auch schon in Version 8 und von Konqueror gar nicht interpretiert wird, bei batik/Squiggle gar falsch implementiert wurde und für welches für librsvg etc. kein Testergebnis vorliegt, erhält dann folgende Kennzeichnung:

element

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 (falsch) 9 (8 teilweise) 4 4  ?  ?  ?

Hier folgt die Beschreibung des Elements…

Text
Text
Text

Die Versionsangaben bedeuten dabei nicht, dass das Merkmal erst seit der angegebenen Version interpretiert wird, sondern dass die Interpretation mit dieser Version (erfolgreich?) getestet wurde, also das Merkmal mindestens seit der angegebenen Version interpretier wird. Ein Fragezeichen deutet darauf hin, dass die Interpretation mit dem angegebenen Programm noch nicht getestet wurde und ein Strich, dass bis jetzt kein Test erfolgreich war.

Weitere Informationen zur Programmen rund um SVG, was zu tun ist, wenn die bevorzugten Programme nicht in der Liste auftauchen, und vieles mehr ist im Kapitel Programme rund um SVG und auf der Dokumentationsseite der verwendeten Vorlage zu erfahren.

So können Sie mithelfen[Bearbeiten]

Sie haben einen Fehler gefunden, oder wollen die Versionsangabe aktualisieren? Oder Sie haben ein kompaktes Anwendungsbeispiel, welches im Buch nicht fehlen sollte? Gut! Da sich dieses Buch auf einem Wiki befindet, müssen Sie den Autoren keine email schreiben und darauf hoffen/warten, ob das Buch entsprechend angepasst wird, sondern Sie können die Änderungen selbst durchführen. Wenn Sie also einen Fehler (sei es in der Rechtschreibung oder im Inhalt) finden, klicken Sie einfach auf „Bearbeiten“ und beheben Sie ihn – nur Mut, Sie können nicht viel falsch- oder gar kaputtmachen. Sollten Sie sich nicht sicher sein, ob überhaupt ein Fehler vorliegt, zwar wissen, dass ein Fehler vorliegt, aber keine Korrektur dafür parat haben, oder einfach nur eine Frage haben, so sind Sie auf der Diskussionsseite zu dem entsprechenden Kapitel genau richtig, zu der Sie gelangen, wenn Sie oben auf „Diskussion“ klicken.

Hinweise dazu, wie Sie die Versionsangaben aktualisieren, finden Sie im Kapitel Programme rund um SVG und auf der Dokumentationsseite der verwendeten Vorlage.


Nun wünschen wir Ihnen noch viel Spaß beim Lesen dieses Buches und hoffen, dass es Ihnen gefällt.


Kurze Einführung in die Welt der Vektorgrafik[Bearbeiten]

Eine Vektorgrafik ist eine Computergrafik, die aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven (splines) zusammengesetzt ist. Meist sind mit Vektorgrafiken Darstellungen gemeint, deren Primitive sich zweidimensional in der Ebene beschreiben lassen. Eine Bildbeschreibung, die sich auf dreidimensionale Primitive stützt, wird eher 3D-Modell oder Szene genannt.

Um beispielsweise das Bild eines Kreises zu speichern, benötigt eine Vektorgrafik mindestens zwei Werte: die Lage des Kreismittelpunkts und den Kreisdurchmesser. Neben der Form und Position der Primitiven werden eventuell auch die Farbe, Strichstärke, diverse Füllmuster und weitere das Aussehen bestimmende Daten angegeben.

Eigenschaften[Bearbeiten]

Vektorgrafik Rastergrafik
Vektorgrafik Rastergrafik
Vektorgrafik Rastergrafik
Vektorgrafik Rastergrafik
Vektorgrafiken lassen sich ohne Qualitätsverlust beliebig skalieren.

Vektorgrafiken basieren anders als Rastergrafiken nicht auf einem Pixelraster, in dem jedem Bildpunkt ein Farbwert zugeordnet ist, sondern auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert. So kann beispielsweise ein Kreis in einer Vektorgrafik über die Lage des Mittelpunktes, den Radius, die Linienstärke und die Farbe vollständig beschrieben werden; nur diese Parameter werden gespeichert. Im Vergleich zu Rastergrafiken lassen sich Vektorgrafiken daher oft mit deutlich geringerem Platzbedarf speichern.

Die Erzeugung von Vektorgrafiken ist Gegenstand der geometrischen Modellierung und geschieht meist mittels eines Vektorgrafikprogramms oder direkt mit einer Auszeichnungssprache (wie hier in unserem Lehrbuch). Rastergrafiken können mit gewissen Einschränkungen in Vektorgrafiken umgewandelt werden (Vektorisierung); manche Texterkennungsprogramme basieren auf einem Vektorisierungsalgorithmus. Mittlerweile bieten gängige Vektorgrafikprogramme Funktionen an, die es erlauben, Vektorgrafiken mit Farbverläufen und Transparenzstufen zu speichern und damit eine größere Zahl von Bildern zufriedenstellend zu beschreiben. Auch solche Vektorgrafiken lassen sich, im Gegensatz zu Rastergrafiken, bequem und verlustfrei verändern und transformieren.

Auf bis in die 1980er Jahre verbreiteten Vektorbildschirmen wurden Vektorgrafiken durch einen Kathodenstrahl direkt auf dem Bildschirm gezeichnet. Zur Anzeige auf heute üblichen Rasterbildschirmen müssen Vektorgrafiken gerastert werden.

Anwendungen[Bearbeiten]

Bearbeitung einer Vektorgrafik mit Inkscape
Zauberwürfel im SVG-Format

Die Stärke von Vektorgrafiken liegt bei Darstellungen, die als Zusammenstellung von grafischen Primitiven befriedigend beschrieben werden können, zum Beispiel Diagramme oder Firmenlogos. Sie sind nicht geeignet für gescannte Bilder und Digitalfotos, die naturgemäß als Rastergrafik erfasst werden und nicht verlustfrei umgewandelt werden können. Ebenfalls an die Grenzen stoßen Vektorformate bei komplexen berechneten Bildern, die ebenfalls direkt als Rastergrafik berechnet werden. Allerdings spezialisieren sich mehr und mehr Firmen auf die Vektorisierung von Rastergrafiken. Dies ist vor allem von Interesse für großflächige Bildwerbung, Fahrzeugbeschriftung oder wenn die Vektorisierung als grafischer Effekt genutzt wird.

Grafikanwendungen
Zur Erstellung von Illustrationen, insbesondere für die Erstellung von Logos, können vektorbasierte Zeichenprogramme verwendet werden. Für technische Zeichnungen finden CAD-Programme Verwendung; hier wird meist das Drawing Interchange Format (DXF) zur Speicherung verwendet, das in Zukunft in weiten Teilen auch von SVG abgelöst werden soll.
Seitenbeschreibungssprachen
Vektorgrafiken erlauben es, Dokumente unabhängig von der Auflösung des Ausgabegeräts zu beschreiben. Mit Hilfe einer vektorgrafikfähigen Seitenbeschreibungssprache wie PostScript oder dem daraus hervorgegangenen Portable Document Format (PDF) können Dokumente, im Gegensatz zu Rastergrafiken, mit der jeweils höchstmöglichen Auflösung auf Bildschirmen verlustfrei dargestellt oder gedruckt werden.
Computerschriften
Auf gängigen Computersystemen finden heute überwiegend so genannte Outline-Schriften Verwendung, die die Umrisse jedes Zeichens als Vektorgrafik beschreiben. Wichtige Formate sind TrueType, PostScript und OpenType. SVG bringt zusätzlich ein eigenes Fontformat mit (SVG-Fonts) dazu später mehr.
Computerspiele
Frühe Arcade-Spiele liefen mit Vektorgrafik. Das erste war Space Wars aus dem Jahr 1977. Bekannt waren auch Lunar Lander (Atari, 1979) und Star-Wars-Spiele. Es gab auch die Spielkonsole Vectrex. Der Vorteil lag in der höheren Geschwindigkeit im Vergleich zur Rastergrafik. Auch 3D-Spiele bestehen in weiten Teilen aus Vektoren, die meist mit Rastertexturen "überzogen" werden. 2D-Vektorgrafiken können sehr gut als Grundlage für 3D-Modelle verwendet werden, z.B. lassen sich SVG-Pfade mit Blender importieren.
Internet
Im World Wide Web liegen Vektorgrafiken meist im offenen Format SVG oder als proprietäre SWF-Dateien (Adobe Flash) vor.
Geoinformationssysteme
Bei Geoinformationssystemen (GIS) kann die Geometrie von Flurstücken und Landkarten in Form von Vektordaten gespeichert werden. Solche Vektorgrafiken lassen sich vergleichsweise einfach mit Sachdaten verknüpfen.

Wer mehr Informationen über die Anwendungsmöglichkeiten von SVG in der Geoinformation wissen möchte, ist bei cartoo.net richtig.


Darstellungsprogramme[Bearbeiten]

Zur Darstellung von SVG gibt es zahlreiche Programme. Auch technisch aktuelle Darstellungsprogramme, die eine graphische/visuelle Präsentation von Inhalten erlauben, haben heutzutage (seit ~2010) auch eine Anzeigemöglichkeit für SVG.

Beispiele für häufig verwendete Programme zur Darstellung und Interpretation, welche unter anderem SVG verstehen, sind:

  • Presto (Opera bis Version 12.x)
  • Mozilla, Gecko (Firefox, SeaMonkey, Iceweasel; Iceape, Epiphany, Galeon ...)
  • WebKit/Blink (Chromium, Arora, Konqueror4+WebKit, Opera ab Version ~15, Apple Safari, Google Chrome ...)
  • KHTML+KSVG (Konqueror3/4+KSVG)
  • Trident (Microsoft Internet Explorer ab Version 9, Vorschauversion verfügbar seit März 2010)
  • Amaya

Bei sehr alten Versionen von Darstellungsprogrammen kann vor allem eine Aktualisierung oder ein Wechsel zu einem aktuelleren Programm sinnvoll sein.
Teils kann allerdings auch der Wechsel zu einer neueren Version eine Verschlechterung der Darstellung bewirken, etwa wenn man bei Opera von den Presto-Versionen auf die WebKit/Blink-Versionen umsteigt, muß man mit drastischen Qualitätseinbußen rechnen. Auch bei Mozilla/Gecko ist teilweise eine Verschlechterung zu beobachten, einiges, was bis Version 8 noch funktioniert hat, ist bei neueren Versionen defekt oder nicht mehr verfügbar, andere frühere Fehler sind hingegen bei neueren Versionen behoben, es gibt also kein einheitliches Bild eines Fortschrittes bei neueren Versionen.
Deswegen lohnt es sich auf jeden Fall, ältere Versionen installiert zu lassen und immer kritisch zu hinterfragen, welche Fehler bei neuen Versionen neu auftreten und welche Fehler darin behoben wurden.
Formate werden von diesen Anbietern praktisch nie komplett (korrekt oder überhaupt) in die Programme implementiert, das trifft nicht nur auf SVG zu, sondern faktisch auf jedes Format, welches diese Programme zu Darstellung zu bringen versuchen.

Darstellungsprogramme für Mobile Geräte[Bearbeiten]

Dann gibt es auch spezielle, zum großen Teil kommerzielle Programme für Mobiltelephone, die eine Anzeige besonders auch von SVG tiny 1.2 ermöglichen, Anbieter sind zum Beispiel:

  • Opera mini
  • BitFlash
  • Ikivo
  • Abbra
  • eSVG viewer (Intesis)
  • Streamezzo

Erweiterungen[Bearbeiten]

Ferner gibt es auch für ältere Darstellungsprogramme die Möglichkeit, Erweiterungen zu installieren, mit denen SVG interpretiert werden kann. Bekanntere Beispiele sind:

  • Adobes SVG-Erweiterung
  • KSVG (für den Konqueror, siehe oben)
  • Renesis SVG Player
  • GPAC

Konvertierung in andere Formate[Bearbeiten]

Es gibt auch Ideen, SVG in andere Formate zu konvertieren, was aber zumeist durch die begrenzten Möglichkeiten dieser Formate nur eingeschränkt möglich ist.

Verwendet ein Autor solche Skripte, um die Inhalte auch Nutzern zugänglich zu machen, die keine Darstellungsmöglichkeit für SVG haben, besteht leicht die Möglichkeit, dass versehentlich auch die originale Anzeige für jene Nutzer unterbunden wird, bei denen eine Anzeige möglich ist. Die Strategie erfordert also eine Menge Tests mit diversen Programmen und Voreinstellungen derselben.

Spezielle Programme zur Darstellung und Bearbeitung von SVG[Bearbeiten]

Es gibt auch zahlreiche Programme, die mehr auf die Darstellung von Graphik oder auch nur SVG spezialisiert sind, zum Beispiel

  • Apache Batik/Squiggle (Darstellung, Formatkonvertierung und Einsatz auf Web-Servern)
  • Inkscape (Editor mit graphischer Oberfläche)
  • Sodipodi (Editor mit graphischer Oberfläche, die Entwicklung wurde 2005 eingestellt)
  • Amaya (siehe unten, Entwicklungsumgebungen)

Implementierungsstand[Bearbeiten]

Oft werden in den Programmen nur Teile bestimmter Profile interpretiert, die auch noch von Programm zu Programm unterschiedlich sind. Die Implementierungen sind unterschiedlich weit fortgeschritten. Ob eine sinnvolle Anzeige zustande kommt bei einem Programm, welches die zu erwartende Zielgruppe verwenden wird, sollte also vom Autor geprüft werden. Allerdings ist es aufgrund der großen Zahl von verschiedenen Darstellungsprogrammen wenig sinnvoll, für eines zu optimieren oder gar Fehler einer aktuellen Version eines Programmes auszunutzen, weil dies dann zu Unsinn in neueren Versionen oder anderen Programmen führen wird. Somit sollten die Dokumente also jedenfalls immer technisch korrekt sein und zugleich einfach genug für die Programme der Zielgruppe. Das impliziert zumeist, dass Autoren mit dem Fortschreiten der Implementierungen auch technisch bessere Versionen von Dokumenten anbieten können, statt in alten Kompromissen zu verharren.

Installation[Bearbeiten]

Die Installation hängt vom konkreten Programm ab und von dem Betriebssystem, auf dem es installiert werden soll. Die Anbieter sollten entsprechende Instruktionen bereit halten. Es sind auch nicht alle Programme für alle Betriebssysteme verfügbar und auch nicht für alle Abspielgeräte. Meist gibt es etwa vorinstallierte oder spezielle Versionen auf Mobiltelephonen.

OpenOffice.org[Bearbeiten]

Das von OpenOffice verwendete Dateiformat ODF (open document format) ist selbst ein Format der XML-Familien und verwendet von verschiedenen Standards, so auch von SVG und XHTML, einige Fragmente. Eine komplette Übernahme von SVG-Profilen ist im Gespräch, ist aber derzeit (2010) noch nicht umgesetzt.

Graphviz[Bearbeiten]

Graphviz kann als Ausgabe auch diverse Graphikformate verwenden. Unterstützt werden neben SVG unter anderem die Dateiformate Postscript, JPEG/JFIF, PNG und PDF.

Entwicklungsumgebungen[Bearbeiten]

Texteditor[Bearbeiten]

Als hervorragende Entwicklungsumgebung für SVG erweist sich ein einfacher Texteditor, vorzugsweise einer mit einer (farblichen) Hervorhebung von Strukturen und Elementen ganz allgemein für XML-Dokumente. Von solchen Editoren gibt es viele verschiedene. Die Namen sind meist abhängig vom aktuell verwendeten Betriebssystem.

Amaya[Bearbeiten]

Amaya ist eine Kombination von Darstellungsprogramm und Editor des W3C, welcher verschiedene Formate interpretieren und editieren kann, etwa HTML, XHTML, SVG, MathML, CSS, RDF, XLink, XPointer. Die XML-Formate lassen sich darin auch miteinander kombinieren. Als Editor bietet Amaya auch eine Überprüfung von Dokumenten anhand ihm bekannter Dokumenttypdeklarationen.

Netbeans[Bearbeiten]

Netbeans von SUN unterstützt die SVG-Entwicklung inklusive Testhilfsprogramm und Vorschau für das SVG-Mobile-Profil, weiterhin bietet Netbeans eine hervorragende JavaScript-Unterstützung.

Eclipse[Bearbeiten]

Für Eclipse gibt es ausgezeichnete XML-Entwicklungswerkzeuge, Unterstützung und Integration der Darstellungsprogramm-Vorschau mit Fehlersuche (über Aptana Studio), weiterhin gibt es eine (zurzeit veraltete) Batik-Erweiterung.

emacs[Bearbeiten]

Emacs ist ein freier Editor und eine allgemeine Entwicklungsumgebung. Es gibt ein Modul für diesen Editor mit SVG-Vorschaufunktion. Zwischen Textmodus und Vorschau kann dann mit strg-c strg-c gewechselt werden.

Firebug[Bearbeiten]

Für kleinere Korrekturen, um Fehler zu finden und als praktische Methode, um direkt zum Quelltext eines Elements zu gelangen, eignet sich eine Erweiterung für das Darstellungsprogramm Firefox namens Firebug.


Kurze Einführung in XML[Bearbeiten]

Soweit es von Belang ist, soll hier kurz auf die prinzipielle Sprachkonstruktion eines XML-Formates eingegangen werden (XML – erweiterbare Auszeichnungssprache, englisch: eXtensible Markup Language).

Bereits vor der Jahrtausendwende hat sich am Beispiel von HTML (Versionen 1 bis 4, Hypertextauszeichnungssprache, englisch: HyperText Markup Language) gezeigt, dass diese auf SGML (englisch: span xml:lang="en">Standard Generalized Markup Language) basierende Sprache derart komplex ist, dass es bis zum heutigen Tage kein Darstellungsprogramm geschafft hat, diese komplett zu interpretieren. Auch die offengelassene Fehlerbehandlung hat letztlich zusammen mit der unvollständigen oder fehlerhaften Interpretation der Darstellungsprogramme dazu geführt, dass dieses Format gewissermaßen korrumpiert ist, gleichzeitig aber durch die häufige Verwendung im Netz zu einem der wichtigsten Formate überhaupt geworden ist. Aufgrund der Komplexität und der zahlreichen Probleme der Programme schien indes eine Erweiterung nur schwierig möglich.

Mit XML wurde daher eine Sprachfamilie konzipiert, die eine einfachere Syntax hat und gleichzeitig die Möglichkeit der Erweiterbarkeit bietet. Zusätzlich hat es zumindest hinsichtlich grober Strukturfehler eine definierte Fehlerbehandlung, die Darstellungsprogramme dazu bringt, Strukturfehler anzuzeigen, am besten noch bevor ein Autor fehlerhafte Dokumente veröffentlicht.

Die Grundidee von XML ist vorzugeben, wie eine Sprache dieser Sprachfamilie zu spezifizieren ist, statt die Sprache selbst zu spezifizieren. Gemeinsam vorgegeben ist allen XML-Formaten die Konstruktion mit Elementen und Attributen.

Ein XML-Dokument besteht aus Klartext und beginnt generell mit einer XML-Deklaration, die dem Darstellungsprogramm kenntlich macht, dass es sich um XML handelt und gegebenenfalls auch, wie das Dokument kodiert ist und ob es Abhängigkeiten zu anderen Dokumenten gibt.

Als nächstes können eine oder mehrere XML-Stilvorlagenverarbeitungsanweisungen folgen. Diese enthalten Verweise zu Stilvorlagen, mit denen die Darstellung des Dokumentes beeinflusst werden kann. Beispiele für Sprachen für Stilvorlagen sind CSS oder XSL (CSS – kaskadierende Stilvorlagen, englisch: Cascading StyleSheets, XSL – erweiterbare Stilvorlagensprache, englisch: eXtensible Stylesheet Language).

Darauf kann ein sogenannter 'doctype' folgen. Dies ist eine Dokumenttypdeklaration, die angibt, welches das Hauptelement des Dokumentes ist und entweder direkt definiert, welche Elemente auftreten können, oder auch auf eine Quelle verweist, in der dies formal beschrieben ist. Diese Beschreibung ist in einer Schemasprache maschinenlesbar angelegt. Weil die per Dokumenttypdeklaration verwendbare Schemasprache, welche selbst kein XML ist, deutliche Grenzen darin aufweist, was man wie genau über die zu definierende Sprache aussagen kann, gibt es auch einige andere Schemasprachen mit mehr Möglichkeiten. Da diese immer noch sehr beschränkt sind, werden neuere Formate auch zunehmend nur noch oder vorrangig mit einem Prosa-Dokument beschrieben. Dann kann die Dokumenttypdeklaration entfallen (wie etwa in SVG tiny 1.2). Die Dokumenttypdeklaration kann aber dennoch zusätzlich genutzt werden, um Abkürzungen anzugeben (sogenannte Entitäten, englisch: entities).

Auf den 'doctype' folgt das Hauptelement des Dokumentes, welches alle weiteren Elemente des Dokumentes enthält. Es gibt genau ein Hauptelement pro Dokument mit dieser ausgezeichneten Position im Quelltext (englisch: root). Je nach verwendeter Sprache kann das für das Hauptelement verwendete Element auch mehrmals im Dokument auftauchen. Dies kann zum Beispiel in SVG mit dem Element svg passieren.

Zumeist wird die Sprache oder das Format einem Namensraum zugeordnet. Der Namensraum kann mit dem Attribut xmlns angegeben werden. Dies schließt auch eine Notation mit einem Präfix mit ein, was hilfreich ist, wenn ein Dokument Elemente oder Attribute aus verschiedenen Namensräumen enthält. Das ist dann ein gemischtes Dokument oder ein Dokument, welches mehrere XML-Formate enthält (englisch auch compound-document).

Als Beispiel sei hier ein einfaches, nahezu leeres SVG-Dokument angegeben:

 1 <?xml version="1.0" encoding="iso-8859-1" ?>
 2 
 3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 4   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 5 <svg width="200px" height="200px" viewBox="0 0 200 200"
 6   xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
 7   xmlns:xlink="http://www.w3.org/1999/xlink"
 8   xml:lang="de">
 9 
10 <title>Beispiel für ein SVG-Dokument</title>
11 <desc>SVG-Beispiel eines Grundgerüstes baseProfile tiny</desc>
12 </svg>

Es beginnt also mit der XML-Verarbeitungsanweisung, in der XML-Empfehlung auch XML-Deklaration genannt, welche angibt, dass die Version 1.0 von XML verwendet wird, ferner die Kodierung iso-8859-1. Dann folgt die Dokumenttypdeklaration. Das Hauptelement ist bei SVG-Dokumenten das Element svg, dies hat Attribute, hier width, height, viewBox, version, baseProfile. Dazu kommt noch ein Attribut xml:lang, welches die im Dokument verwendete Sprache festlegt. Das Präfix (Vorsilbe) 'xml' gibt an, dass dieses Attribut ganz allgemein für alle XML-Formate bereits in der XML-Spezifikation definiert ist (siehe unten), also selbst ohne Kenntnis des Einzelformates eine bekannte Bedeutung hat. xmlns="http://www.w3.org/2000/svg" ist die Angabe zum Namensraum von SVG. Da hier kein Präfix angegeben ist, bedeutet dies, dass das Element svg selbst, seine Attribute und Kindelemente zu diesem Namensraum gehören, sofern es keine anderen Angaben gibt. Mittels xmlns:xlink="http://www.w3.org/1999/xlink" wird ein anderer Namensraum für die Sprache XLink angegeben (eine Sprache zur Auszeichnung von Verweisen; englisch: XML Linking Language), hier mit dem Präfix 'xlink'. Im Dokument können also Elemente oder Attribute aus diesem Namensraum auftauchen, die werden dann mit diesem Präfix angegeben. In SVG taucht besonders häufig xlink:href auf, um ein Beispiel für ein Attribut zu nennen (die Sprache XLink hat nur Attribute, keine Elemente).

Im Hauptelement svg sind die Kindelemente title und desc notiert, die in diesem Falle keine Attribute angegeben haben und nur Text als Inhalt enthalten.

XML-Deklaration und Verarbeitungsanweisungen[Bearbeiten]

Zu Beginn eines XML-Dokumentes findet man im Allgemeinen eine XML-Deklaration, die der Notation einer Verarbeitungsanweisung folgt, gemäß XML aber eigentlich keine ist, sondern eben angibt, dass es sich um ein XML-Dokument handelt, es also nach den Regeln von XML zu verarbeiten ist. Der Unterschied in der Bezeichnung und Nutzung ist in der Praxis nicht relevant.

Oft kommt darin auch eine Angabe zur Kodierung vor. Ein offensichtliches Problem dabei ist, dass bis zu der Stelle, wo die Angabe erfolgt, das Dokument schon dekodiert sein muss, um die Angabe berücksichtigen zu können. Das typische Vorgehen besteht darin, dass das Programm erstmal eine Kodierung rät und guckt, ob damit der Dokumentinhalt einen Sinn ergibt. Wird so die erste Zeile eines Dokumentes dekodiert, in der die XML-Deklaration steht, kann gegebenenfalls die Dekodierung noch angepasst werden. Das liegt daran, dass die Angaben in der XML-Deklaration so ausgelegt sind, dass sie bei gängigen Kodierungen gleich ausfallen, also keine kritischen Sonderzeichen enthalten. Liegt keine Angabe vor, wird eine Kodierung als UTF-8 angenommen. Ein anderes Vorgehen kann sich ergeben, wenn das Dokument von einem Dienstrechner (englisch: server) kommt. Dieser kann verbindlich die Kodierung des Dokumentes angeben, wonach sich ein Darstellungsprogramm zu richten hat. Das vermeidet das Problem, dass die Datei bereits dekodiert sein muss, bevor man die Angabe zur Kodierung erhält. Gibt der Server eine Kodierung an, so wird die Angabe im Dokument ignoriert.

XML-Stilvorlagenverarbeitungsanweisungen können auf die XML-Deklaration folgen und referenzieren dann externe Dateien, in denen Stilvorlagen notiert sind.

Typische Beispiele[Bearbeiten]

Nur eine Angabe, dass nach XML1.0 zu interpretieren ist. Sofern keine anderen Angaben gemacht wurden, wird UTF-8 als Kodierung unterstellt:

<?xml version="1.0" ?>

Zusätzliche Angabe der Kodierung als iso-8859-1 (das reicht für Umlaute, ß-Ligatur und einige andere Sonderzeichen aus dem europäischen Sprachraum):

<?xml version="1.0" encoding="iso-8859-1" ?>

Beziehungsweise wenn man das Euro-Zeichen braucht, kann auch iso-8859-15 verwendet werden:

<?xml version="1.0" encoding="iso-8859-15" ?>

Eine Kodierung mit UTF-8 eignet sich für die meisten Sprachen und kann insbesondere empfohlen werden, wenn neu angefangen wird und keine Altlasten mit anderer Kodierung bereits vorhanden sind.

<?xml version="1.0" encoding="UTF-8" ?>

Zu beachten ist, dass einige Editoren bei UTF-8 an den Beginn einer Datei bisweilen ein BOM setzen (Byte-Anordnungsmarkierung, englisch: byte order mark). Das ist für UTF-8 nicht unbedingt notwendig, weil dort die Anordnung der Bytes eindeutig ist. Dies kann aber mit der Forderung kollidieren, dass zu Beginn des Dokumentes die XML-Deklaration stehen soll. Entwicklern einiger Programme ist das Problem bekannt und sie umgehen es, indem sie das vorangestellte BOM hinsichtlich der Forderung ignorieren, dass die XML-Anweisung zu Beginn des Dokumentes stehen soll. Bei anderen Programmen oder älteren Versionen kann es hingegen passieren, dass versucht wird, das BOM zur Anzeige zu bringen, statt ein XML-Dokument zu verarbeiten. Deswegen ist es in der Praxis empfehlenswert, dem Editor nicht zu erlauben, ein BOM an den Anfang einer mit UTF-8 kodierten XML-Datei zu setzen.

Folgendes ist ein Beispiel mit XML-Stilvorlagenverarbeitungsanweisungen. Hier werden CSS-Dateien referenziert. Zudem gibt es drei verschiedene Vorlagen. Das Darstellungsprogramm sollte einen Auswahlmechanismus bereitstellen, um zwischen den drei Möglichkeiten zu wechseln (ist zum Beispiel mit Mozilla-Geckos oder Opera auch nachvollziehbar).

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="css1.css" type="text/css" title="Stil 1"?>
<?xml-stylesheet href="css2.css" type="text/css" title="Stil 2"
   alternate="yes" ?>
<?xml-stylesheet href="css0.css" type="text/css" title="Kein CSS"
   alternate="yes" ?>

Mit dem Attribut href wird die externe Stilvorlage referenziert. Die Angabe des Attributes ist erforderlich. Der Attributwert ist eine absolute oder relative URI der Datei mit der Stilvorlage, hier einfach der Dateiname einer CSS-Datei im gleichen Verzeichnis. Es kann auch ein Fragmentidentifizierer sein, der dann eben auf ein Dokumentfragment verweist, welches die Stilvorlage enthält.

Mit dem Attribut type wird angegeben, welches Stilvorlagenformat verwendet wird, hier also CSS. Der Wert ist ein Inhaltstyp (ehemals MIME-Typ). Die Angabe des Attributes ist erforderlich.

Mit dem Attribut title kann ein Titel oder eine Überschrift angegeben werden. Die Angabe des Attributes ist nicht erforderlich, sie wird jedoch immer benötigt, wenn mehrere Stilvorlagen alternativ angeboten werden. Das Attribut ist also insbesondere relevant, wenn das Darstellungsprogramm mehrere alternative Stilvorlagen zur Auswahl stellen soll, der Attributwert wird dann als Menüeintrag der Auswahl verwendet.

Dass Stilvorlagen alternativ und nicht alle gleichzeitig angewendet werden sollen, wird dann mit dem Attribut alternate angegeben. Die erste Angabe im obigen Beispiel ist ohne alternate, was dann bedeutet, dass dies die Voreinstellung ist. Der Attributwert 'yes' gibt eben an, dass es sich um eine alternative Stilvorlage handelt. 'no' würde angeben, dass es zusätzlich zur Voreinstellung anzuwenden ist. Eine Angabe des Attributes ist nicht erforderlich, Voreinstellung ist 'no'.

Mit dem Attribut charset kann ein Hinweis auf die Kodierung des referenzierten Dokumentes angegeben werden. Eine Angabe des Attributes ist nicht erforderlich. Die möglichen Werte entsprechen denen von encoding. Der Hinweis ist allerdings nur relevant, wenn es keine anderen bindenden Informationen gibt, zum Beispiel von einem Server, der das referenzierte Dokument ausliefert, oder im Dokument selbst.

Mit dem Attribut media kann angegeben werden, für welches Ausgabemedium die Stilvorlage gedacht ist. Eine Angabe des Attributes ist nicht erforderlich, Voreinstellung ist in CSS 'screen'. Der Attributwert ist ein Medientyp oder eine Liste von Medientypen, die jeweils mit einem Komma voneinander separiert sind. Welche Medientypen verfügbar sind, hängt von der verwendeten Stilvorlagensprache ab. CSS2 gibt zum Beispiel folgende Möglichkeiten an:

all
Für alle Ausgabemedien geeignet.
aural
Für eine akustische Wiedergabe vorgesehen.
braille
Für Braille-Geräte vorgesehen.
embossed
Für Braille-Seitendrucker vorgesehen.
handheld
Für Handheld-Geräte vorgesehen (normalerweise mit kleinem Schwarzweißbildschirm und begrenzter Bandbreite).
print
Für Drucker vorgesehen, ebenso für den Druckvorschaumodus auf dem Bildschirm.
projection
Für projizierte Präsentationen vorgesehen, wie zum Beispiel Projektoren oder den Ausdruck auf Folien.
screen
Hauptsächlich für normale Farbmonitore vorgesehen.
tty
Für Medien vorgesehen, die ein festes Zeichenraster verwenden, wie beispielsweise Fernschreiber oder Terminals.
tv
Für fernsehartige Geräte vorgesehen (geringe Auflösung, begrenzt rollbare Bildschirme, aber in Farbe und mit Ton).

Für spätere Versionen von CSS sind weitere Typen und Schreibweisen vorgesehen, insbesondere auch, weil es inzwischen eine größere Anzahl von verschiedenen Geräten gibt. Zum Beispiel weichen bei Notebooks oder Mobiltelephonen die typischen Abmessungen von Höhe und Breite erheblich von denen von früheren Monitoren ab (auch im Seitenverhältnis).

Dokumenttypdeklaration und Dokumenttyp-Definition[Bearbeiten]

Die Dokumenttypdeklaration kann hilfreich sein, wenn mit einem Validator untersucht werden soll, ob die Struktur eines Dokumentes korrekt ist. Ein Validator ist ein spezielles Programm, welches derartige Untersuchungen der Dokumentstruktur durchführt. Kennt der Validator das Format oder kann die entsprechende Datei mit Strukturinformationen herunterladen, kann er untersuchen, ob das Dokument die Verschachtelungsregeln und einige andere relevante Dinge einhält, die in der Dokumenttyp-Definition (DTD) angegeben sind, welche mit der Deklaration im Dokument zugeordnet wird. Weil man in der gängigen Notation als DTD längst nicht alles angeben kann, was hilfreich wäre, wird darauf auch bei neueren oder komplexeren Formaten verzichtet. In SVG etwa kann mittels der DTD nicht überprüft werden, ob ein Autor Pfade oder Animationswerte korrekt notiert hat, weil die DTD solche Feinheiten nicht hergibt. Dem Validator fallen solche Fehler nicht auf. Andersherum können Beschränkungen in dem, was in einer Dokumenttypdefinition angegeben werden kann, dazu führen, dass der Validator Fehler anzeigt, die keine sind, weil in der Spezifikation etwas anderes angegeben ist, dies aber in solcher Allgemeinheit nicht in der Dokumenttypdeklaration angegeben werden kann.

Relevant ist bei einer konkreten Angabe einer Dokumenttypdeklaration weniger, genau zu verstehen, was da warum angegeben ist, sondern die Deklaration exakt so hinzuschreiben, wie es spezifiziert ist. Nur dann kann der Dokumenttyp von einem Programm erkannt werden. Als Autor ist nicht mehr zu tun. Die Entwickler der Formate haben sich zu überlegen, was wie deklariert wird.

Während ein Programm jedes XML-Dokument daraufhin prüfen kann, ob es korrekt nach den XML-Regeln erstellt ist (Wohlgeformtheit), braucht es ein solches für die Sprache spezifisches Schema wie eine DTD, um zu erkennen, ob die Bedingungen des Formates erfüllt sind. Ob also die Elemente und Attribute richtig verwendet werden und richtig ineinander verschachtelt sind. Letzteres wäre dann also eine Prüfung auf Validität des jeweiligen Formates.

Bei SVG 1.1 dient die Deklaration auch den Angaben der Version und des Profiles der Sprache. Alternativ kann das dort auch mit Attributen getan werden, letzteres ist dann die in SVG tiny 1.2 mögliche Methode, um eindeutig festlegen zu können, welche Version und welches Profil verwendet wird.

In der Praxis sind Angaben zur Version hilfreicher für den Autor oder spätere Leser des Quelltextes als für ein Programm, welches das Dokument interpretiert. Das liegt daran, dass aktuell real existierende Programme einfach nicht so ausgelegt sind, dass sie für verschiedene Versionen verschiedene Interpretationen implementiert haben. Entwickler von Formaten versuchen daher nach Möglichkeit, Inkompatibilitäten zu vermeiden, was aber nicht immer komplett möglich ist. Autoren können anhand der Versionsangaben bei Unstimmigkeiten gucken, wie das Dokument eigentlich gedacht war und es dann im Bedarfsfalle vorsichtig an eine neue Version anpassen. Bei Dokumenten ohne Versionsangabe wird in der Regel die aktuelle Version des Formates als relevant angenommen. Das hat zur Konsequenz, dass sich bei einer inkompatiblen Änderung der Spezifikation die Bedeutung von solchen Dokumenten ändern können. Bei Dokumenten mit relevantem, kritischem Inhalt ist also immer zu empfehlen, eine eindeutige Angabe zur verwendeten Sprachversion anzugeben. Der Autor kann nicht vorhersagen, wie zukünftige Versionen des Formates aussehen werden.

Typische Beispiele[Bearbeiten]

SVG tiny 1.1 (aus der Empfehlung):

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

Die vom Validator des W3C bevorzugte Variante ist allerdings:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

SVG 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

In SVG tiny 1.2 ist kein doctype mehr vorgesehen. Ein solcher kann aber für Erweiterungen weiterhin genutzt werden. Hier wird die Erweiterung (ENTITY) 'Pfad' definiert, eine Abkürzung für das, was hinter 'Pfad' in Anführungsstrichen angegeben ist. Man kann da auch ganze Elemente oder Gruppen von Elementen angeben, die dann einfach wiederverwendet werden können, im Dokument kann die Entität 'Pfad' dann mittels &Pfad; verwendet werden. Diese Zeichenkette wird durch die für 'Pfad' definierte ersetzt, bevor das Dokument interpretiert wird:

<!DOCTYPE svg
   [<!ENTITY Pfad "M200,300 L300,100">
   ]
>

In der Zeichenkette dürfen natürlich nur Zeichen stehen, die nicht mit der Syntax im Konflikt stehen, hier also keine doppelten Anführungszeichen.

Das Analogon entsprechend für SVG 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
   [<!ENTITY Pfad "M200,300 L300,100">
   ]
>

Namensräume[Bearbeiten]

Namensräume sind eine Konstruktion in XML, mit der Überschneidungen von Bedeutungen von Elementen von verschiedenen Sprachen vermieden werden können. Etwa hat das Element font in SVG eine andere Bedeutung als in XHTML. Das Element title kommt in verschiedenen Formaten meist mit ähnlicher Bedeutung vor, wo es aber auftreten kann, kann von Format zu Format sehr unterschiedlich sein. Ein Darstellungsprogramm muss nun bei einem Dokument wissen, dessen Inhalt aus verschiedenen Formaten zusammengemischt wurde, aus welchem Format das jeweilige Element oder Attribut kommt. Dazu dient die eindeutige Zuordnung zu einem Namensraum. Das löst wiederum nicht das mögliche Problem, dass bei verschiedenen Versionen eines Formates die Elemente oder Attribute leicht unterschiedliche Bedeutungen haben können. Um die Version eines Formates zu kennzeichnen, sind besondere Mechanismen im jeweiligen Format zu definieren.

Typisch wird eine URI als Namensraum verwendet, damit die Zuordnung eindeutig ist. Andere eindeutige Zeichenketten sind aber nicht ausgeschlossen. Bei einer URI ist es meist üblich, dass man dort zumindest Angaben darüber findet, um was für ein Format es sich handelt.

Häufig auftauchende Formate und Namensräume:

  • SVG: http://www.w3.org/2000/svg
  • XLink: http://www.w3.org/1999/xlink
  • XHTML: http://www.w3.org/1999/xhtml
  • MathML: http://www.w3.org/1998/Math/MathML
  • RDF: http://www.w3.org/1999/02/22-rdf-syntax-ns#
  • Dublin Core, DCMI: http://purl.org/dc/elements/1.1/

Es gibt zwei Möglichkeiten, ein Element einem Namensraum zuzuordnen. Nur eine davon eignet sich auch, um Attributen einen Namensraum zuzuordnen.

Bei der ersten Methode, die sich nur für Elemente eignet, wird ein Namensraum voreingestellt. Der Namensraum wird mit dem in XML selbst definierten Attribut xmlns angegeben. Beispiel, um den SVG-Namensraum als voreingestellt anzugeben:
xmlns='http://www.w3.org/2000/svg'

Dieser voreingestellte Namensraum gilt dann für das Element und seinen Inhalt, sofern dieser keinem eigenen Namensraum zugeordnet wird. Es gilt also immer der voreingestellte Namensraum, welcher beim Element selbst notiert wird oder sofern dies nicht passiert ist, der voreingestellte des Elternelement und so weiter durch alle Vorfahren, falls beim jeweiligen Elternelement selbst kein Namensraum voreingestellt wird. Ist die Suche bis hinauf zum Wurzelelement einschließlich diesem erfolglos, gibt es keinen voreingestellten Namensraum, man sagt auch, die Elemente befinden sich im Null-Namensraum.

Bei der zweiten Methode kann man bei einem Element einem Präfix einen Namensraum zuordnen. Dieses Präfix kann man dann bei dem Element selbst, seinen Attributen und seinen Nachfahren und dessen Attributen verwenden, um deren Namensraumzugehörigkeit anzugeben. Das Präfix ist also im Bedarfsfalle immer explizit anzugeben und wird nie impliziert. Wird ein Präfix verwendet, ist dies den Elementnamen und Attributnamen jeweils voranzustellen, dazwischen wird ein Doppelpunkt notiert. Das Präfix selbst wird definiert, indem man als Attribut xmlns angibt, gefolgt von einem Doppelpunkt, gefolgt von einer Zeichenfolge, die als Präfix verwendet werden soll, darauf folgt die Wertzuweisung mit einem Gleichheitszeichen und einer Namensraumangabe als Wert in Anführungszeichen entsprechend der ersten Methode. Beispiel, um dem Präfix 'xlink' den Namensraum von XLink zuzuordnen:
xmlns:xlink="http://www.w3.org/1999/xlink"

Beispiel zur Verwendung:

<?xml version="1.0" encoding="iso-8859-1" ?>
<svg viewBox="-100 -100 200 200"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xml:lang="de">

<title>Beispiel für ein SVG-Dokument mit Verweis</title>
<desc>
<h:p xmlns:h="http://www.w3.org/1999/xhtml" >
Im Wurzelelement wird der Namensraum für <h:em>SVG</h:em> voreingestellt.
Ebenso wird dort der Präfix für den Namensraum von <h:em>XLink</h:em> 
festgelegt, welches im Inhalt sodann verwendet wird, um auf wikibooks 
mittels eines Kreises zu verweisen.<h:br />
Dieser Absatz gehört per Präfix, welches im selben Element zugeordnet wird, 
zum Namensraum von <h:em>XHTML</h:em>.<h:br />
Ein paar Elemente in diesem Absatz verwenden das gleiche Präfix, 
gehören also ebenfalls zum Namensraum von <h:em>XHTML</h:em>.
</h:p>
</desc>

<a xlink:href="https://de.wikibooks.org" 
   xlink:title="Zu den deutschen wikibooks">
 <circle r='50' fill='#ccf' stroke='#00f'>
  <title>Knopf</title>
  <desc>
   <div xmlns="http://www.w3.org/1999/xhtml">
    <p>
     Durch aktivieren des Knopfes 
     kann zu den deutschen wikibooks gewechselt werden.
    </p>
    <p>
     Der voreingestellte Namensraum dieses Absatzes 
     und des vorherigen ist der von <em>XHTML</em>.<br />
     Daher gehören die in diesem Element ohne 
     Namensraumangabe notierten Elemente
     ebenfalls zum Namensraum von <em>XHTML</em>.
    </p>
   </div>
  </desc>
 </circle>
</a>

</svg>

Der Autor selbst legt das Präfix fest. Hinsichtlich XLink in SVG ist allerdings das Präfix 'xlink' dringend zu empfehlen, weil einige Darstellungsprogramme Mängel in der Interpretation von Namensräumen aufweisen und dieses Präfix wegen seiner Erwähnung in der DTD von SVG 1.1 durchgehend getestet ist.

Insgesamt also: Ist bei einem Element kein Namensraum und kein Präfix angegeben, so gehört es zum voreingestellten Namensraum des Elternelementes, sofern dies zu einem voreingestellten Namensraum gehört. Typisch wird etwa bei Dokumenten, die nur ein Format verwenden, der Namensraum im Hauptelement angegeben, womit die Angabe dann für alle Nachfahren gilt, sofern die keine eigenen Angaben zum Namensraum machen. Elemente mit Präfix beziehen den zugehörigen Namensraum über das Präfix, der zuvor oder im selben Element zu definieren ist. Der so zugeordnete Namensraum gilt nicht automatisch für Kindelemente.

Bei Attributen ist die Lage formal etwas komplizierter, weil sie nicht direkt zu einem Namensraum gehören, wenn für sie mittels Präfix keiner angegeben ist. Allerdings werden die Attribute dann in dem Namensraum definiert und interpretiert, der zu dem Element gehört, in dem sie notiert sind. Will man ein Attribut explizit einem Namensraum zuordnen, geht das nur über ein vorangestelltes Präfix. Attribute ohne Präfix befinden sich also im Null-Namensraum, ihre Bedeutung kann nur vom Element her impliziert werden, in welchem sie notiert sind.

Etwa bei der deklarativen Animation von SVG kann es notwendig sein, dass Attributnamen samt Namensraumzugehörigkeit als Werte anderer Attribute anzugeben sind. In solchen Fällen ist in dem jeweiligen Format, hier also SVG, festgelegt, wie dabei Präfixe zu interpretieren sind und die Attribute zu identifizieren sind.

Elemente und Attribute[Bearbeiten]

Das prinzipielle Konzept von XML-Formaten liegt darin, Inhalte auszuzeichnen. Dazu werden Konstruktionen verwendet, die Funktion oder Semantik des Inhaltes beschreiben. Zum Beispiel gibt es in SVG ein Element, welches rect heißt. Dies beschreibt ein Rechteck, gegebenenfalls mit abgerundeten Ecken. Generell sind damit alle Arten von Rechtecke gemeint. Nun gibt es aber verschiedene Arten von Rechtecken, die sich insbesondere in Breite und Höhe unterscheiden und in der Positionierung, auch wie stark die Ecken abgerundet sind. Dies wird mit Attributen genauer festgelegt. Auch die Erscheinung oder Präsentation, etwa die Farbe, kann genauer festgelegt werden. Um nun zu verstehen, was genau gemeint ist, wenn jemand sagt oder schreibt, es soll ein rect-Element verwendet werden – oder irgendein anderes Element – kommt es darauf an, die Bestandteile eines solchen Elementes genau bezeichnen zu können.

Dazu ein willkürliches, ausgedachtes Beispiel, einen Apfel, repräsentiert durch das Element apfel:

<apfel sorte="Boskop" zustand='reif'><kern /><fruchtfleisch>lecker</fruchtfleisch></apfel>

Dabei ist nun dies das gesamte Element (englisch: element). 'apfel' ist der Name des Elementes, Groß- und Kleinschreibung ist signifikant. Apfel und apfel können also zwei komplett verschiedene Elemente sein.

Folgendes ist die Anfangsmarkierung (englisch: begin tag). Diese enthält ferner die Attribute (englisch: attribute, Mehrzahl: attributes) sorte und zustand:

<apfel sorte="Boskop" zustand='reif'>

Ein Element hat immer eine entsprechende Endmarkierung (englisch: end tag), die keine Attribute enthalten kann, hier:

</apfel>

Achtung, aufgrund mangelnden Verständnisses, einer gewissen Sprachkonfusion und einer Tendenz besonders in Deutschland, hinter jedem englischen Begriff gleich ein Fachwort zu vermuten, bezeichnen einige Menschen fälschlich ein Element als 'tag' oder noch schlimmer 'Tag', Mehrzahl auch 'tags'. Diese Buchstabenkombination hat allerdings im Deutschen eine komplett andere Bedeutung (Tagesabschnitt, wo die Sonne über dem Horizont steht, im Gegensatz zu 'Nacht', oder aber auch ein Zeitraum von 24 Stunden, tags auch im Sinne von 'am Tage' oder bei 'tags drauf' eben 'am nächsten Tag'). Das ist so falsch und wird auch im englischen Sprachraum von kundigen Fachleuten nicht so verwendet. 'tag' ist einfach auf deutsch eine Markierung oder Kennzeichnung und hat nicht den Anspruch eines Fachwortes. Die Fachbezeichnung ist auf englisch wie auf deutsch jedenfalls (mal abgesehen von Groß- und Kleinschreibung) die gleiche – Element. Anfang und Ende davon werden markiert. Dazu dienen Markierungen, Anfangs- und Endmarkierung, die jeweils den Elementnamen enthalten. Die Markierungen sind aber nicht das Element selbst, ebenso wenig wie Anfang und Ende von einem Würstchen das Würstchen selbst sind.

Attribute haben immer einen Wert. Es werden also getrennt mit Leerzeichen in der Anfangsmarkierung die Attributnamen angegeben, wobei jeweils der Wert oder Attributwert nach einem Gleichheitszeichen in Anführungszeichen folgt. Das sind entweder einfache oder doppelte Anführungszeichen. Enthält der Attributwert einfache Anführungszeichen, sind doppelte zu verwenden und umgekehrt. Taucht beides im Attributwert auf, so sind Anführungszeichen dort am besten zu maskieren, dafür hat XML spezielle Abkürzungen eingeführt (siehe unten). Hier ist der Wert des Attributes sorte eben 'Boskop' und der von zustand 'reif'.

In obigem Beispiel ist dann

<kern /><fruchtfleisch>lecker</fruchtfleisch>

der Inhalt von apfel. Das sind zwei weitere Elemente kern und fruchtfleisch. Beide haben keine Attribute und kern hat auch keinen Inhalt. Das ist ein besonderer Fall in XML, ein sogenanntes inhaltsleeres Element (englisch: empty element). Entweder folgt dann die Endmarkierung direkt auf die Anfangsmarkierung

<kern></kern>

oder es wird wie im Beispiel eine spezielle Kurzschreibweise verwendet:

<kern />

Das Element fruchtfleisch enthält als Inhalt nur den Text 'lecker'. Reiner Text wird in XML auch 'CDATA' genannt, der wird nicht mehr interpretiert. Text, der PCDATA genannt wird, wird interpretiert, also darin vorkommende Entitäten oder auch Markierungen werden interpretiert.

In unserem Falle sind also kern und fruchtfleisch Kindelemente von apfel. Sie sind in apfel verschachtelt, stehen also zwischen Anfangs- und Endmarkierung von apfel, welches dann das Elternelement ist.

Was der Inhalt eines Elementes sein darf, ist in der jeweiligen Spezifikation genau angegeben und kann – sofern vorhanden – mittels eines Schemas wie einer DTD auch formal überprüft werden.

Durch das Verschachteln der Elemente und das Zusammenspiel mit den Attributen entsteht so ein strukturiertes Dokument. An dem Beispiel mit dem Apfel ist bereits zu erkennen, dass damit maschinenlesbar und -verstehbar sehr genaue Angaben darüber gemacht werden können, worum es geht. Elemente, Attribute und zumindest festgelegte Attributwerte sind in dem Sinne einem Programm verständlicher Inhalt, der auch hinsichtlich der Zugänglichkeit so vermittelbar ist. Freier Text ist nicht zwangsläufig der Maschine verständlich, als Text aber jedenfalls von der Maschine Menschen vermittelbar, die die Sprache verstehen, in der der Text verfasst ist.

Attribute und Entitäten von XML[Bearbeiten]

In XML sind bereits einige Attribute vordefiniert. Diese werden mit dem ebenfalls bereits in XML fest vorgegebenem Präfix 'xml' notiert.

Ein Attribut ist xml:lang zur Kennzeichnung der Sprache, die im jeweiligen Element verwendet wird. Der Wert ist eine mit Leerzeichen separierte Liste von Sprachkennungen wie 'de' (deutsch) oder 'en' (englisch) oder auch 'en-us' (englisch im amerikanischen Dialekt). Siehe auch BCP47.

Ein weiteres ist xml:space mit den Werten 'preserve' oder 'default'. Dies hat Einfluss auf die Interpretation von Leerraum (Leerzeichen, Zeilenumbrüche) im Textinhalt. Bei 'preserve' wird der Leerraum in der Präsentation erhalten. Bei 'default' werden bei der Präsentation mehrere aufeinanderfolgende Leerzeichen oder Zeilenumbrüche zu einem Leerzeichen zusammengefasst. Je nach Format (besonders bei einem graphischen wie SVG) kann es weitere Angaben in der Spezifikation geben, wie mit Textinhalt im Detail umzugehen ist, wie es zum Beispiel mit Hilfe von Glyphen zu einer graphischen Repräsentation des Textes kommt.

xml:base gibt als Wert die Basis-URI an, von der aus Pfadangaben zu absoluten URIs aufgelöst werden sollen. In der Praxis problematisch kann dieses Attribut sein, wenn vom Autor nur Fragmentidentifizierer oder Bezeichner in einem Attribut angegeben werden, welches zu einer absoluten URI aufzulösen ist.

xml:id ist ein dokumentweit eindeutiger Bezeichner oder Fragmentidentifizierer für das Element, entsprechend den Attributen id in (X)HTML oder SVG. In SVG ist die Verwendung dieses erst spät in XML eingeführten Attributes erst in SVG tiny 1.2 alternativ zu id vorgesehen. Der Vorteil gegenüber formatspezifischen Bezeichnern wie id liegt darin, dass die Bezeichner formatübergreifend gelten und auch Fragmente in Formaten referenzierbar sind, ohne dass das genaue Format dem Darstellungsprogramm bekannt sein müsste.

Als Entitäten (maskierte Zeichen) sind in XML vordefiniert, was in Konflikt mit der Notation geraten kann:

  • &amp; (&)
  • &lt; (<)
  • &gt; (>)
  • &apos; (')
  • &quot; (")

Weitere Details über XML kann man im Wikibuch XML lernen.

Start mit SVG[Bearbeiten]

Einführung: Beispiel 'Hello World'[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 3  ?  ? 1.x


Einer alten Tradition folgend soll mit einem Beispiel begonnen werden, welches die Zeichenfolge 'Hello World' zur Präsentation bringt:

1  <?xml version="1.0"?>
2 
3  <svg xmlns="http://www.w3.org/2000/svg"
4       version="1.1"
5       xml:lang="en">
6    <title>Hello World</title>
7    <text x="50.5" y="80.25" font-size="20">Hello World</text>
8  </svg>
Beispiel 'Hello World'


Da jedes SVG-Dokument auch ein XML-Dokument ist, beginnt dies mit einer XML-Verarbeitungsanweisung in der ersten Zeile ohne vorhergehende weitere Zeichen.

Die zweite Zeile ist hier leergelassen. Hier können optional mehrere Zeilen mit XML-Stilvorlagenverarbeitungsanweisungen stehen, gefolgt von einer ebenfalls optionalen Dokumenttypdeklaration (siehe dazu auch das Kapitel Kurze Einführung in XML), im Bedarfsfalle auch mit der Definition eigener Abkürzungen darin.

Dann beginnt das SVG-Dokument mit der Anfangsmarkierung des Elementes svg. Dies ist das Wurzelelement des Dokumentes. Elemente wie svg bilden die Struktur des Dokumentes, ohne selbst unmittelbar zu einer Anzeige eines graphischen Inhaltes zu führen. Solche Elemente der Dokumentstruktur gruppieren Inhalte oder referenzieren sie. Näheres zu solchen Elementen wird im Kapitel Dokumentstruktur diskutiert.

Das Wurzelelement enthält die Angabe des Namensraumes von SVG mit dem Attribut xmlns. Dies ist wichtig, weil jeder XML-Formate spezifizieren darf, zum Beispiel auch die Straßenverkehrsgemeinschaft, die Schienenverkehrsgesellschaft, der 'Sportverein Guckste' oder auch die Sylter Verkehrsgesellschaft. Es gibt viele Möglichkeiten, wofür das Element svg stehen könnte, nicht nur für Skalierbare Vektorgraphik. Erst die Angabe des Namensraumes legt fest, wie die Elemente und die Struktur zu verstehen sind. Der obige gehört zur Skalierbaren Vektorgraphik und zu keiner anderen Möglichkeit.
Auf Namensräume wird ebenfalls näher im Kapitel Kurze Einführung in XML eingegangen.

Ferner ist mit dem Attribut version angegeben, dass die Version 1.1 von SVG verwendet wird.

Ebenfalls notiert ist mit dem allgemeinen XML-Attribut xml:lang die verwendete Sprache für Textinhalt. Weil 'Hello World' englisch ist, wird das entsprechend auf englisch (Wert: en) festgelegt.

Als nächstes folgt ein Element title mit einem für den Inhalt charakteristischen Titel für das Dokument. Ein SVG-Dokument ohne title ist zwar technisch möglich, überspitzt formuliert aber inhaltlich sinnlos. Mehr zur sinnvollen Verwendung dieses Elementes ist dem Kapitel Barrierefreiheit zu entnehmen.

Der Inhalt des Elementes title wird nicht direkt als Graphik ausgegeben, sondern erscheint vielleicht als Überschrift des Fensters mit der Graphik. Es handelt sich ebenfalls um ein Element der Kategorie Dokumentstruktur.

Damit der Text als Graphik sichtbar wird, wird sodann das Element text verwendet.
Mit den Attributen x und y wird der Text im Darstellungsbereich positioniert.

Das Element svg hat diesen Darstellungsbereich des Dokumentes erzeugt, in dem die graphischen Elemente dargestellt werden können. Ohne weitere Angaben, welche allerdings sowohl einfach möglich als auch in der Praxis sinnvoll sind, deckt sich der Darstellungsbereich des Dokumentes mit dem aktuell verfügbaren. Wird das Dokument nicht in ein anderes eingebettet, so ist dies der Darstellungsbereich der Anzeige, etwa das Fenster des Darstellungsprogrammes auf dem Monitor oder bei einem Drucker die Größe des Papieres. Wird das Dokument in ein anderes eingebettet, so bestimmt das einbettende Dokument in der Regel den verfügbaren Darstellungsbereich. Das kann allerdings auch so erfolgen, dass wiederum auf das einzubettende Dokument verwiesen wird, um die Größe zu bestimmen. Für den obigen Fall ohne weitere Angaben sollte das einbettende Format allerdings dann Regeln angeben, was zu tun ist, wenn das einzubettende Dokument selbst keine Angaben zur Größe enthält. Eine eindeutige Angabe mit dem noch zu diskutierenden Attribut viewBox für das Element svg vermeidet derartige Komplikationen, ohne eine Anpassung an den verfügbaren Anzeigebereich durch Skalierung zu verhindern.

Elemente, welche direkte graphische Formen repräsentieren, wie eben text oder auch Basisformen wie Rechtecke, Kreise, Ellipsen, Polygone und allgemeine Pfade, werden in weiteren Kapiteln erläutert. Dies sind Grundformen, Pfade und Text als Graphik.

Welche spezifischen Attribute es für ein Element gibt, ist jeweils bei der Beschreibung des Elementes angegeben. Oft hat der Wert eines Attributes eine bestimmte Struktur. Diese ist dann auch genau beschrieben. Sofern es sich um einen immer wiederkehrenden Typ handelt, ist er auch im Kapitel Grunddatentypen erläutert. In obigem Beispiel ergibt sich zum Beispiel die Frage, was als Wert jeweils für x und y und font-size notiert werden kann. Es wird etwa die Schreibweise '50.5' verwendet und nicht '50,5'. Letzteres hätte gegebenenfalls entweder eine andere Bedeutung für x und y als vermutlich beabsichtigt oder wäre sogar ein fehlerhafter Wert für font-size. Wie Zahlen zu notieren sind, ist ebenfalls im Kapitel Grunddatentypen erläutert.

Während die Elemente samt ihren Attributen festlegen, was dargestellt werden soll, gehört obiges font-size zu den Eigenschaften oder Präsentationsattributen, die festlegen, wie etwas dargestellt werden soll. Mit dem Präsentationsattribut font-size wird die Größe der Schrift des Textes angegeben. Präsentationsattribute werden wie gewöhnliche Attribute notiert, haben im Detail aber ein etwas anderes Verhalten, was dem von Eigenschaften in CSS entspricht, die es gleichnamig ebenfalls gibt. Bei obigem Beispiel bleiben da noch zahlreiche Fragen hinsichtlich der Präsentation offen, etwa in welcher Farbe, welche Schriftart etc. Eigenschaften und Präsentationsattribute werden im Kapitel Grafiken formatieren ausführlich vorgestellt. Diese Fragen werden in dem konkreten Beispiel für die Präsentation vom Darstellungsprogramm automatisch beantwortet. Das funktioniert, weil SVG für alle Präsentationsattribute, Eigenschaften und Attribute Rückfallwerte oder ein Rückfallverhalten vorsieht, auf welche vom Darstellungsprogramm zurückgegriffen wird, wenn es im Dokument keine weiteren anwendbaren Angaben gibt. In einigen Fällen, die in obigem Beispiel nicht vorliegen, ist allerdings die Angabe gewisser Attribute notwendig, sonst ist das Dokument fehlerhaft und die Darstellung kann abgebrochen werden.

Das anfängliche Koordinatensystem von SVG

Der Ursprung des anfänglichen Darstellungsbereiches befindet sich links oben, die x-Richtung zeigt nach rechts, die y-Richtung nach unten. In SVG ist es auch einfach möglich, neue Koordinatensysteme einzuführen oder Inhalte zu transformieren. Dies wird im Kapitel Transformationen erklärt.

Alle Elemente werden entsprechend wieder geschlossen. Das ist immer so bei XML und nicht spezifisch für SVG.

Rechts oben neben diesem Text ist zu sehen, wie eine typische Ausgabe aussehen könnte. Besonders bei Textinhalt sind die Rückfallwerte so definiert, dass die Ausgabe nicht eindeutig ist, also je nach Darstellungsprogramm etwas anders ausfallen darf.


Welche Informationen vermittelt das erste Beispiel?[Bearbeiten]

  1. Jedes SVG-Bild befindet sich im Element svg zwischen der Anfangsmarkierung <svg> und der Endmarkierung </svg>
  2. In dem svg wird ein Namensraum angegeben: xmlns="http://www.w3.org/2000/svg". Dies ist notwendig, um das Format SVG selbst zu identifizieren. Gegebenenfalls gibt es Angaben zu weiteren Namensräumen, um weitere verschiedene verwendete XML-Formate zu identifizieren und miteinander zu mischen. Bei SVG sind es oft XLink, XHTML, RDF oder MathML. Es ist aber auch jedes andere XML-Format möglich. Es wird allerdings nicht jedes Format von jedem Darstellungsprogramm interpretiert. SVG hat aber definierte Regeln, wie nicht interpretierte andere Formate im Zweifelsfalle zu ignorieren sind. Es hat auch Regeln, wo Inhalte in anderen Formaten zu notieren sind, damit sie nicht ignoriert werden, sofern das Darstellungsprogramm sie kennt.
  3. Eine Versionsangabe dokumentiert, welche Version von SVG im Dokument verwendet wird.
  4. Es gibt Elemente, die der Struktur und der Arbeitserleichterung für den Autor dienen, und andere für die Angabe von graphischen Inhalten. Daneben gibt es weitere Elementtypen, etwa solche, die einen Maldienst wie ein Muster oder einen Farbverlauf definieren.
  5. Ein Element title ist wichtig als Textrepräsentation des gesamten Dokumentes.
  6. Die Elemente können Attribute besitzen (hier dargestellt in blau), denen Werte (rot) zugewiesen werden. Elemente samt ihren Attributen beschreiben, was für ein Objekt dargestellt wird. Das Element selbst macht mit seinem Namen eine allgemeine Angabe, die Attribute bestimmen eher im Detail, um was es sich handelt.
  7. Daneben gibt es weitere allgemein anwendbare Attribute wie xml:lang, die jedes Element und dessen Inhalt näher beschreiben können.
  8. Eigenschaften oder Präsentationsattribute bestimmen, wie Inhalte dargestellt werden.
  9. Das anfängliche Koordinatensystem von SVG arbeitet mit der Einheit Pixel des jeweiligen Ausgabegerätes. Der Ursprung befindet sich links oben, davon wird die x-Achse nach rechts gezählt und die y-Achse nach unten.

Grunddatentypen[Bearbeiten]

In SVG teilen einige Attributwerte und Eigenschaftswerte eine gemeinsame Datenstruktur oder -syntax. Wenn ein Attributwert oder Eigenschaftswert eine solche allgemeine Struktur hat oder aus einer Liste solcher Strukturen besteht, ist in der Beschreibung jeweils nur ein Schlüsselwort angegeben.

Solch allgemeine Strukturen sind hier erläutert. Beim ersten Lesen kann ein Überfliegen reichen, im Zweifelsfalle ist das aber später genau nachzusehen, weil davon die Funktion diverser Anwendungen abhängen kann.

Zahlen[Bearbeiten]

Häufig ist in Form von Zahlen anzugeben, wo eine graphische Form positioniert sein soll oder wie groß sie ist, allgemein der Wert eines Attributes oder einer Eigenschaft. Die verwendbaren Zahlen sind in SVG angegeben. Wichtig ist etwa bei nicht ganzzahligen Zahlen, dass zur Abtrennung des nichtganzzahligen Teiles ein Punkt '.' verwendet wird, nicht wie im deutschen Sprachraum ein Komma. Einmal abgesehen von Farbangaben, die getrennt diskutiert werden, erfolgen die Angaben im Dezimalsystem (Ziffern 0 bis 9).

Ganze Zahlen als einzig erlaubte Werte kommen in SVG eher selten vor, können aber ebensogut wie nichtganzzahlige Zahlen notiert werden.

Folgendes sind Beispiele für korrekt notierte Zahlen:

  • 73.1234
  • -0.002
  • .154
  • -.897
  • +13.2
  • 0000.123
  • 1.24E+2 (wissenschaftliche Notation, hinter dem E nur ganze Zahlen, Vorzeichen optional)
  • 1.24e+2 (wissenschaftliche Notation)
  • 1E0 (wissenschaftliche Notation)
  • -.0E-1 (wissenschaftliche Notation)

Folgendes sind Beispiele für falsch notierte Zahlen:

  • 73,1234 (Komma nicht als Trennzeichen für den nicht ganzzahligen Bereich)
  • 1.000,7432 (keine weiteren Trennzeichen außer dem Punkt für den nicht ganzzahligen Bereich)
  • 1,000.7432 (keine weiteren Trennzeichen außer dem Punkt für den nicht ganzzahligen Bereich)
  • - .897 (Leerzeichen zwischen Vorzeichen und Zahl nicht erlaubt)
  • + 13.2 (Leerzeichen zwischen Vorzeichen und Zahl nicht erlaubt)
  • 1.24D+2 (für wissenschaftliche Notation nur E oder e)
  • 7.9e-1.7 (hinter dem E nur ganze Zahlen)
  • A8 (keine Hexadezimalnotation)
  • E+2 (vor dem E muss eine Zahl stehen)


Ferner ist der Bereich eingeschränkt, aus dem Zahlen verwendet werden können, bei den tiny-Profilen ist der erlaubte Bereich -32767.9999 bis +32767.9999
Zudem dürfen nicht mehr als 4 Stellen hinter dem Punkt angegeben werden.

Diese Einschränkung hängt vor allem damit zusammen, dass tiny-Dokumente von Mobiltelephonen interpretiert werden können sollen. Diese haben nicht so leistungsfähige Prozessoren wie vollwertige Rechner oder notebooks. Aufgrund der technischen Einschränkung hilft es natürlich auch nicht, diese Beschränkung mit Tricks wie Skalierungen und Verschiebungen von Koordinatensystemen zu umgehen (obgleich dies nicht explizit ausgeschlossen wurde).

Bei dem kompletten Profil 1.1 ist der erlaubte Bereich deutlich größer, mindestens -3.4e+38 bis +3.4e+38 muss interpretiert werden. Natürlich, sofern es für das Dokument ausreicht, ist es vorteilhaft, sich auf Werte zu beschränken, die für tiny erlaubt sind, so können diese Dokumente von allen Darstellungsprogrammen interpretiert werden, wenn sie keine weiteren Angaben enthalten, die im tiny-Profil nicht vorkommen.


Längen[Bearbeiten]

Längen beschreiben einen Abstand. Eine Länge ist eine Zahl, optional gefolgt von einer Einheit. In den tiny-Profilen entfällt die Einheit mit Ausnahme der Längenangaben in den Attributen width und height des Hauptelementes svg. Ohne Angabe einer Einheit ist die Einheit '1' im lokalen Koordinatensystem. Mögliche Einheiten sind die in CSS2.0 (!) genannten, für SVG 1.1 und SVG tiny 1.2: em, ex, px, pt, pc, cm, mm, in und Prozentangaben.

em und ex beziehen sich auf die aktuelle Größe der Schriftart.

px entspricht 1 in lokalen Koordinaten.

Die absoluten Einheiten pt, pc, cm, mm und in sind alle eindeutig ineinander umrechenbar. Zur Umrechnung dieser Einheiten in px oder lokale Koordinaten braucht das Darstellungsprogramm allerdings immer eine weitere Information, zum Beispiel über die Auflösung des Monitors oder Druckers, wo die Graphik darzustellen ist. Auflösung ist hier im üblichen Sinne gemeint als Pixel pro Meter oder in amerikanischen Einheiten dpi (dots per inch). Zum einen ist dieser Umrechnungsfaktor insbesondere bei Monitoren vielen Darstellungsprogrammen nicht bekannt und zum anderen kann der Faktor je nach Monitor und Nutzer variieren. Genaugenommen wäre die Angabe der Auflösung bei den meisten Betriebssystemen und Monitoren seit Jahren problemlos verfügbar, viele Darstellungsprogramme lesen diese verfügbare Information aber nicht aus, sondern arbeiten mit willkürlichen Schätzungen.

So oder so ist dem Autor der Umrechnungsfaktor nicht bekannt, was die Anzeige für ihn beim späteren Nutzer schwer vorhersagbar macht, wenn absolute Einheiten insbesondere mit lokalen Einheiten gemischt werden.

Die Größe von em oder ex kann der Autor hingegen im Dokument entweder mit absoluten Einheiten oder in lokalen Einheiten eindeutig festlegen. Geschieht dies nicht, ergibt sich em aus den Voreinstellungen des Nutzers. ex ergibt sich aus der jeweiligen Schriftart relativ zu em. Soweit der Autor keine eigene Schriftart angelegt hat, wo diese Einheit präzise festgelegt ist, ist auch hier der Umrechnungsfaktor relativ zu em nur schwer vorhersagbar.

Bei einer Mischung von solchen Einheiten mit Angaben im lokalen Koordinatensystem wird es also dazu kommen, dass der Autor das jeweilige Ergebnis nicht vorhersagen kann. Es empfiehlt sich also in der Regel das Vorgehen wie bei den tiny-Profilen, Einheiten nur bei width und height des Hauptelements svg anzugeben, dann ist sichergestellt, dass die Größen innerhalb der Graphik relativ zueinander immer gleich sind.

Prozentangaben werden bei verschiedenen Anwendungen unterschiedlich interpretiert. Bezieht sich die Angabe auf einen Anzeigebereich, wie bei width und height des Hauptelementes svg, so ist der prozentuale Anteil des verfügbaren Anzeigebereiches gemeint. Bei anderen Prozentangaben, die sich auf den Anzeigebereich beziehen, ist das der prozentuale Anteil der Diagonale desselben.

Bei der Interpretation des Dokumentes werden die Einheiten jeweils in lokale Einheiten umgerechnet, bevor der graphische Inhalt dargestellt wird. In der Praxis zeigt sich, dass viele Darstellungsprogramme Probleme mit der korrekten Umrechnung haben (Stand: Ende 2010). Besonders bei der Addition und Interpolation bei Animationen können grobe Fehler auftreten, weswegen dringend zu raten ist, keine verschiedenen Einheiten anzugeben und am besten alles in lokalen Einheiten zu notieren, um Problemen aus dem Wege zu gehen. Explizit ausgenommen sind davon die genannten width und height des Hauptelements svg, kombiniert mit einer viewBox in lokalen Koordinaten kann dort eine Größenangabe in absoluten Einheiten, in em, ex oder Prozent sehr sinnvoll sein und hat nur zur Folge, dass der Inhalt einmal komplett skaliert wird. Allerdings ist meist bei der Anzeige auf einem Monitor nicht damit zu rechnen, dass bei einer Angabe wie width="10cm" wirklich eine Anzeige mit einer Breite von 10cm erfolgt. Aufgrund der genannten Mängel der Darstellungsprogramme wird sich vermutlich meist eine andere Breite der Darstellung auf dem Monitor ergeben. Drucker können solche Angaben eher korrekt umsetzen, sofern diese SVG interpretieren können. Da der Fehler der Darstellungsprogramme allerdings nur auf einem falschen Konversionsfaktor beruht, bleibt immerhin das Aspektverhältnis korrekt.

Umrechnung zwischen den Einheiten und Beschreibung in Tabellenform:

Einheit SVG-Abkürzung Beschreibung
Pixel px Ein Pixel, eine Einheit in lokalen Koordinaten
Geviertbreite und -höhe em Schriftgröße der aktuellen Schriftart
x-Höhe ex Die Höhe des Buchstabens x in der aktuellen Schriftart (bei einer Schriftart immer relativ zu em exakt festlegbar, beziehungsweise geschätzt, wenn nicht festgelegt und kein x vorhanden ist)
Punkt, englisch: point pt 0.3527mm oder 1/72 Zoll
Pica pc 4.23mm oder ⅙Zoll oder 12pt
Millimeter mm ein Millimeter
Zentimeter cm zehn Millimeter
Zoll, englisch: inch in 25.4 Millimeter

Koordinaten[Bearbeiten]

Eine Koordinate ist eine Längenangabe im lokalen Koordinatensystem, also der Abstand zum Ursprung in Richtung der x- beziehungsweise y-Achse.


Listen[Bearbeiten]

In SVG sind Attributwerte häufig Listen, zum Beispiel von Zahlen. Wie die Listen zu notieren sind, ist insbesondere in SVG 1.1 nicht ganz einheitlich geregelt, in SVG tiny 1.2 wurde jedoch versucht, dies weitgehend zu verschiedenen Gruppen zu vereinheitlichen.

Oft geht es um Listen, bei denen die Listenpunkte mit Leerraum (englisch: whitespace) zu separieren sind. Dabei handelt es sich neben dem normalen Leerzeichen auch um jene Zeichen, die verwendet werden, um Zeilenumbrüche im Quelltext zu erreichen. Je nach Betriebssystem wird das mit einem oder mehreren Zeichen erreicht, die alle als Leerraum angesehen werden. Es können dann mehrere davon in beliebiger Reihenfolge zur Separation genommen werden. Auch der Liste vorangestellter oder nachfolgender Leerraum ist zulässig.

Ein weiterer Listentyp ist der mit einem Komma als Separator. Auch da kann vor und nach dem Komma noch Leerraum stehen. Ein Komma darf jedoch weder dem ersten Listenwert vorangehen, noch dem letzten folgen (Im Falle von Animationen wird anstatt des Kommas ein Semikolon verwendet. Damit können dann auch Listen animiert werden).

Zudem gibt es dann die Möglichkeit, dass der Autor sich bei jedem Separator aussuchen kann, ob dies nur Leerraum ist oder auch ein Komma enthält. Dies ist die häufigste Möglichkeit. Die wird auch kurz 'durch Leerraum oder Komma separierte Liste' genannt.

Leerraum in diesem Sinne sind als unicode: #x9, #xD, #xA, #x20
oder anders notiert: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D),
also das normale Leerzeichen, Tabulatorzeichen, Zeilenvorschub und Wagenrücklauf.


IRI, URI, URL[Bearbeiten]

IRI (englisch: internationalised resource identifier), URI (englisch: unified resource identifier) und URL (englisch: unified resource locator) sind Referenzen zu (anderen) Dokumenten oder Dokumentfragmenten. Die Identifizierer sind etwas allgemeiner als die Lokatoren. Letztere bezeichnen vor allem eindeutig, wo das bezeichnete Dokument(fragment) zu finden ist, während Identifizierer auch der eindeutigen Identifizierbarkeit dienen können, nicht immer auch der direkten Lokalisierbarkeit.

Derartige Konstruktionen sind formatunabhängig festgelegt, also nicht spezifisch für SVG.

An einigen Stellen ist auch eine funktionale Notation vorzunehmen, besonders bei Eigenschaften oder den damit äquivalenten Präsentationsattributen trifft dies zu. Die funktionale Notation einer IRI sieht wie folgt aus: url("IRI") Dabei steht IRI für die zu notierenden Referenz. Die Buchstabenkombination 'url' gilt dabei unabhängig davon, ob es sich um eine IRI, URI oder URL handelt.


Sprachidentifizierer[Bearbeiten]

Ein Sprachidentifizierer dient der Angabe einer gesprochenen oder geschriebenen Sprache wie deutsch oder englisch. Insbesondere kann für Fragmente von Dokumenten, die Text enthalten, damit maschinenlesbar und -verstehbar die verwendete Sprache angegeben werden. Dazu dienen eindeutig definierte Sprachmarkierungen. Derartige Konstruktionen sind formatunabhängig festgelegt, also nicht spezifisch für SVG.


Fragmentidentifizierer[Bearbeiten]

Fragmentidentifizierer sind eindeutige Bezeichner für Dokumentfragmente, die also in dem jeweiligen Dokument nicht mehrmals in gleicher Form auftauchen dürfen. Typische Attribute, die einen Fragmentidentifizierer als Wert haben, sind in SVG id und in SVG tiny 1.2 und XML allgemein auch xml:id.

Die Konstruktion beginnt immer mit einem Buchstaben (a-z, A-Z ohne Sonderzeichen) oder dem Zeichen '_' oder ':', optional gefolgt von weiteren Buchstaben oder Ziffern oder folgenden Zeichen: '.', '-', '_', ':'. Derartige Konstruktionen sind formatunabhängig festgelegt, also nicht spezifisch für SVG. Exakt sind die erlaubten Zeichen in der XML-Spezifikation unter dem Stichwort 'Name' nachzulesen.

Medientypen[Bearbeiten]

Insbesondere wenn auf andere Dokumente verwiesen wird oder diese in das aktuelle Dokument eingebettet werden sollen, ist es relevant, den Medientyp des jeweiligen anderen Dokumentes machinenlesbar und -verstehbar angeben zu können, dazu dienen speziell definierte Medientypenmarkierer oder internet-Medientypen, ehemals auch MIME-Typen genannt (englisch: Multipart Internet Mail Extensions).

Genauigkeit[Bearbeiten]

Hinsichtlich der Genauigkeit der Darstellung werden in den Spezifikationen ebenfalls Angaben gemacht. In der finalen Darstellung auf dem Bildschirm (oder beim Ausdruck) soll eine Genauigkeit nicht schlechter als ein Pixel des Ausgabegerätes erreicht werden, wenn möglich besser. Bei einer Entdeckung einer größeren Ungenauigkeit bei einem Darstellungsprogramm ist dies also das Kriterium, um zu beurteilen, ob das Programm fehlerhaft arbeitet oder ob das eine erlaubte Toleranz ist.


Zeichenreihenfolge[Bearbeiten]

In SVG wird das sogenannte Malermodell verwendet, um die Zeichenreihenfolge festzulegen, wenn mehrere darzustellende Elemente in einem Dokument vorliegen - was meistens der Fall sein wird. Die darzustellenden Elemente werden in der Reihenfolge gemalt, wie sie im Quelltext stehen. Also was weiter vorne steht ist unten und gegebenenfalls teilweise oder ganz verdeckt. Was zuletzt im Quelltext steht, ist oben und verdeckt gegebenenfalls Elemente, die früher im Quelltext stehen.

Ausnahmen ergeben sich dadurch, dass nicht alle Elemente darzustellen sind. Das ist dann im Detail zu diskutieren, wenn die entsprechenden Elemente vorgestellt werden. Als kurzer Ausblick: Elemente, die in einem defs-Element notiert sind, sind nicht direkt darzustellen, haben im Malermodell also auch keine bestimmte Position, solange sie nicht zum Beispiel mit dem Element use zur Darstellung referenziert werden. In diesem Falle wird das darzustellende Element use dann durch das referenzierte Elemente ersetzt und die Position von use im Quelltext bestimmt die Zeichenreihenfolge.

Für einen Autor ist also hauptsächlich relevant, die Elemente im Quelltext in der für ihn richtigen und wichtigen Reihenfolge anzuordnen, wenn sie sich überlappen. Diese Reihenfolge ist allenfalls mit subtilen Tricks zu ändern. Für zukünftige Versionen von SVG wird allerdings über eine Funktionalität ähnlich der Eigenschaft z-index von CSS diskutiert.

Der wesentliche Trick bei einer scheinbaren Änderung der Zeichenreihenfolge besteht darin, den Betrachter über den Sachverhalt hinwegzutäuschen, dass die Zeichenreihenfolge gar nicht geändert wurde. Dazu werden einige verschiedene Möglichkeiten von SVG ausgenutzt und Eigenschaften des menschlichen Denkens und der Wahrnehmung, welche von der Evolution her darauf optimiert sind, Objekte räumlich einzuordnen und zu interpretieren und veränderliche Strukturen als Bewegungen zu interpretieren.

Verkeilte Vierecke

Das erste Beispiel zeigt sowohl den einfachen Sachverhalt, dass nacheinander im Quelltext stehende Objekte übereinander gemalt werden, als auch eine Methode, mit der suggeriert wird, dass dem nicht so sei:
Verkeilte Vierecke.
Vier teiltransparente symmetrisch angeordnete Rechtecke liegen so, dass eine Ecke eines Rechtecks jeweils eine Ecke eines anderen Rechtecks verdeckt. Das passiert reihum, bis es beim letzten Rechteck zu einem Problem der Zeichenreihenfolge kommt. Daher wird dieses in Teile zerlegt und der problematische Teil wird vor den anderen Rechtecken gemalt.

Ein problematisches Objekt wird also an unkritischen Stellen in mehrere Objekte aufgetrennt, die entsprechend dem gewünschten Effekt im Quelltext in die beabsichtigte Reihenfolge gebracht werden.

Teilweise durchsichtige verkeilte Vierecke

Das Vorgehen wird insbesondere bei teildurchsichtigen Objekten problematisch, wenn diese aufgrund von Rundungsfehlern vom Darstellungsprogramm geringfügig falsch positioniert oder dimensioniert werden. Wegen der Teiltransparenz kann hier nicht mit einem Überlapp gearbeitet werden, um solche Ungenauigkeiten der Darstellungsprogramme zu vertuschen. Folgendes ist ein entsprechendes Beispiel mit teilweise durchsichtigen Füllungen und Strichen:
Teilweise durchsichtige verkeilte Vierecke.
Je nach Größe des Darstellungsbereiches ist bei einigen Programmen der Schnitt zu erkennen. Dies kann weitgehend umgangen werden, wenn der Schnitt entlang von ohnehin vorhandenen Kanten erfolgt. Bei so einfachen Objekten wie in diesem Beispiel ergibt sich ferner die Möglichkkeit, die aus der Teiltransparenz resultierenden Farbwerte zu berechnen und die kritischen Stellen mit entsprechenden nicht transparenten Objekten zu verdecken.

Tribar als Beispiel für ein Penrose-Vieleck

Mit präziser Berechnung und mit ebenfalls in SVG verfügbaren Farbverläufen kann ferner der Eindruck eines dreidimensionalen Objektes erweckt werden, obwohl es in SVG immer nur um Flächen geht. Dies kann sogar so weit ausgenutzt werden, dass dem Betrachter Objekte untergeschoben werden können, die lokal räumlich aussehen, als Gesamtobjekt aber so gar nicht möglich sind:
Tribar als Beispiel für ein Penrose-Vieleck.
Der Eindruck von vorne und hinten wird hier einfach durch eine präzise berechnete Anordnung von Flächen erweckt, die zudem mit Farbverläufen gefüllt sind, die einen Beleuchtungseffekt vortäuschen und so das Objekt plastisch erscheinen lassen.

Umrundung eines Objektes

Noch interessanter wird die Situation, wenn sich die Reihenfolge scheinbar zeitlich ändern soll. Bei folgendem Beispiel soll der Eindruck erweckt werden, dass sich ein Planet um eine Sonne dreht. Bei einer Seitenansicht ist der Planet also einmal vor der Sonne und einmal dahinter:
Umrundung eines Objektes.
Der gewünschte Effekt wird bei diesem Beispiel dadurch erreicht, dass einfach ein Objekt vor der Sonne animiert wird und eines dahinter. Mit einem passenden Zeitablauf wird einfach jeweils eines der beiden Objekte komplett transparent gesetzt. Entsprechend könnte auch die Anzeige oder Sichtbarkeit animiert werden. Ein anderer Ansatz wäre ein zeitabhängiger Ausschnitt (clip-Funktion in SVG), oder eine zeitabhängige Maske (mask-Funktion in SVG), wobei das eine Objekt als Ausschnitt beziehungsweise Maske für die Darstellung der anderen dient.

Zufällig bewegte Kreise

In einer komplizierteren Situation können auch einfach alle Objekte im Element defs notiert werden. Diese werden von entsprechend vielen use-Elementen referenziert, bei denen mit dem gewünschten Zeitablauf einfach animiert wird, welches Objekt jeweils referenziert wird:
Zufällig bewegte Kreise.

Animierter Sterntetraeder

Kombiniert mit präziser Berechnung des Zeitablaufes und der perspektivischen Projektion kann so zumindest für einfache Objekte leicht der Eindruck von dreidimensionalen bewegten Objekten erzeugt werden:
Animierter Sterntetraeder.

Kompliziertere aperiodische Zeitabläufe sind so allerdings nur über einen endlichen Zeitraum darstellbar. Insofern ist es sehr hilfreich, dass für die nächste Version von SVG eine Möglichkeit vorgesehen ist, die Zeichenreihenfolge zu ändern. Auch perspektivische Projektionen sind in Vorbereitung, wodurch sich in Zukunft für den Autor der rechnerische Zeitaufwand deutlich reduzieren wird, um solche Effekte zu erreichen.


Dokumentstruktur[Bearbeiten]

Dokumentstruktur, Einführung[Bearbeiten]

SVG ist entweder in Form von eigenständigen Dokumenten vorzufinden oder als Dokumentfragment innerhalb von anderen (XML)-Dokumenten, in Zukunft eventuell auch in HTML5-Dokumenten.

SVG braucht einen Zeichenbereich mit klar definierten Koordinaten, daher ist SVG immer in einem Element svg zu finden, welches das primäre Koordinatensystem aufspannt. Dabei zeigt die x-Richtung von links nach rechts, die y-Richtung von oben nach unten. Der Zeichenbereich ist konzeptionell eine unendliche Ebene, von der im Anzeigebereich ein Teil angezeigt wird, welcher vom Autor präzise festgelegt werden kann.

Weitere Elemente dienen der prinzipiellen Strukturierung und der effektiven Nutzbarkeit von Inhalten, nicht unbedingt der unmittelbaren graphischen Darstellung. Solche Strukturelemente werden in diesem Kapitel beschrieben.

Element svg[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3.5 3.2 4  ?  ?  ?

Das Element svg ist ein Gruppierungselement und enthält ganz allgemein den SVG-Inhalt eines SVG-Dokumentes oder -Fragmentes. In den tiny-Profilen gibt es exakt ein svg-Element in einem SVG-Dokument. Dies ist das Haupt- oder Wurzelelement (englisch: root) des Dokumentes im Sinne von XML.

In der Vollversion von SVG 1.1 können darin weitere svg-Elemente ohne diese besondere Funktion eines Wurzelelementes auftreten, welche aber auch einen eigenen Anzeigebereich erhalten.

Für das Element spezifische Attribute:

Attribut version[Bearbeiten]

Das Attribut gibt die Sprachversion an, welche für das aktuelle Dokument oder Dokumentfragment verwendet wird. Mögliche Werte sind derzeit '1.0' (veraltet), '1.1' und '1.2'. Ist keine Versionsangabe vorhanden, kann das Darstellungsprogramm oder allgemeiner der Leser des Quelltextes annehmen, dass die Version die 'aktuelle' Version ist. Dabei hängt 'aktuell' zwangsläufig davon ab, wann das Programm veröffentlicht wurde, beziehungsweise wann jemand sich den Quelltext anguckt. Autoren ist also zu empfehlen, eine konkrete Version anzugeben, um ein definiertes Dokument zu bekommen.

Eine Versionsangabe wird in der Praxis allerdings kaum Einfluss darauf haben, wie ein Darstellungsprogramm den Inhalt darstellt. Nach dem aktuellen Stand der Technik haben Darstellungsprogramme bestenfalls eine Version implementiert. Allerdings kann das Darstellungsprogramm den Nutzer darüber informieren, dass Probleme auftreten können, falls die angegebene Version nicht mit der dem Programm bekannten Version übereinstimmt, was den Nutzer dazu veranlassen könnte, sich gegebenenfalls nach einem neueren Programm umzusehen, wenn es Zweifel an der Darstellung gibt.

Formal kann auch nur mit Angabe der Version entschieden werden, ob das Verhalten eines Darstellungsprogrammes korrekt ist oder nicht. Zudem kann es bei späteren Aktualisierungen oder Modifikationen des Dokumentes helfen zu identifizieren, nach welchen Regeln die bisherige Version erstellt wurde.

Nach Möglichkeit wird versucht, kompatible Versionen einer Sprache in dem Sinne zu spezifizieren, dass Notationen, die in einer früheren Version spezifiziert wurden, in einer neueren nicht plötzlich eine neue Bedeutung bekommen. In einer neueren Version werden daher vor allem neue Funktionalitäten mit neuen Notationen hinzugefügt oder die Notation so erweitert, dass die neue Notation nicht zu Missverständnissen gegenüber der alten Version führt. Indes können in einer alten Version auch Fehler oder Widersprüche vorliegen, die nach Bekanntwerden in einer neuen Version behoben wurden. Für solche problematischen Bereiche der alten Version gibt es kein definiertes Verhalten, welches erst in der neuen Version vorliegt.

Ein vorsichtiger Autor wird also eher eine neue Version einer Sprache wählen, dort aber für wichtige Bestandteile nur Strukturen, die bereits in den älteren Versionen problemlos verfügbar waren. Dies Vorgehen erhöht die Chance, ein Dokument mit gut definiertem Verhalten zu veröffentlichen, was sowohl von alten als auch zukünftigen Programmen hinreichend gut interpretiert werden kann.

Aktuell zeichnet sich zudem für die zweite Ausgabe der Empfehlung von SVG 1.1 ab, dass darin in einigen, zum Glück wenigen Fällen rückwärtsinkompatible Änderungen vorgenommen werden. Meistens passiert das nur für Bereiche, die ohnehing bislang von Darstellungsprogrammen fehlerhaft interpretiert wurden, wo also vermutet wird, dass sie ohnehin kein Autor verwendet hat. Da es allerdings keine Möglichkeit gibt, anzugeben, welcher Ausgabe der SVG 1.1-Empfehlung ein Dokument folgt, empfiehlt es sich, ganz auf solche problematischen Bereiche zu verzichten, da sie nicht eindeutig definiert sind. Bei anderen Bereichen kann auch explizit in der zweiten Ausgabe angegeben sein, dass sie nicht definiert sind, darauf sollte dann natürlich auch im Dokument verzichtet werden - oder zumindest sollte sich ein Autor darauf verlassen, dass verschiedene Darstellungsprogramme derart problematische Bereiche dann auch verscheiden darstellen werden oder können.

Attribut baseProfile[Bearbeiten]

Das Attribut gibt das Basisprofil an, welches für das aktuelle Dokument verwendet wird. Das ist dann jeweils eine Auswahl von Elementen oder Attributen der jeweiligen Version.
Mögliche Werte sind derzeit 'none', 'full', 'basic' oder 'tiny'. 'none' liefert keine Information und wird angenommen, wenn das Attribut nicht gesetzt ist.
'tiny' gibt es für die Versionen 1.1 und 1.2 und kennzeichnet einen Teilbereich von SVG, der sich gut für Mobiltelephone und allgemein weniger leistungsstarke Geräte eignet. Das ist bislang das einzige Profil für die Version 1.2 und wird es vermutlich auch bleiben, da die Entwicklung eher dahingeht, dass zum einen neue Module formuliert werden, zum anderen dann eine Version 2.0 versucht wird, in der die Module und weitere neue Möglichkeiten vereint werden.
'basic' gibt es für die Version 1.1. Aufgrund des Leistungszuwachses bei Mobiltelephonen seit der Version 1.1 wurde auf diese Leistungsklasse zwischen der vollen Version und der für Mobiltelephone in 1.2 verzichtet und die 'tiny'-Variante gilt ganz allgemein für weniger leistungsstarke Geräte, grob orientiert am Leistungsstand von 2008.
'full' kennzeichnet den vollen Umfang der jeweiligen Version.

Ein Autor kann also abschätzen, dass tendenziell mehr Darstellungsprogramme seine Dokumente korrekt und vollständig interpretieren können, wenn es gelingt, nur Elemente, Attribute und Eigenschaften aus dem 'tiny'-Profil zu verwenden. Das volle Profil stellt höhere Ansprüche an das Darstellungsprogramm und die Wahrscheinlichkeit ist höher, dass Teile des Dokumentes in einigen Programmen nicht korrekt interpretiert werden.
Im Detail kann sich allerdings die Implementierungsstrategie bei verschiedenen Anbietern von Darstellungsprogrammen von diesen Profilen unterscheiden. Es wäre zu einfach anzunehmen, dass nur Programme veröffentlicht werden, die ein Profil komplett interpretieren können.

Attribute width und height[Bearbeiten]

width und height geben die eigentliche Breite und Höhe des Dokumentes an, der Wert ist jeweils eine Länge größer oder gleich 0. Bei 0 wird das Element samt Inhalt nicht angezeigt. Negative Werte werden nicht unterstützt. Dies bedeutet in SVG tiny 1.2, dass das Attribut mit dem unzulässigen Wert ignoriert wird. In SVG 1.1 ist ein negativer Wert ein Fehler, der zum Abbruch der Darstellung führt.

width und height sind animierbar. Sofern nicht angegeben, wird als Wert 100% angenommen. Das entspricht dem gesamten verfügbaren Anzeigebereich in der jeweiligen Richtung.

Attribute x und y[Bearbeiten]

Die Attribute haben für das Wurzelelement keine Bedeutung, nur wenn svg als Gruppenelement verwendet wird. Daher treten diese Attribute in den tiny-Profilen nicht auf.

Der Wert ist jeweils eine Koordinate, also wo das Element innerhalb des jeweiligen Koordinatensystems dargestellt werden soll. x und y geben dann die linke obere Ecke an. Sofern nicht angegeben, wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribut viewBox[Bearbeiten]

Beispiel: 'Hello World' jetzt mit viewBox

Das Attribut gibt eine rechteckige Region an, in welche der darzustellende Inhalt fällt. Der Wert ist eine Liste von vier Zahlen, mit Leerraum oder Komma separiert. Die erste Zahl ist der minimale x-Wert, die zweite der minimale y-Wert, die dritte die Breite, die vierte die Höhe. Die darzustellenden Inhalte haben also Koordinaten bezogen auf dieses System, bei dem der Ursprung bei 0,0 liegt. Es können auch Elemente außerhalb des Bereiches der viewBox notiert werden, diese werden dann vermutlich aber gar nicht oder nur teilweise dargestellt.

Die viewBox-Region wird wiederum so skaliert, dass sie in den durch width und height definierten Anzeigebereich passt. Ist viewBox nicht angegeben, so fallen die Koordinaten mit denen des Anzeigebereiches zusammen, der dann den Ursprung links oben mit den Koordinaten 0,0 hat.

Negative Werte für Breite und Höhe sind unzulässig und sind in SVG1.1 ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt. In SVG tiny 1.2 wird in dem Falle das Attribut einfach ignoriert.

In SVG tiny 1.2 kann auch der Wert 'none' angegeben werden, um explizit festzulegen, dass keine viewBox anzuwenden ist.

Das Attribut ist animierbar und ist auch für andere Elemente verfügbar, die einen neuen Anzeigebereich aufspannen.

In der Praxis ist die Verwendung von viewBox beim Wurzelelement in der Regel zu empfehlen. Dies erleichtert gegebenenfalls die Erweiterung des Inhaltes in der sichtbaren Zeichenebene und auch die Anpassung von der Größe her an verschiedene Anzeigebereiche.

Beispiel:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2" baseProfile="tiny" 
     width="300" height="400"
     viewBox="0,0,100,100"
     xml:lang="en">
   <title>Hello World</title>
         <text x="50" y="80">Hello World</text>
</svg>

Ohne Angabe von width und height wird auf den Darstellungsbereich des Programmes skaliert, das entspricht jeweils einem Wert von 100%; entsprechend größer oder kleiner wird der Bereich, wenn andere Werte als 100% verwendet werden.

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2" baseProfile="tiny" 
     viewBox="0,0,100,100"
     xml:lang="en">
   <title>Hello World</title>
         <text x="50" y="80">Hello World</text>
</svg>

Beispiel mit width und height mit Einheiten:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="15cm" height="15cm"
     viewBox="0,0,15,15">
   <title>Quadrat</title>
     <rect x="5" y="5" width="5" height="5"/>
</svg>
Beispiel: Quadrat mit Seitenlänge 5cm


Die Größe des Anzeigebereiches ist auf 15cm x 15cm festgelegt und definiert die viewBox, so dass der Anzeigebereich innerhalb des Dokumentes nur 15 x 15 Einheiten groß ist. Da wiederum Breite und Höhe als 15cm angegeben sind, hat das Rechteck jetzt einen Abstand 5cm von oben, 5cm von der Seite mit einer Kantenlänge von 5cm.

Beispiel: Quadrat mit Seitenlänge 5cm
Wenn die Auflösung von Drucker oder Bildschirm dem Darstellungsprogramme bekannt ist, sind die Angaben mit einem Lineal nachprüfbar.

Attribut preserveAspectRatio[Bearbeiten]

Wenn viewBox angegeben ist und das Seitenverhältnis nicht zu width und height passt, kann mit preserveAspectRatio angegeben werden, wie die viewBox in den Anzeigebereich einzupassen ist.

In SVG tiny 1.1 können die Werte 'none' oder 'XMidYMid' (optional gefolgt von 'meet') angegeben werden. Ersterer Wert bedeutet, dass das Seitenverhältnis nicht erhalten bleiben muss und x- und y-Richtung unabhängig skaliert werden, bei den anderen Möglichkeiten bleibt immer das Seitenverhältnis erhalten. 'XMidYMid' bedeutet einfach, dass so skaliert wird, dass nichts übersteht. In der Richtung, in der dann im Anzeigebereich noch eine freie Fläche verbleibt, wird die skalierte viewBox zentriert. 'XMidYMid' ist bei allen Profilen die Voreinstellung.

Die Werte in SVG tiny 1.1 sind also 'none', 'none meet', 'XMidYMid' oder 'XMidYMid meet' - mit oder ohne meet bedeutet dies das gleiche.

In SVG tiny 1.2 gibt es weitere Werte:
'xMinYMin' - die skalierte viewBox wird links oben in den Anzeigebereich eingepasst.
'xMidYMin' - in x-Richtung wird gegebenenfalls zentriert, in y-Richtung nach oben eingepasst.
'xMaxYMin' - in x-Richtung wird gegebenenfalls rechts eingepasst, in y-Richtung oben.
'xMinYMid' - in x-Richtung wird gegebenenfalls links eingepasst, in y-Richtung zentriert.
'xMaxYMid' - in x-Richtung wird gegebenenfalls rechts eingepasst, in y-Richtung zentriert.
'xMinYMax' - in x-Richtung wird gegebenenfalls links eingepasst, in y-Richtung unten.
'xMidYMax' - in x-Richtung wird gegebenenfalls zentriert, in y-Richtung nach unten eingepasst.
'xMaxYMax' in x-Richtung wird gegebenenfalls rechts eingepasst, in y-Richtung nach unten.

In der Vollversion von SVG 1.1 kann anstatt 'meet' auch 'slice' angegeben werden. damit wird erreicht, dass der Anzeigebereich immer komplett ausgefüllt wird - die zu lange Richtung wird dann gegebenenfalls abgeschnitten.
Dies kann sehr hilfreich sein, wenn zum Beispiel der gesamte Anzeigebereich mit Höhe und Breite gleich hundert Prozent garantiert mit einem Muster oder einer Struktur gefüllt werden soll, die nur endlich groß ist. Damit dies unabhängig vom Aspektverhältnis funktioniert, wird mit der 'slice'-Variante das maximale Rechteck angegeben, welches noch komplett vom Muster oder der Struktur abgedeckt wird. Bei abweichendem Aspektverhältnis wird dieses Rechteck dann entsprechend beschnitten und skaliert.

Ein in SVG tiny 1.2 oder in der Vollversion von SVG 1.1 vorangestelltes 'defer' ist für ein Element svg ohne Bedeutung. Das Attribut kann jedoch auch bei anderen Elementen, die einen neuen Anzeigebereich öffnen, angewendet werden. Wenn Dateien referenziert werden, die selbst ein bevorzugtes Seitenverhältnis definieren, ist diese Angabe der referenzierten Dateien denen des Attributes vorzuziehen, wenn 'defer' gesetzt ist.

Das Attribut ist animierbar.

Beispiele:

Die Schweizer Flagge ganz normal

Hier der Quelltext der Schweizer Flagge:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="320" height="320"
     xml:lang="de">
   <title>Schweizer Flagge</title>
<rect fill="#f00" height="320" width="320"/>
<rect fill="#fff" height="60" width="200" x="60" y="130"/>
<rect fill="#fff" height="200" width="60" x="130" y="60"/>
</svg>

Alternativ eine mittige Anordnung:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="600" height="320"
     viewBox="0 0 320 320"
     preserveAspectRatio="xMidYMid meet"
     xml:lang="de">
   <title>Schweizer Flagge</title>
<rect fill="#f00" height="320" width="320"/>
<rect fill="#fff" height="60" width="200" x="60" y="130"/>
<rect fill="#fff" height="200" width="60" x="130" y="60"/>
</svg>

Oder nach unten rechts an den Rand gedrängt:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" 
     width="600" height="320" 
     viewBox="0 0 320 320" 
     preserveAspectRatio="xMaxYMax meet"
     xml:lang="de">
   <title>Schweizer Flagge</title>
<rect fill="#f00" height="320" width="320"/>
<rect fill="#fff" height="60" width="200" x="60" y="130"/>
<rect fill="#fff" height="200" width="60" x="130" y="60"/>
</svg>

Oder links oben, gegebenenfalls abgeschnitten:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="200" height="320" 
     viewBox="0 0 320 320" 
     preserveAspectRatio="xMinYMin slice"
     xml:lang="de">
   <title>Schweizer Flagge</title>
<rect fill="#f00" height="320" width="320"/>
<rect fill="#fff" height="60" width="200" x="60" y="130"/>
<rect fill="#fff" height="200" width="60" x="130" y="60"/>
</svg>

Um einen weiteren Anzeigebereich in einem SVG-Dokument zu etablieren, kann in der Vollversion von SVG 1.1 ein svg-Element in einem svg-Element gesetzt werden, wobei ebenfalls die Attribute viewBox und preserveAspectRatio darüber entscheiden, wie diese svg-Elemente in den Anzeigebereich eingepasst werden:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="-100 -100 400 400"
     preserveAspectRatio="xMinYMin slice"
     xml:lang="de">
   <title>SVG-Beispiel zum Element svg</title>
 <svg width="100" height="200" x="-80" y="-90"
      viewBox="0 0 60 200">
 </svg>
 <svg width="100" height="200" x="200" y="100"
      viewBox="0 0 30 30"
      preserveAspectRatio="xMaxYMax meet">
 </svg>
</svg>

Attribut zoomAndPan[Bearbeiten]

Ein interaktives Darstellungsprogramm sollte eine Funktionalität aufweisen, die es erlaubt, das Dokument zu vergrößern oder zu verkleinern, zu rotieren oder den Anzeigebereich zu verschieben. Dieses kann mit dem Attribut zoomAndPan beeinflusst werden.

Mit dem Wert 'disable' wird dies unterbunden, mittels 'magnify' erlaubt. Letzteres ist die Voreinstellung.

Attribut snapshottime[Bearbeiten]

Das Attribut wurde mit SVG tiny 1.2 neu eingeführt und ist daher in SVG 1.1 nicht verfügbar.

Mittels snapshottime kann ein Zeitpunkt angegeben werden, welcher charakteristisch für ein Standbild des Dokumentes ist - besonders relevant also für animierte Dokumente. Dies ist lediglich ein hilfreicher Hinweis für Darstellungsprogramme, die Vorschaubilder bereitstellen oder gegebenenfalls auch für eine Druckausgabe oder eine Konversion in ein anderes Format ein charakteristisches Standbild erzeugen sollen. Der Wert ist ein Zeitwert, wie im Abschnitt zur Animation genauer erläutert, zum Beispiel '60s' bedeutet 60 Sekunden nach dem Startzeitpunkt des Dokumentes. Alternativ kann auch 'none' angegeben werden, wenn es solch einen charakteristischen Zeitpunkt nicht gibt. Dies ist die Voreinstellung.

Attribut playbackOrder[Bearbeiten]

Das Attribut wurde mit SVG tiny 1.2 neu eingeführt und ist daher in SVG 1.1 nicht verfügbar.

In SVG tiny 1.2 gibt es auch eine Möglichkeit, Teile des Dokumentes aus dem Speicher zu löschen, um diesen zu entlasten. Ist für playbackOrder der Wert 'forwardOnly' angegeben, soll in dem Dokument nicht zeitlich rückwärts gesucht werden können, weil es solche Löschungen enthalten kann. Beim Wert 'all' sind solche Löschungen nicht zu erwarten und eine entsprechende Suche ist erlaubt, letzteres ist die Voreinstellung.

Attribut timelineBegin[Bearbeiten]

Das Attribut wurde mit SVG tiny 1.2 neu eingeführt und ist daher in SVG 1.1 nicht verfügbar.

Für die Synchronisation zeitabhängiger Bestandteile von Dokumenten, wie Animationen, Video und Audio ist ein präziser Zeitnullpunkt vorzugeben. Mit diesem Attribut kann zwischen zwei Zeitpunkten gewählt werden. Mit dem Wert 'onLoad' ist der gleiche Zeitpunkt wie für Dokumente in SVG 1.1 gemeint. Dies ist der Zeitpunkt, wenn das Dokument bis zur Endmarkierung des Wurzelelementes geladen wurde. Mittels 'onStart' liegt der Zeitnullpunkt bereits vor, wenn die Startmarkierung des Wurzelelementes komplett interpretiert wurde.

Der Unterschied kann relevant sein, wenn das Darstellungsprogramm den Inhalt noch während des Ladens progressiv aufbaut. Die Alternative ist, die Graphik komplett unsichtbar für den Betrachter im Speicher zu malen und dann mit einem Male darzustellen. Ein progressiv arbeitendes Programm kann bereits beginnen, die ersten Teile des Inhaltes darzustellen, wenn erst der Anfang der Datei geladen wurde.

Im ersten Falle mit 'onLoad' wird bei einer progressiven Darstellung also erst alles komplett geladen und gegebenenfalls nacheinander angezeigt, dann ergibt sich der Zeitnullpunkt. Im zweiten Falle liegt der Zeitnullpunkt bereits vor, wenn die Startmarkierung des svg komplett geladen und interpretiert wurde, in der Regel also unmittelbar bevor der erste Inhalt angezeigt wird. Im anderen Falle eines nicht progressiven Dokumentaufbaus wird davon ausgegangen, dass während des Ladens die Darstellung vorbereitet wird und nach Abschluss des Ladens unmittelbar die Darstellung des kompletten Inhaltes beginnt. Bei weniger effektiv arbeitenden Programmen kann also 'onLoad' auch dazu führen, dass der Zeitnullpunkt vor dem Moment liegt, wo das Dokument angezeigt wird, wenn bei solch einem Programm zwischen dem Laden und der Darstellung noch eine nennenswerte Verarbeitungszeit liegt.

Zum Beispiel kann eine mehrfache Verschachtelung von use-Elementen auch bei recht kleinen SVG-Dokumenten zu einer beachtlichen Verarbeitungszeit führen, weil auf diese Weise eine sehr große Anzahl von Kopien erzeugt werden kann.

Attribut contentScriptType[Bearbeiten]

Wenn in einem Dokument Skripte vorkommen, kann mit dem Attribut contentScriptType die vorausgewählte Skriptsprache angegeben werden. Der Typ ist ein Medientyp (ehemals MIME-Typ). Typisch für Skripte innerhalb von SVG ist zum Beispiel 'application/ecmascript', was in SVG tiny 1.2 auch die Voreinstellung ist, wenn das Attribut nicht angegeben ist. Sofern die einzelnen Skriptelemente selbst angeben, welche Skriptsprache sie verwenden, ist deren Angabe von höherem Gewicht. Der Wert dieses Attributes ist also nur ein Rückfallwert für den Fall, dass die einzelnen Skriptelemente keine Angaben beigefügt haben. In SVG 1.1 ist der voreingestellte Wert noch der veraltete Wert 'text/ecmascript', der nicht mehr verwendet werden sollte, seitdem 'application/ecmascript' verfügbar ist.

Trotz der Voreinstellung ist in SVG keine Skriptsprache vorgesehen, die interpretiert werden müsste. Wenn überhaupt, bietet sich jedoch eine an, die das in SVG definierte Dokument-Objekt-Modell (DOM) ausnutzen kann.

Attribut contentStyleType[Bearbeiten]

In der Vollversion von SVG 1.1 kann mit dem Attribut contentStyleType der voreingestellte Typ für Stilvorlagen angegeben werden. Der Typ ist ein Medientyp (ehemals MIME-Typ). Typisch ist 'text/css', was auch die Voreinstellung ist. Damit wird die Stilvorlagensprache angegeben, die innerhalb des allgemein verfügbaren Attributes style verwendet wird.

Beispiel zu svg[Bearbeiten]

Beispiel zur Verwendung von svg als Gruppierungselement

Beispiel zur Verwendung von svg als Gruppierungselement.
In diesem Dokument werden mehrere svg-Elemente verwendet, welche jeweils ein Rechteck und einen Kreis enthalten. viewBox ist immer gleich angegeben, Größe oder preserveAspectRatio aber unterschiedlich.

Der Anzeigebereich der jeweiligen svg-Elemente ist jeweils mit einem rot gerandeten Rechteck angedeutet.

W3C svg

Element g, allgemeine Gruppierung[Bearbeiten]

Mit dem Element g können mehrere graphische Elemente zu einer Einheit zusammengefasst werden, die dann zum Beispiel gemeinsam referenziert werden können oder auch transformiert oder mit Eigenschaften ausgezeichnet werden können, die vom g geerbt werden.

Ferner kann eine solche Gruppe auch mittels der Elemente title, desc und metadata eine gemeinsame Überschrift, Beschreibung und allgemein Metainformationen zugeordnet bekommen. Auch wenn bedingte Verarbeitung mit switch für mehrere Elemente zusammen gelten soll, empfiehlt sich eine Gruppierung mittels g.

Das Element selbst hat keine Attribute oder Eigenschaften, die für dieses Element spezifisch sind. Anders als das Element svg definiert es keinen neuen Anzeigebereich und hat keine spezifische inhaltliche Bedeutung, ähnlich dem Element span in (X)HTML.

W3C g

Element defs, Definitionen[Bearbeiten]

Das Element defs ist ein Behälter für Gruppen oder Elemente, die nicht direkt dargestellt werden, sondern referenziert werden. Die für effektive Verarbeitung empfohlene Platzierung dieses Elementes ist soweit wie möglich vorne im Quelltext, also am besten unmittelbar hinter title, desc und metadata des Hauptelementes svg.

Autoren sollten jeglichen Inhalt, der nicht direkt dargestellt wird, in diesem Element unterbringen, damit das Dokument auch hinsichtlich der Zugänglichkeit übersichtlich bleibt und effektiv verarbeitet werden kann. Die Anordnung referenzierter Elemente hat ferner Einfluss auf eine mögliche progressive Darstellung. Liegt der referenzierte Inhalt vor der Referenzierung, begünstigt dies eine progressive Darstellung, liegt der referenzierte Inhalt hinter der Referenzierung, verzögert dies die progressive Darstellung.

Das Element selbst hat keine Attribute oder Eigenschaften, die für dieses Element spezifisch sind.

W3C defs

Elemente title und desc, Titel und Beschreibung[Bearbeiten]

Graphische Elemente und Gruppierungselemente können jeweils einen Titel und eine Beschreibung haben. Für den Titel wird das Element title verwendet, für die Beschreibung das Element desc. Beide sollten nicht mehr als einmal als Kindelement eines Elementes vorkommen. title sollte gegebenenfalls das erste Kindelement sein, gegebenenfalls direkt gefolgt von desc (und dann metadata).

Autoren sollten dem Hauptelement svg immer einen sinnvollen Titel geben. Eine hilfreiche Beschreibung ist ebenfalls zu empfehlen. Nähere Informationen dazu sind dem Kapitel Barrierefreiheit zu entnehmen.

Im einfachsten Falle ist der Inhalt dieser Elemente einfacher Text. Dieser Inhalt wird nicht zusammen mit dem sonstigen graphischen Inhalt dargestellt. Wie dieser Inhalt vom Darstellungsprogramm dargestellt wird, ist nicht eindeutig festgelegt. Jedenfalls soll der Inhalt dem Nutzer zugänglich gemacht werden, wie hängt von den Möglichkeiten des Darstellungsprogrammes und der Art der Präsentation selbst ab.

Die Elemente selbst haben keine Attribute oder Eigenschaften, die für diese Elemente spezifisch sind.

W3C title und desc

Element symbol, Kombination zu einem Symbol[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 3.5 3.2 -  ?  ?  ?

Das Element symbol dient in SVG dazu, Dokumente semantisch zu strukturieren. Einzelne Elemente werden zu einer Einheit, einem Symbol kombiniert.
Wie das Element svg öffnet das Element symbol einen eigenen Anzeigebereich. Der Unterschied liegt vor allem in der semantischen Aussage des Elementnamens. Zudem wird symbol auch nicht direkt angezeigt, sondern mit dem Element use referenziert, wo es angezeigt werden soll. Somit bestimmt das use Positionierung und Größe des Symbols.

Das Element ist in der Vollversion von SVG 1.1 verfügbar, nicht in SVG tiny 1.1 oder tiny 1.2.

Attribut viewBox[Bearbeiten]

Das Attribut viewBox gibt eine rechteckige Region an, in welche der darzustellende Inhalt fällt. Der korrekte Wert ist bereits für das Element svg beschrieben worden.

Das Attribut ist animierbar.

Attribut preserveAspectRatio[Bearbeiten]

Wenn das Seitenverhältnis der viewBox des referenzierten Symbols nicht zu width und height des referenzierenden use passt, kann mit preserveAspectRatio angegeben werden, wie es in den Anzeigebereich einzupassen ist.

Die möglichen Werte sind bereits entsprechend für das Element svg beschrieben.

Das Attribut ist animierbar.

Beispiel zu symbol[Bearbeiten]

Beispiel zur Verwendung von symbol

Beispiel zur Verwendung von symbol.
Dies Dokument zeigt einige Beispiele für das Zusammenspiel von symbol mit viewBox und preserveAspectRatio und der Eigenschaft overflow.

Der Anzeigebereich ist jeweils rot gerandet angedeutet.

W3C symbol

Element use, Wiederverwendung[Bearbeiten]

Einzelne Elemente oder Gruppen können als Vorlage verwendet und dann wiederverwendet werden. Diesem Zwecke dient das Element use. Es werden keine kompletten Dokumente wiederverwendet, sondern lediglich SVG-Dokumentfragmente. In den tiny-Profilen darf das Element auch kein komplettes svg-Element referenzieren, in SVG tiny 1.1 nur Fragmente aus demselben Dokument.

Die Vererbung von Eigenschaften in die wiederverwendete Vorlage erfolgt vom Element use aus, beziehungsweise von dessen Elternelementen, nicht von denen der referenzierten Vorlage.

Mit den Attributen x und y wird der Ursprung für den referenzierten Inhalt festgelegt.

Der effektive visuelle Effekt lässt sich wie folgt beschreiben:

  • use wird durch g repräsentiert.
  • Attribute und Eigenschaften werden auf g übertragen, mit der Ausnahme von x, y, width, height und href von XLink.
  • Eine Transformation translate(x, y) wird am Ende der Transformationsliste durchgeführt.
  • Der Inhalt der referenzierten Vorlage wird in das g-Element kopiert.
  • Im Falle, dass ein svg-Element referenziert wird, überschreiben die Attribute width und height im Element use gegebenenfalls die des Elementes svg.
  • Wenn ein Element symbol referenziert wird, wird dies durch ein svg ersetzt und width und height werden gegebenenfalls entsprechend überschrieben. Sofern nicht angegeben, werden sie als 100% angenommen.

Referenzierte Elemente symbol oder svg können eine wirksame Eigenschaft overflow haben, welche darüber entscheidet, ob überstehender Inhalt sichtbar ist oder nicht.

Eine rekursive direkte oder indirekte Selbstreferenzierung ist ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt. Praktisch hängt es allerdings vom Darstellungsprogramm ab, wie schnell bei indirekten Schleifen solch eine unzulässige Konstruktion entdeckt wird.

Allerdings können andere Elemente use wiederverwendet werden, womit dann eine endliche und erlaubte Rekursion erreicht werden kann, solange dies nicht zu einer indirekten Selbstreferenzierung führt.

Für das Element spezifische Attribute:

Attribute x und y[Bearbeiten]

Der Wert ist jeweils eine Koordinate, also wo das Element innerhalb des jeweiligen Koordinatensystems dargestellt werden soll, x und y geben dann den Ursprung an. Sofern nicht angegeben, wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribute width und height[Bearbeiten]

width und height geben die Breite und Höhe an, falls ein symbol oder svg als referenzierte Vorlage dient. In den tiny-Profilen werden diese Attribute nicht gebraucht und sind daher in SVG tiny 1.2 nicht verfügbar und in SVG tiny 1.1 wirkungslos, sofern die Attributwerte größer als 0 sind, dies gilt auch für das volle Profil, wenn die Vorlage nicht selbst einen eigenen Anzeigebereich öffnet.

Der Wert ist jeweils eine Länge größer oder gleich 0. Bei 0 wird das Element samt Inhalt nicht angezeigt. In SVG 1.1 ist ein negativer Wert ein Fehler, der zum Abbruch der Darstellung führt. Wenn nicht angegeben, hängt das Verhalten vom referenzierten Element ab, siehe oben.

Die Attribute sind animierbar.

Attribute von XLink, insbesondere href[Bearbeiten]

Um die Vorlage zu referenzieren, wird das Attribut href von XLink verwendet. Typisch wird das Präfix 'xlink' für den Namensraum von XLink verwendet. Sofern so angegeben, wird das Attribut dann als xlink:href notiert. Entsprechendes gilt für die anderen in SVG verfügbaren Attribute von XLink, die bei use somit ebenfalls verwendbar sind.

Das Attribut href ist animierbar.

Ein gültiger Wert ist eine URI mit Fragmentidentifizierer oder nur ein Fragmentidentifizierer. In SVG tiny 1.1 ist es immer ein Fragmentidentifizierer im selben Dokument. Beispiel:

<g fill="blue">
<circle id="Beispiel" r="20" />
</g>
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#Beispiel" x="50" fill="red" />

Bei dem Beispiel wird also ein blauer Kreis mit dem Mittelpunkt bei 0,0 dargestellt und ein roter Kreis mit einem Mittelpunkt bei 50,0.

So ergeben sich übrigens zwei blaue Kreise, weil das Präsentationsattribut fill hier direkt im Element circle notiert ist, nicht in einer übergeordneten Gruppe:

<circle id="Beispiel" r="20" fill="blue" />
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#Beispiel" x="50" fill="red" />

Anmerkung zu den Beispielen: Sofern der Namensraum für XLink bereits bei einem der Elternelemente mit dem entsprechenden Präfix festgelegt wurde, ist dies natürlich beim jeweiligen Element nicht abermals notwendig, welches ein Attribut aus dem Namensraum verwendet.

Anwendungsbeispiele für use[Bearbeiten]

Wiederverwendung von Inhalten ist bei Graphik an vielen Stellen nützlich und hilft, Arbeit zu sparen und die Dateigröße zu reduzieren. Bei Landschaftsarchitektur und Architektur etwa mögen häufig sich wiederholende abstrahierte Formen auftauchen, zum Beispiele Bäume oder immer wiederkehrende Wohnelemente in größeren Wohneinheiten. Bei anderen Anwendungen mögen sich Logos oder Symbole häufiger wiederholen. Eine weitere Anwendung ergibt sich, wenn bei zwei use-Elementen die referenzierten Inhalte per Animation vertauscht werden, damit ergibt sich dann eine Vertauschung der Zeichenreihenfolge.

Klonschaf Dolly

Klonschaf Dolly
Ein geläufiges Beispiel aus der Biologie, Genetik und Fortpflanzungstechnologie ist das Klonen von Lebewesen, was mit SVG für Abbildungen von Lebewesen ungleich einfacher zu realisieren ist.
Das zunächst als Pfad definierte Schaf wird in einer Gruppe g zweimal mit use referenziert. Diese Gruppe wird erneut doppelt in einer Gruppe referenziert und diese abermals.

IFS-Fraktal mit SVG
Fraktaler Baum in kubischer Landschaft
Darstellung einer Cantor-Menge mit SVG

Die folgenden Anwendungsbeispiele sind eher der Mathematik entlehnt. Weil durch die mehrmalige Referenzierung von use-Elementen sehr viele Elemente dargestellt werden müssen, kann es ein paar Sekunden dauern, bis die Beispiele dargestellt werden. Die Dateien selbst sind eher klein, die Dauer bis zur Darstellung ist also grob ein Maß für die Leistungsfähigkeit des verwendeten Programmes und Computers. Für WebKit (getestet mit Versionen 523 und 528; Safari4, Google-Chrome4) zum Beispiel ist bekannt, dass dieses Darstellungsprogramm zu faul ist, um so viele Element überhaupt darzustellen, bei späteren Versionen kann der Fehler allerdings bereits behoben worden sein - die folgenden Beispiele decken solche Mängel eines Darstellungsprogrammes leicht auf.

IFS-Fraktal mit SVG
Beispiel IFS-Fraktal mit SVG - Iterierte Funktionen-Systeme.

Fraktaler Baum in kubischer Landschaft
Ein baumartiges Fraktal in stark abstrahierter Landschaft, geformt aus zwei kubischen Kurven.
Technik: IFS-Fraktal mit SVG - Iterierte Funktionen-Systeme.

Darstellung einer Cantor-Menge mit SVG
Als Ausgangsmuster wird ein Quadrat gewählt. Die Entstehung der Cantormenge kann man sich so vorstellen, dass das Quadrat in neun gleichgroße Unterquadrate eingeteilt wird, die vier in den Seitenmitten werden entfernt. Auf die verbleibenden fünf Quadrate wird im nächsten Iterationsschritt das gleiche Verfahren angewendet - erneut wird in neun Quadrate unterteilt, von denen wiederum die vier in den Seitenmitten entfernt werden - und so weiter.

Zur konkreten Umsetzung mit SVG wird mit einem Quadrat begonnen, dies wird auf die fünf verbleibenden Positionen kopiert und auf ein Drittel verkleinert. Diese Gruppe wird wiederum kopiert und skaliert und so weiter. Die Gruppen werden abwechselnd in blau und gelb dargestellt, um den Konstruktionsmechanismus zu visualisieren. Die entfernten Bereiche sind jeweils die sichtbaren Quadrate. Es verbleiben gewisse Teile der Quadrate, zum Beispiel die Eckpunkte, die als Punkte an sich nicht darstellbar sind.

Um die Struktur zu verdeutlichen, wird eine Animation verwendet, der Darstellungsbereich wird auf das zentrale Quadrat verkleinert.

Drachen und Pfeil

Drachen und Pfeil
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.

Hier dargestellt ist die Deflations-Methode in einer Variation mit komplett asymmetrischen Grundformen, bei denen die jeweiligen vier Seiten von Drachen und Pfeil durch kubische Kurven ersetzt wurden, die zueinander passen, aber so asymmetrisch sind, dass anders als bei den Originalteilen nicht mehr die Möglichkeit gegeben ist, bei der Parkettierung Teile falsch zusammenzulegen.

W3C use

Element image, Bild einbinden[Bearbeiten]

Mit dem Element image kann ein (anderes) Bild in das aktuelle Dokument eingebunden werden. In den tiny-Profilen kann dies nicht selbst ein SVG-Dokument sein. Darstellungsprogramme müssen die Formate PNG und JFIF/JPEG interpretieren und einbinden können. Andere Formate sind optional, aber nicht ausgeschlossen. Im Vollprofil von SVG 1.1 ist zudem die Interpretation und Einbettung von SVG-Dokumenten selbst als Bild für ein konformes Darstellungsprogramm notwendig. In SVG tiny 1.2 kann zur Einbindung von SVG-Dokumenten statt image das neu eingeführte Element animation verwendet werden, um komplette SVG-Dokumente einzubinden. Dies hat den Vorteil, dass dann auch der Zeitablauf und die Synchronisation der Dokumente eindeutig definiert oder definierbar sind.

Hinsichtlich der Zugänglichkeit und Barrierefreiheit von Information ist es geboten, bei referenzierter Pixelgraphik oder allgemeiner Ressourcen ohne eigene interne Textalternative alternativen Text im Element image zu notieren. Geeignet sind dafür zum einen die Elemente title und desc und metadata, aber auch die Attribute title und role von XLink.

Für das Element spezifische Attribute:

Attribute x und y[Bearbeiten]

Der Wert ist jeweils eine Koordinate, also wo das Bild innerhalb des jeweiligen Koordinatensystems dargestellt werden soll, x und y geben dann die linke obere Ecke an. Sofern nicht angegeben, wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribute width und height[Bearbeiten]

width und height geben die eigentliche Breite und Höhe des Darstellungsbereiches für das Bild an. Der Wert ist jeweils eine Länge größer oder gleich 0. Das Bild wird dann entsprechend skaliert. Bei 0 wird das Bild nicht angezeigt. Negative Werte werden nicht unterstützt. Dies bedeutet in SVG tiny 1.2, dass das Attribut mit dem unzulässigen Wert ignoriert wird. In SVG 1.1 ist ein negativer Wert ein Fehler, der zum Abbruch der Darstellung führt.

width und height sind animierbar. Sofern nicht angegeben, wird in SVG tiny 1.2 als Wert 0 angenommen. In SVG 1.1 ist das Fehlen eines der beiden Attribute ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt.

Attribut viewBox[Bearbeiten]

Das Attribut viewBox gibt eine rechteckige Region an, in welche der darzustellende Inhalt fällt. Bei diesem Element wird der Wert allerdings vom referenzierten Dokument übernommen und braucht nicht angegeben zu werden, beziehungsweise die Angabe ist wirkungslos. Weil aber ein image formal einen eigenen Anzeigebereich erzeugt, ist das Attribut auch verfügbar. Der formal korrekte Wert ist bereits für das Element svg beschrieben worden.

Das Attribut ist animierbar.

Attribut preserveAspectRatio[Bearbeiten]

Wenn das Seitenverhältnis des referenzierten Bildes nicht zu width und height passt, kann mit preserveAspectRatio angegeben werden, wie es in den Anzeigebereich einzupassen ist.

Die möglichen Werte sind bereits entsprechend für das Element svg beschrieben. Interessant für Bilder ist die optional vorangestellte Zeichenkette 'defer'. Zum Beispiel der Wert 'defer xMidYMid slice', bedeutet, dass preserveAspectRatio vom referenzierten Bild übernommen werden soll, sofern dieses eine solche Angabe hat, was etwa bei einem SVG-Dokument der Fall ist. Ist dem nicht so, wie etwa bei einem PNG, so wird 'xMidYMid slice' verwendet.

Das Attribut ist animierbar.

Attribute von XLink, insbesondere href[Bearbeiten]

Um das Bild zu referenzieren, wird das Attribut href von XLink verwendet. Typisch wird das Präfix 'xlink' für den Namensraum von XLink verwendet. Sofern so angegeben, wird das Attribut dann als xlink:href notiert. Entsprechendes gilt für die anderen in SVG verfügbaren Attribute von XLink, die bei image somit ebenfalls verwendbar sind.

Ein gültiger Wert ist eine URI oder IRI eines Bildes.

Das Attribut href ist animierbar.

Attribut type[Bearbeiten]

Das Attribut type ist neu in SVG tiny 1.2 eingeführt worden und erlaubt es dem Autor, einen Hinweis zu geben, in welchem Dateiformat das referenzierte Bild vorliegt. Der Wert ist ein internet-Medientyp. Ein Beispiel für einen Medientyp für ein bekanntes Bildformat ist 'image/gif'. Sollte in diesem Falle das Darstellungsprogramm 'image/gif' nicht interpretieren können, kann es den Hinweis dazu benutzen, die Datei erst gar nicht anzufordern.

Das Attribut ist animierbar, weil auch href von XLink animierbar ist und sich somit während der Animation das Dateiformat ändern kann. Der Autor ist dann allerdings selbst dafür verantwortlich, dass die Relation zwischen den beiden Animationen ein sinnvoller und zutreffender Hinweis ist.

Beispiel zu image[Bearbeiten]

Beispiel zur Verwendung von image
Im Beispiel re­fe­ren­zier­tes PNG

Ein einfaches Beispiel zur Verwendung von image.
Ein PNG wird mit dem Element image eingebettet und mit Titel und Beschreibung versehen, was ein wichtiger Zugänglichkeitsaspekt von SVG ist.

Zusätzlich wird das Bild transformiert und mit einem Hintergrund hinterlegt.

Es muss natürlich nicht immer, wie in diesem Beispiel, eine komplette URI angegeben werden. Liegt das Bild im gleichen Verzeichnis, so reicht die Angabe des Dateinamens. Liegt das Bild auf der gleichen domain, reichen auch relative Pfade (aufgrund der etwas komplizierteren Ablage bei wikibooks gestaltet sich das Beispiel lediglich etwas komplizierter als für die meisten Anwendungen üblich).

W3C image

Bedingte Verarbeitung und Element switch[Bearbeiten]

Nähere Informationen dazu sind dem Kapitel Barrierefreiheit zu entnehmen.

W3C bedingte Verarbeitung

Externe Ressourcen und progressive Darstellung[Bearbeiten]

Dokumente referenzieren bisweilen andere Dokumente oder allgemeiner Ressourcen, die inhaltlich wichtig sind. SVG bietet Möglichkeiten anzugeben, wann externe Ressourcen in diesem Sinne (im Rahmen einer progressiven Darstellung) wichtig sind.

Attribut externalResourcesRequired[Bearbeiten]

Bei den Gruppierungselementen svg, g, a, symbol, clipPath, mask, pattern, marker und switch kann das Attribut externalResourcesRequired angegeben werden, ebenfalls bei allen Elementen, die potentiell externe Inhalte referenzieren können. Es hat die Werte 'false' oder 'true' mit der Voreinstellung 'false'. 'false' gibt an, dass externe Ressourcen optional sind, in dem Sinne, dass die Darstellung fortgesetzt werden kann, wenn die Ressource nicht verfügbar ist. Beim Wert 'true' wird die progressive Darstellung des Elementes unterbrochen, bis die externe Ressource verfügbar ist. Insbesondere beginnt die Zeitlinie für Animationen nicht, solange die externe Ressource nicht geladen ist.

Das Attribut ist nicht animierbar. Es ist nicht verfügbar in SVG tiny 1.1.

Es ist zu empfehlen, dies Attribut nur gezielt bei Gruppierungselementen auf 'true' zu setzen, wo dies wirklich notwendig ist, nicht beim svg-Hauptelement. Eine Ausnahme davon ergibt sich, wenn progressives Darstellen unterbunden werden soll.

Insbesondere bei Dokumenten, die Animationen enthalten, kann progressives Darstellen unerwünscht sein. Weil dies weder in SVG 1.1 noch in SVG tiny 1.2 explizit abgestellt werden kann, kann es in solch einem Falle sinnvoll sein, ziemlich zu Beginn mit einem Element use ein (gegebenenfalls leeres g-) Element am Ende des Dokumentes zu referenzieren und externalResourcesRequired 'true' anzugeben. In diesem Falle wird die progressive Darstellung gestoppt, bis das Dokument bis zu diesem letzten Element komplett geladen ist. Entsprechend kann bei Gruppen vorgegangen werden.

In SVG 1.1 gar nicht und in SVG tiny 1.2 ist nur grob beschrieben, was bei einer progressiven Darstellung passieren soll. Dies Attribut samt daraus resultierendem Verhalten ist jedenfalls nur mit der Ladezeit korreliert. Bei komplizierteren Konstruktionen kann es allerdings auch passieren, dass das Dokument in Sekundenbruchteilen geladen ist, aber mehrere Sekunden braucht, um dargestellt zu werden. Weil die Spezifikation nicht definiert, wie der Prozess der Dokumentinterpretation bis zur Darstellung genau verläuft, kann es neben dem Laden von externen Ressourcen also auch noch andere Aspekte von progressiven Darstellungen geben, die vom Autor nicht direkt kontrollierbar sind.

Element prefetch, Ressourcen vorab laden[Bearbeiten]

Neu in SVG tiny 1.2 ist das Element prefetch spezifiziert, mit dem ein Vorschlag angegeben werden kann, welche externen Ressourcen vorab geladen werden sollten. Wenn das Darstellungsprogramm den Vorschlägen folgt, kann ein flüssigerer, gegebenenfalls auch schnellerer Aufbau der Darstellung des Dokumentes erreicht werden, wenn das Element effektiv eingesetzt wird.

Attribut mediaSize[Bearbeiten]

Mit dem Attribut wird die Mediengröße angegeben, also wieviele Bytes (mindestens) vorab geladen werden sollten.

Der Wert ist eine (nicht negative) ganze Zahl nicht größer als 2147483647. Das Attribut ist nicht animierbar. Es ist nicht explizit angegeben, was passiert, wenn das Attribut nicht angegeben ist oder der Attributwert nicht sinnvoll ist, genaugenommen ist der Wert in der Spezifikation nicht einmal auf nicht negative Zahlen eingeschränkt. Es ist zu vermuten, dass unsinnige Angaben dazu führen, dass das Attribut ignoriert wird, wie üblich in SVG tiny 1.2.

Attribut mediaTime[Bearbeiten]

Für Medien mit festgelegter endlicher Dauer wie Video oder Audio kann mit dem Attribut mediaTime angegeben werden, wie viel vom Dokument bezogen auf die Dauer geladen werden soll. Der Wert ist ein Zeitwert, wie im Kapitel über Animation erläutert, im einfachsten Falle zum Beispiel '120s' für zwei Minuten. Es müsste dann also mindestens soviel von der Datei vorab geladen werden, dass damit zwei Minuten abgespielt werden können.

Medien ohne festgelegte Dauer wie PNGs oder ein Dokument vom Typ SVG tiny 1.2 selbst werden komplett geladen, wenn das Attribut angegeben ist.

Wird ein animiertes Element referenziert, bezieht sich die Angabe auf die aktive Dauer der Animation.

Das Attribut ist nicht animierbar.

Attribut bandwidth[Bearbeiten]

Mit bandwidth wird die Übertragungsrate in Bits pro Sekunde angegeben, die verwendet werden sollte, um die externe Ressource zu laden. Sofern es nicht angegeben ist, wird die komplette verfügbare Rate verwendet.

Unsinnige Werte oder solche über der verfügbaren Rate werden nicht berücksichtigt werden können. Es ist nicht explizit angegeben, aber es kann vermutet werden, dass unsinnige oder unerfüllbare Angaben dazu führen, dass das Attribut ignoriert wird, wie üblich in SVG tiny 1.2.

Das Attribut ist nicht animierbar.

Attribut mediaCharacterEncoding[Bearbeiten]

Das Attribut gibt die Kodierung der zu ladenden Ressource an (UTF-8, ISO-8859-1, etc). Bei der Angabe von mediaSize kann diese davon abhängen, von welcher Kodierung bei der Angabe von mediaSize ausgegangen wurde. Insofern kann dieser Hinweis nützlich für eine präzisere Schätzung sein. Wird das Attribut nicht angegeben, wird davon ausgegangen, dass die Angabe von mediaSize sich auf die aktuelle bezieht, etwa jene, die der server behauptet.

Das Attribut ist nicht animierbar.

Attribut mediaContentEncodings[Bearbeiten]

Mit dem Attribut mediaContentEncodings kann eine Angabe zur Kompressionsart (Inhaltskodierung) gemacht werden, welche bei der referenzierten Ressource bei der Berechnung der Mediengröße vorausgesetzt wurde. Beim Wert handelt es sich um eine mit Leerzeichen separierte Liste im Sinne von Abschnitt 3.5 von HTTP 1.1 (RFC2616), (gzip, compress, etc) Die Reihenfolge ist jene, die bei der Kompression verwendet wurde. Die Angabe ist erforderlich, wenn eine Kompression vorgenommen wurde. Sofern nicht angegeben, wird keine Kompression angenommen.

Das Attribut ist nicht animierbar.

Attribute von XLink, insbesondere href[Bearbeiten]

Um die externe Ressource zu referenzieren, wird das Attribut href von XLink verwendet. Typisch wird das Präfix 'xlink' für den Namensraum von XLink verwendet. Sofern so angegeben, wird das Attribut dann als xlink:href notiert. Entsprechendes gilt für die anderen in SVG verfügbaren Attribute von XLink, die somit ebenfalls verwendbar sind.

Ein gültiger Wert ist eine URI oder IRI der Ressource. Vorgabe ist ein leerer Wert. Das gilt sinngemäß auch für ungültige Werte, es wird dann also nichts vorab geladen.

Das Attribut href ist für dieses Element nicht animierbar.

Element discard, Inhalt streichen[Bearbeiten]

Beispiel zur Verwendung von discard
SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 tiny - 9.5 - - -  ?  ?  ?

Mit dem in SVG tiny 1.2 neu eingeführten Element discard kann Inhalt aus dem Dokument gestrichen oder gelöscht werden, um Speicherplatz freizumachen. Nützlich ist dies insbesondere bei Dokumenten mit langen Laufzeiten, zum Beispiel mit einigen Videos oder auch einer Kaskade von use-Elementen. Sofern umfangreicher Inhalt nach einiger Zeit im Dokument nicht mehr gebraucht wird, kann es sich lohnen, den Speicher des Darstellungsprogrammes zu entlasten. Ein gestrichenes Element ist also nach der Streichung nicht mehr verfügbar, als sei es nie im Dokument vorhanden gewesen.

Das Element kann überall auftreten, wo auch Animationselemente wie animate auftreten können.

Beispiel zur Verwendung von discard
Ein Fraktal in Form eines Iterierte-Funktionen-Systems, ein direkter Verwandter der Koch-Kurve, wird als Beispiel verwendet, um das Element discard auszuprobieren. Alle zehn Sekunden wird ein dargestellter Iterationsschritt gelöscht, bis nur noch der letzte, weiße übrigbleibt. Dieser kann durch Klicken oder Aktivieren auch noch gelöscht werden.

Attribut begin[Bearbeiten]

Mit dem Attribut begin wird der Zeitpunkt angegeben, zu dem ein Element aus dem Speicher gestrichen werden soll. Der Wert ist eine Liste entsprechend wie für dies Attribut im Kapitel Animation angegeben. Im einfachsten Falle ist zum Beispiel ein Zeitwert '600s' für zehn Minuten. Ein Anfangswert kann auch ein bestimmtes Ereignis sein wie zum Beispiel 'Zernichter.activate+10s', also zehn Sekunden nach Aktivierung des mit 'Zernichter' identifizierten Elementes. Zum angegebenen Zeitpunkt wird also das referenzierte Element aus dem Speicher gestrichen.

Vorgabe ist der Wert 0, also ein direktes Löschen zum Dokumentbeginn. Das ergibt sich auch bei einem ungültigen Wert.

Das Attribut ist nicht animierbar.

Attribute von XLink, insbesondere href[Bearbeiten]

Um das zu streichende Element zu referenzieren, wird das Attribut href von XLink verwendet. Typisch wird das Präfix 'xlink' für den Namensraum von XLink verwendet. Sofern so angegeben, wird das Attribut dann als xlink:href notiert. Entsprechendes gilt für die anderen in SVG verfügbaren Attribute von XLink, die somit ebenfalls verwendbar sind.

Ein gültiger Wert ist eine URI oder IRI samt Fragmentidentifizierer. Ob bei einer Referenzierung eines externen Dokumentfragmentes ein Effekt resultiert, hängt davon ab, ob das Format des referenzierten Dokumentes eine solche Funktionalität definiert.

Wird das Attribut nicht angegeben, wird das Elternelement gelöscht. Entsprechendes ergibt sich aus einem leeren Attribut oder einem ungültigen Wert.

Das Attribut href ist für dieses Element nicht animierbar.

Allgemein verwendbare Attribute[Bearbeiten]

Attribute id und xml:id[Bearbeiten]

Zur dokumentweit eindeutigen Identifikation von Elementen dient in SVG das Attribut id, in XML ganz allgemein das Attribut xml:id. Weil letzteres erst später eingeführt wurde, wird es in SVG 1.1 noch nicht erwähnt und sollte in der Praxis eher nicht dafür verwendet werden, um SVG-spezifisch etwa zur Wiederverwendung mit use oder zur Animation Elemente zu identifizieren, auch weil ältere Programme die Interpretation von xml:id nicht implementiert haben.
xml:id ist andererseits nützlich, wenn es darum geht, über SVG hinausgehende Identifikationen vorzunehmen, wenn es etwa darum geht, Metainformationen eindeutig auf ein Element zu adressieren. Wenn die Metainformation in einer anderen Sprache abgefasst ist, erfordert ein per xml:id identifizierbares Element nicht einmal die Kenntnis von SVG, um das Element aufzufinden.
In SVG tiny 1.2 ist explizit festgelegt, dass sich der Autor allerdings (bei jedem Element einzeln) entscheiden muss, welche Notation er vornimmt, um Widersprüche zu vermeiden.

Wert ist ein im jeweiligen Dokument einmaliger Fragmentidentifizierer, der also nicht bereits für andere Elemente im selben Dokument verwendet wurde.
Mit use wiederverwendete Elemente stellen in dem Zusammenhang kein Problem dar, weil konzeptionell die Vorlage das Attribut trägt und somit Aktionen bei der Vorlage gleichermaßen auf alle Kopien wirken.

Die Attribute sind nicht animierbar.

Attribut class, Klassenzuordnung[Bearbeiten]

In der Vollversion von SVG 1.1 und in SVG tiny 1.2 kann ein Element ebenfalls selbstdefinierten Klassen zugeordnet werden. Dazu dient das Element 'class'.

Der Wert des Attributes ist eine mit Leerzeichen separierte Liste von Klassennamen.

Ein Klassenname in dem Sinne ist eine Zeichenkombination aus Buchstaben, Zahlen und den Zeichen '.', '-', '_', ':'. Exakt sind die erlaubten Zeichen in der XML-Spezifikation unter dem Stichwort 'Nmtoken' nachzulesen.

Das Attribut ist animierbar.

Vielfach wird das Attribut dazu verwendet, um eine Klasse von Elementen über einen CSS-Selektor mit Eigenschaften zu versehen. Der Wert des Attributes hat allerdings auch eine semantische Bedeutung, denn der Name der Klasse sollte charakteristisch zur Funktion der Elemente einer Klasse gewählt werden.

Zum Beispiel bedeutet class="Hilfe Menue", dass das Element zu den Klassen 'Hilfe' und 'Menue' gehört. Eine Bezeichnung wie class="klein blau" ist hingegen vermutlich keine semantisch gute Bezeichnung, weil es nichts über die Funktion des Elementes verrät, sondern bestenfalls über die beabsichtigte Präsentation (die bei einer alternativen Stilvorlage anders sein kann).

Attribute für Metainformationen und Beschreibung der Funktion von Elementen[Bearbeiten]

In SVG tiny 1.2 wurden einige allgemein verwendbare Attribute aus anderen Bereichen oder Sprachen (WAI-ARIA und RDFa) übernommen. Diese sollen helfen, die Zugänglichkeit und Verstehbarkeit von Konstruktionen in Dokumenten zu verbessern. Zudem kann damit die Maschinenlesbarkeit und -verstehbarkeit von Inhalt verbessert werden.

Auf diese Attribute wird im Kapitel Barrierefreiheit näher eingegangen.

Allgemeine XML-Attribute[Bearbeiten]

Auf weitere, neben xml:id ebenfalls bereits durch XML allgemein verfügbare Attribute wird im Kapitel Kurze Einführung in XML näher eingegangen.



Barrierefreiheit[Bearbeiten]

Einleitung[Bearbeiten]

Wie alle Auszeichnungssprachen, die vom W3C empfohlen werden, ist auch SVG mit zahlreichen eingebauten Automatismen und Hilfen für den Autor ausgestattet, mit denen die Zugänglichkeit von Dokumenten in diesem Format verbessert wird.

Die eingebauten Automatismen bestehen vor allem darin, dass es sich um ein XML-Format handelt, die Dateien selbst also aus Text bestehen, der mit unspezifischen Werkzeugen lesbar und bearbeitbar ist. SVG ist an sich also Klartext, der ohne spezifische Programme interpretierbar ist. So lässt sich anhand der Namen der verwendeten Elemente und Attribute prinzipiell erkennen, welcher graphische Inhalt repräsentiert wird. So ist es von der Zugänglichkeit her also sinnvoll, statt eines allgemeinen Pfades das Element circle zu verwenden, wenn ein Kreis gemeint ist. Das ist dann auch besser als das semantisch weniger spezifische ellipse oder gar ein rect mit entsprechend abgerundeten Ecken. Entsprechendes gilt für die anderen Basisformen von SVG. Wenn ein gleichseitiges Polygon zu malen ist, ist offenbar auch das Element polygon eine bessere Beschreibung als das Element path, wo die Eigenschaft, dass es sich um ein Polygon handelt, erst mühsam aus dem Wert des Attributes d extrahiert werden muss, was deutlich aufwendiger ist, als dies anhand des Elementnamens zu erkennen. Andersherum ist es nicht so hilfreich, beliebige Kurven mittels polyline oder polygon anzunähern, wenn die tatsächliche Kurve viel besser und effektiver mit kubischen Kurvenfragmenten innerhalb eines path dargestellt werden kann.

Die meisten zu präsentierenden Strukturen werden komplexer als Kreise, Ellipsen oder Rechtecke sein. Wenn sich eine Struktur allerdings aus mehreren Unterstrukturen zusammensetzen lässt, so solche für jede separierbare Unterstruktur auch ein eigenes und dafür passendes Element verwendet werden. Zusammengehörige Elementen sollten dann zudem gruppiert werden. Dies Vorgehen hat gleich mehrere Vorteile. Es ist so leichter zu ermitteln, aus welchen Strukturen ein Objekt besteht. Es ist somit anhand der Dokumentstruktur besser verständlich, wie ein dargestelltes Objekt inhaltlich aufgebaut ist. Einzelne Strukturen lassen sich getrennt viel besser dekorieren, manipulieren oder auch animieren. Gruppen lassen sich gemeinsam transformieren und auch mit einer gemeinsamen Textalternative versehen.

In der Praxis fällt es bei nicht trivialen Dokumenten indes schwer, das beabsichtigte Objekt ohne geeignetes graphisches Darstellungsprogramm zu visualisieren. In anderen Fällen wird einigen Betrachtern die Bedeutung der graphischen Repräsentation nicht klar sein, weswegen diese ebenfalls gerne auf eine Textalternative umschalten werden, welche die graphische Repräsentation ergänzt oder einen anderen Zugang zum Verständnis des Bildes ermöglicht.

Für den Fall, dass ein graphisches Darstellungsprogramm nicht verfügbar ist, aber auch um ergänzende Textinformationen angeben zu können, bietet SVG mit den Elementen title, desc und metadata dem Autor Hilfen an, um praktisch zu jedem Element eine Textalternative oder -ergänzung bereitstellen zu können. Der Inhalt dieser Elemente kann auch durch Elemente aus anderen Namensräumen strukturiert werden, um die Les- und Verstehbarkeit der Textinformation zu verbessern. Elemente aus anderen Namensräumen stellen andererseits aber auch wieder erhöhte Anforderungen an das Darstellungsprogramm, weil dies diese anderen Formate kennen und interpretieren können muss, um die Struktur sinnvoll in der alternativen Betrachtung präsentieren zu können. Ist dies nicht gegeben, muss der Autor nach wie vor mit einer nicht strukturierten Präsentation rechnen. Zudem ist damit zu rechnen, dass Validatoren, die mit Dokumenttypdeklarationen (DTD) arbeiten, solche Dokumente mit gemischten Formaten nicht korrekt validieren können, wenn die Dokumenttypdeklaration nicht entsprechend angepasst wird. Für Darstellungsprogramme ergibt sich indes in der Praxis kein Problem, weil denen die Angabe des Namensraumes reicht, um Formate zu identifizieren. Aufgrund der Beschränkungen der Möglichkeiten von Dokumenttypdeklarationen wird auf diese bei neueren Versionen (SVG tiny 1.2) ohnehin verzichtet.

Im Vergleich mit anderen Formaten, besonders Pixelgraphik, wirkt der Begriff Zugänglichkeit auf den ersten Blick vielleicht etwas befremdlich, was hat denn ein Graphikformat mit Barrierefreiheit zu tun? SVG bietet schon alleine dadurch, dass es ein Vektorgraphikformat ist, einen großen Vorteil: Es ist stufenlos skalierbar. Eine weitere Eigenschaft gibt es umsonst, in einem SVG ist der Text nicht in Form von Pixeln und auch nicht als Kurven gespeichert, sondern in Form von Buchstaben, welche in einem text-Element stehen. Daher kann auch zum Beispiel ein Vorleseprogramm (englisch: screenreader) den Text erkennen und einem Blinden vorlesen. Was hingegen in einer Pixelgraphik dem sehenden Betrachter als Text erscheint, sind eigentlich nur Pixel oder Farbverteilungen, denen ein einfaches Programm keine inhaltliche Bedeutung als Text zuordnen kann, wodurch solche Farbverteilungen in Pixelgraphik Blinden ohne spezielle Programme, die dann versuchen, die Information zu raten, unzugänglich werden.

Auch Verweise sind in SVG problemlos zugänglich und leicht anhand des verwendeten Elementes zu erkennen. Damit diese funktionieren, braucht das Darstellungsprogramme (egal ob für eine visuelle oder sonstige Präsentation) noch nicht mal SVG zu interpretieren. Diese werden angegeben mit der Sprache XLink, einer relativ grundlegenden XML-Funktionalität. Wobei inzwischen allerdings die Interpretation von SVG und XLink in SVG weiter verbreitet zu sein scheint als XLink in beliebigen XML-Dokumenten, man betrachte etwa damit eingebetteten Inhalt in diversen Darstellungsprogrammen - was in SVG problemlos funktioniert, wird in einem beliebigem XML-Format zum Problem für so manches Darstellungsprogramm. XLink selbst wiederum bietet Möglichkeiten zu beschreiben, wozu ein Verweis gut ist oder um was es sich beim Verweisziel handelt, das ist zwar bei vielen Darstellungsprogrammen nicht nachvollziehbar, bietet dem Autor aber ganz unabhängig von den Möglichkeiten der Darstellungsprogramme eine weitere Chance, Inhalt und Funktion von Verweisen und referenzierten und eingebetteten Inhalten zu verdeutlichen.

Aber was ist mit dem Inhalt, der Bedeutung einer Graphik oder einer Anwendung, die auf SVG aufbaut? Es ist sehr wohl möglich, zum Beispiel für Blinde eine Graphik nutzbar zu machen. Ein Vorleseprogramm etwa oder auch ein Darstellungsprogramm mit graphischer Ausgabe kann die Inhalte von Text-Elementen, der Elemente title, desc und metadata in einer alternativen Textdarstellung zugänglich machen, alternativ oder zusätzlich zur graphischen Darstellung der Datei. So ist ein unabhängiger Zugang zur inhaltlichen Bedeutung des Dokumentes jedem Nutzer, insbesondere auch Blinden, verfügbar.

Wie genau die Textalternative zu präsentieren ist, ist in den SVG-Spezifikationen nicht festgelegt und hängt stark davon ab, für wen und in welcher Relation zum graphischen Inhalt die Darstellung erfolgen soll.

SVG bietet ferner die Möglichkeit der bedingten Verarbeitung, der Autor kann also Alternativen angeben, wenn bestimmte Möglichkeiten beim Darstellungsprogramm oder beim Nutzer nicht verfügbar sind, darunter auch eine Selektion von Text in mehreren Sprachen, je nach Einstellung des Nutzers.

SVG tiny 1.2 bietet dem Autor ferner die Chance, mit neuen Attributen Funktion und Bedeutung von Elementen und Konstruktionen anzugeben, einmal um die semantische Qualität des Inhaltes zu verbessern, zum anderen aber auch, um bei Nutzungseinschränkungen die Möglichkeit zu geben, dass das Darstellungsprogramm die angegebene Funktionalität auf einem alternativen Weg bereitstellt.

Verwendung von title, desc und metadata[Bearbeiten]

Jedenfalls wird von den Spezifikationen dringend empfohlen, mindestens das Haupt-svg-Element (root-Element) mit einem title-Element als erstes Kindelement zu versehen. Der Inhalt dieses Elementes wird als Dokumenttitel verwendet - zum Beispiel im Kopfbereich des Darstellungsfensters - und kann auch gut dazu dienen, innerhalb von Textumgebungen auf das Dokument zu verweisen oder es im Textfluss zu bezeichnen.

Titel sind auch bei klassischen Bildern in der Kunst etabliert und finden sich dort oft irgendwo neben dem Bild oder darunter. Bei SVG ist der Titel in das Dokument integriert. Von der historischen Herkunft her ist ein Titel oder eine Überschrift eine Kurzzusammenfassung des Inhaltes, also eine Kurzrepräsentation in Textform oder aber auch ein Bezeichner des gesamten Werkes. Im Bereich der Kunst und Literatur wird dies oft etwas freier gehandhabt und der Titel als inhärenter Bestandteil des Werkes steht manchmal in einer assoziativen Relation zum Inhalt und ist nicht nur eine Kurzzusammenfassung, man denke etwa an Werke von René Magritte oder Salvador Dalí. Der Titel als Bezeichner des Gesamtwerkes ist jedoch durchgehend etabliert, so dass dem Autor zu empfehlen ist, einen ausdrucksstarken und signifikanten Titel zu wählen, der das gesamte Werk gut repräsentiert.

'unbekanntes Dokument' wird zumeist ein schlechter Titel sein, weil er kaum mit dem Inhalt korreliert ist und sich auch kaum als Bezeichner des Werkes eignet. 'Meine Perle' mag für ein Portrait der aktuellen Freundin in einem eindeutig lokalen Umfeld ausreichend sein, ohne weiterem Bezug in beliebigem Zusammenhang aber unzureichend. Besser wäre da etwa: 'Gunilla Schneider; Portrait von Siggi Haase, Hannover 2009'. Dies ist eine recht formale Herangehensweise im Sinne einer Kurzzusammenfassung. Das auf das title-Element folgende desc-Element kann vom Autor genutzt werden, um weitere Zusammenhänge zu erhellen. Etwas künstlerisch kreativer mag Siggi vielleicht auch formulieren: 'Gunillas geheimnisvolles Lächeln in Erwartung ihres Geliebten'. Weitere Angaben schreibt Siggi dann wieder im desc-Element oder maschinenlesbar mit RDF und Dublin-Core im auf das desc-Element folgende Element metadata, indem er ebenfalls notiert, welchen Nutzungsbedingungen das Bild unterliegt.

Bei einem Kunstwerk kann es durchaus erwünscht sein, dem Werk keinen Titel zuzuordnen. Trotzdem ist dringend zu empfehlen, ein title-Element anzugeben, dies dann aber leer zu lassen und auf den Sachverhalt im desc-Element hinzuweisen. Sonst ist es durchaus plausibel, dass sich der Dateiname oder die URI des Dokumentes als Bezeichner etabliert, also vermutlich wird damit genau das Gegenteil von dem erreicht, was eigentlich beabsichtigt war. 'Ohne Titel' als Inhalt des title-Elementes führt wiederum zu einem Widerspruch zwischen Funktion und Inhalt, ist das nicht gerade Bestandteil der Aussage des Kunstwerkes, ist dies dann sicher die falsche Wahl für den Inhalt eines title-Elementes, wenn kein Titel angegeben werden soll. Manche Künstler behelfen sich auch erfolgreich damit, stattdessen eher technische Bezeichner als Titel anzugeben, etwa 'BlaueSerie2009-10-16T12:03:07.3Z'. Das ist als Bezeichner hinreichend signifikant, vermeidet aber weitgehend die gegebenenfalls ungewollte Funktionalität einer Kurzzusammenfassung.

Die Verwendung von title, desc und metadata ist bei praktisch jedem Element möglich und repräsentiert dann entsprechend die Textalternative des jeweiligen Elementes oder der Gruppe von Elementen, die das jeweilige Elternelement umschließt.

Der primäre Zweck insbesondere von title und desc liegt also darin, eine alternative Textrepräsentation für das jeweilige Dokumentfragment bereitzustellen. Einige graphische Darstellungsprogramme stellen diese Information ähnlich dem title-Attribut in (X)HTML als Nutzungshinweis (tooltip) dar, das kann für Autoren insofern irreführend sein, als dass diese insbesondere im title-Element Nutzungshinweise statt einem Titel oder einer Überschrift, einer Textalternative unterbringen. Schlecht ist in dem Zusammenhang etwa ein Titel wie: 'Anklicken oder Aktivieren, um Animation in 3s zu starten'. Das ist ein Nutzungshinweis, kein Titel und gehört zumindest so nicht in das title-Element, kann aber Bestandteil des Inhaltes von desc sein. Besser wäre also ein Titel wie 'Knopf, um das Karussel zu starten' mit einer Beschreibung im desc-Element wie: 'Mit dem Anklicken oder Aktivieren dieses Knopfes wird nach drei Sekunden eine Animation eines Karussels gestartet, fröhliche Kinder drehen sich auf einem Kinderkarussel in die Runde.'

Da die graphische Darstellung und die Zeichenreihenfolge im Malermodell von SVG oft bestimmt, in welcher Reihenfolge Elemente im Dokument angeordnet sind, kann es oft schwierig sein, eine passable Textrepräsentation bereitzustellen, indem man allen oder vielen Elementen title und desc hinzufügt. Oft ist es einfacher, die Beschreibung nur für das gesamte Dokument vorzunehmen oder für größere Fragmente, die einen in sich abgeschlossenen Sinnzusammenhang ergeben. Es wird dann beschrieben, was das Dokument oder das Fragment repräsentiert, weniger wie dies praktisch realisiert ist (was ja ohnehin anhand des Quelltextes analysiert werden kann).

Elemente[Bearbeiten]

title[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 (teilweise, falsch im Sinne von tiny 1.2) 8 (nur Dokumenttitel), 9 (teilweise, falsch im Sinne von tiny 1.2) 4 (Gecko 2.0; teilweise, falsch im Sinne von tiny 1.2) 3.2 (Dokumenttitel; komplett mit weiterem plugin) -  ?  ?  ?

Nahezu jedes SVG-Element kann ein Element title als Kindelement haben, dies sollte dann immer das erste Kindelement sein. Der Inhalt des title-Elementes ist zumeist einfacher Text. In SVG 1.1 sind auch explizit Elemente aus anderen Namensräumen vorgesehen, was jedoch wegen der bereits oben beschriebenen besonderen Verwendung beim title-Element des Haupt-svg-Elementes nicht zu empfehlen ist. Das Haupt-svg-Element sollte immer ein title-Element haben.

SVG tiny 1.2 empfiehlt explizit, nur einfachen Text als Inhalt zu wählen. Ein Element sollte maximal ein title-Element enthalten. Dieses ist dann der Titel oder eine Kurzzusammenfassung für das Element selbst und seine Kindelemente (insbesondere bei Gruppen). title zusammen mit desc dienen primär dazu, eine Textalternative für den graphischen Inhalt bereitzustellen. Andererseits ist es generell als nicht ausreichend anzusehen, den Inhalt statt des graphischen Inhaltes anzuzeigen, wenn eine graphische Repräsentation durch SVG vorgesehen ist.

Wie Darstellungsprogramme im einzelnen die Textalternative darstellen, ist nicht festgelegt. Jedenfalls ist es Aufgabe des Autors, dafür zu sorgen, dass die Abfolge der Texte und Textalternativen in einem Dokument hinsichtlich der Barrierefreiheit und Zugänglichkeit einen Sinn ergibt, der im wesentlichen einen Ersatz für die graphische Repräsentation darstellt, wenn dem Nutzer eine solche nicht zugänglich ist.

Amaya stellt eine alternative Textrepräsentation etwa in einem anderen Darstellungsbereich dar, wenn der Nutzer dies wünscht. Batik/Squiggle zeigt die komplette XML-Struktur als alternative Textrepräsentation, dies kann beim Konqueror ähnlich eingerichtet werden. Einige Programme blenden manche, aber nicht alle title-Elemente je nach Struktur des Dokumentes auch als Nutzungshilfen ein. Generell ist die strukturierte Darstellung von Textalternativen für SVG-Dokumente in Darstellungsprogrammen nicht einheitlich und ist zumeist noch stark verbesserungswürdig.

In SVG tiny 1.2 ist explizit vorgesehen, dass Darstellungsprogramme mit entsprechenden Fähigkeiten title nur in Form einer Nutzungshilfe (tooltip; wenn mit der Maus, dem Zeigegerät über ein Element mit title gefahren wird, wird dessen Textinhalt an der aktuellen Position präsentiert) darstellen sollen, wenn role="tooltip" angegeben ist. Dies dient vor allem dazu, die Nutzung als Textalternative zu fördern, denn es mag Autoren geben, die eine solche Nutzerhilfe nicht angezeigt haben möchten und ansonsten dann vermutlich eher auf dieses Mittel des barrierefreien Zugangs zum Dokument verzichten, wenn Darstellungsprogramme immer eine solche Anzeige wählen.

desc[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 (teilweise falsch im Sinne von tiny 1.2) - - 3.2 (mit weiterem plugin) -  ?  ?  ?

Nahezu jedes SVG-Element kann ein Element desc als Kindelement haben. Dies sollte dann, soweit vorhanden, nach dem Element title das zweite Kindelement sein. Der Inhalt des desc-Elementes ist zumeist einfacher Text, der eine Beschreibung dessen darstellt, was das Element oder die Gruppe repräsentiert oder welche Funktionalität diese im Gesamtdokument haben oder aufweisen. In SVG 1.1 sind als Inhalt auch explizit Elemente aus anderen Namensräumen vorgesehen. Etwa könnte man das Element p von XHTML verwenden, um die Beschreibung mit Absätzen zu strukturieren. Auch andere Elemente von XHTML oder anderen Formaten können helfen, die semantische Struktur des Inhaltes auszuzeichnen. Dies ist insofern hilfreich, als SVG selbst keine Elemente bereitstellt, um den Inhalt zu strukturieren oder Texte semantisch relevant auszuzeichnen.

SVG tiny 1.2 empfiehlt explizit, nur einfachen Text als Inhalt zu wählen. Ein Element sollte maximal ein desc-Element enthalten. In SVG tiny 1.2 ist also an sich keine weitere Strukturierung des Inhaltes von desc mit Elementen aus anderen Namensräumen wie XHTML vorgesehen. Ist eine strukturierte Beschreibung dennoch notwendig oder gewünscht, bleibt noch die Möglichkeit, innerhalb des Elementes metadata eine entsprechende strukturierte Beschreibung neben anderen Metainformationen unterzubringen. Die Hinweise bezüglich des Attributes role="tooltip" für title gelten entsprechend.

metadata[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 - - - 3.2 (mit weiterem plugin) -  ?  ?  ?

Nahezu jedes SVG-Element kann ein Element metadata als Kindelement haben. Dies sollte dann, soweit vorhanden, nach den Elementen title und desc das dritte Kindelement sein. Der Inhalt ist Metainformation, ausgezeichnet mit Elementen aus einem anderen Namensraum als SVG, zum Beispiel RDF. Sofern in der verwendeten Sprache vorgesehen, empfiehlt sich explizit anzugeben, ob sich die Metainformation auf das gesamte Dokument bezieht oder nur auf ein bestimmtes Fragment. RDF hat eine entsprechende Funktionalität mit dem Attribut about, dessen Wert dann der Fragmentidentifizierer (Wert des Attributes id mit vorangestellten #) des Elementes ist, auf welches sich die Metainformation beziehen soll. Mittels zum Beispiel RDF und Dublin Core lassen sich so (maschinenlesbar) Angaben zu Autor, Erstellungsdatum, Pubklikationsdatum, Nutzungsbedingungen und vielen weitere Metainformationen strukturiert unterbringen.

W3C Referenz

Beispiele zur Verwendung von title, desc und metadata[Bearbeiten]

Einfaches Beispiel für SVG tiny 1.1, ohne Verwendung von Elementen aus anderen Namensräumen, so auch vom W3C-Validator erfolgreich testbar:

<?xml version="1.0" encoding="iso-8859-1" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg width="90%" height="100%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg"
  version="1.1" baseProfile="tiny"
  xml:lang="de">
<title>Nahezu leeres SVG-Beispiel</title> 
<desc>
In einem SVG-Dokument kann alternative oder zusätzliche
Textinformation vom Autor angeboten werden, wobei die
Elemente title und desc verwendet werden.

Das Element metadata kann verwendet werden, um strukturierte
Metadaten oder Metainformation über das Dokument anzugeben,
typisch mit Elementen aus einem anderen Namensraum.

Dies Dokument ist ein Beispiel für die Verwendung von
title, desc und metadata in einem ansonsten nahezu leeren
Dokument.
</desc> 

<metadata>
<!-- Einige Metainformationen, 
zum Beispiel mit RDF und Dublin-Core verwendend,
hier untypisch, aber für den W3C-Validator 
in Ordnung als Klartext angegeben.
Man kann allerdings nicht erwarten, 
dass solche Klartextangaben 
maschinenlesbar sind.  -->
Autor: 
Siggi Haase
Entstehungsdatum: 
2009-10-19
Kontext: 
http://de.wikibooks.org/wiki/SVG/_Barrierefreiheit
etc
</metadata>

<defs>
<!-- nicht direkt dargestellte Elemente, 
bereitgestellt zur späteren Verwendung,
auch Animationselemente kann man hier unterbringen, 
um Ordnung und Übersicht zu schaffen ...  -->
</defs>

<g>
<!--  Ein Element g repräsentiert 
      den restlichen, graphischen Inhalt.  -->
</g>

</svg>

Beispiel eines Dokumentes mit Elementen aus anderen Namensräumen:

<?xml version="1.0" encoding="iso-8859-1" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 1600"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1" baseProfile="tiny"
  xml:lang="de">
<title>Gunillas geheimnisvolles Lächeln in Erwartung ihres Geliebten</title>

<desc>
<!-- Beschreibung mit Elementen aus dem Namensraum von XHTML -->
<div xmnls="http://www.w3.org/1999/xhtml">
<p>
<em>Gunilla</em> sitzt vor einem Spiegel und hat ihr gelocktes, 
rotes Haar gelöst, welches wallend über ihre nackten Schultern fällt. 
Verträumt fährt sie sich mit einem Kamm durch die glänzenden Locken, 
die sie so sehr <em>liebt</em>.
</p>
<p>
Ihre vollen Lippen hat Gunilla leicht lächelnd geöffnet 
und summt leise ein Lied von der Liebe zu ihrem 
<strong><em>Siggi</em></strong>, welchen sie bereits 
sehnsüchtig <strong>erwartet</strong>.
</p>
<p>
Herrlich ist das Licht- und Schattenspiel der Sonnenstrahlen 
auf der zarten Haut ihres Antlitzes mit den vielen prachtvollen 
Sommersprossen.<br />
Je nach Lichteinfall erscheinen ihre Augen grau, grün oder blau, 
<strong>eine spannende</strong> Mischung.
</p>
<p>
Eine erste kühle Brise fährt durch ihr Haar und kündet 
von der herannahenden <strong>Sommernacht</strong> und 
läßt Gunilla leicht erschauern ...
</p>
</div>
</desc>

<metadata>
<!-- Metainformationen mit RDF und Dublin-Core -->
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/" >
 <rdf:Description rdf:about="">
   <dc:title>Gunillas geheimnisvolles Lächeln in Erwartung ihres Geliebten</dc:title>
   <dc:creator>Siggi Haase, Hannover (Linden), Deutschland</dc:creator>
   <dc:created>2009-10-01/10</dc:created>
   <dc:format>image/svg+xml</dc:format>
   <dc:language>de</dc:language>
   <dc:relation>http://de.wikibooks.org/wiki/SVG/_Barrierefreiheit</dc:relation>
   <dc:description>Gunilla Schneider; 
     Portrait vor einem Spiegel beim Haarekämmen.</dc:description>
   <dc:rights>Die Urheber- und Veröffentlichungsrechte liegen beim Autor 
     Siggi Haase aus Hannover.
     Die abgebildete Person Gunilla Schneider aus Hannover 
     hat einer Veröffentlichung zugestimmt und überläßt 
     Siggi Haase Entscheidungen über weitere Veröffentlichungen.
     Zum persönlichen Gebrauch und zur Verwendung für pädagogische Zwecke, 
     etwa in Schulen und Universitäten, 
     darf das Dokument ohne Nachfrage vervielfältigt werden.
   </dc:rights>
 </rdf:Description>
</rdf:RDF>
</metadata>

<defs>
<!-- nicht direkt dargestellte Elemente ...  -->
</defs>

<g>
<!--  Ein Element g repräsentiert den restlichen, graphischen Inhalt.  -->
</g>

</svg>

Bedingte Verarbeitung[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 (teilweise) 8 (teilweise) 3 (teilweise) - 4 (teilweise)  ?  ?  ?
Bedingte Ausführung und Erweiterungen, switch und requiredExtensions
Bedingte Ausführung und Sprachauswahl, systemLanguage, aber in diesem Beispiel einmal ohne switch
Bedingte Ausführung und notwendige Merkmale, switch und requiredFeatures
Bedingte Ausführung und notwendige Formate, switch und requiredFormats; SVG tiny 1.2

Mit dem Element switch und speziellen Attributen ist es möglich, die Verarbeitung oder Darstellung abhängig von bestimmten Bedingungen zu machen. Die in SVG 1.1 dazu verfügbaren Attribute sind requiredFeatures, requiredExtensions and systemLanguage. SVG tiny 1.2 bietet zwei weitere Attribute zur bedingten Verarbeitung an, requiredFormats und requiredFonts.

Diese können als Attribut bei einem Element angegeben werden, bei dem eine bedingte Verarbeitung durchgeführt werden soll. Nur wenn die durch das Attribut angegebene Bedingung wahr ist, wird das Element verarbeitet oder angezeigt.

Attribut systemLanguage[Bearbeiten]

Mit dem Attribut wird angegeben, für welche Sprachen des Nutzers der Inhalt des Elementes geeignet ist, bei dem das Attribut notiert ist. Der Wert von systemLanguage ist eine kommaseparierte Liste von Länderkennungen wie "de" oder "en" oder auch "en-gb", und der Wert ist wahr, wenn der Nutzer im Darstellungsprogramm angegeben hat, dass er Inhalte in wenigstens einer der angegebenen Sprachen verstehen kann.

Attribut requiredExtensions[Bearbeiten]

Mit dem Attribut wird angegeben, welche Erweiterungen zur Anzeige des Elementes notwendig sind, bei dem das Attribut notiert ist. Der Wert von requiredExtensions ist eine leerraumseparierte Liste von URIs, die eine notwendige Erweiterung identifizieren. Alle angegebenen Erweiterungen müssen interpretiert werden, damit der Wert wahr ist.

Attribut requiredFeatures[Bearbeiten]

Das Attribut dient vor allem als Hilfe für Darstellungsprogramme, welche SVG bislang nur unvollständig implementiert haben. Durch Angabe von notwendigen Funktionalitäten kann der Autor so die Darstellung von den bereits implementierten Fähigkeiten des Darstellungsprogrammes abhängig machen. Der Wert von requiredFeatures ist eine leerraumseparierte Liste von Zeichenketten, sogenannten 'feature strings', die in der jeweiligen SVG-Spezifikation genau angegeben sind und Teile oder Module der Spezifikation bezeichnen. Wenn alle angegeben Module vom Darstellungsprogramm interpretiert werden, ist der Wert wahr.

Attribut requiredFormats[Bearbeiten]

Mit dem Attribut wird angegeben, welche weiteren Formate zur Anzeige des Inhaltes eines Elementes notwendig sind, bei dem das Attribut notiert ist. Der Wert von requiredFormats ist eine leerzeichenseparierte Liste von internet-Medientypen (Inhaltstypen, ehemals MIME-Typen). Der Wert ist wahr, wenn alle angegebene Typen interpretiert werden.

Attribut requiredFonts[Bearbeiten]

Mit dem Attribut wird angegeben, welche weiteren Schriftarten oder Zeichensätze zur Anzeige des Inhaltes eines Elementes notwendig sind, bei dem das Attribut notiert ist. Entsprechend ist der Wert von requiredFonts eine Liste von Schriftarten im Sinne der Eigenschaft font-family. Der Wert ist wahr, wenn alle angegebenen Schrifttypen verfügbar sind.

Element switch[Bearbeiten]

Im Element switch können nun Kindelemente angegeben werden (besonders g bietet sich da an), von denen nur das erste dargestellt wird, bei dem die bedingte Verarbeitung wahr ist, die anderen werden nicht verarbeitet oder dargestellt. Das ermöglicht also, Alternativen anzubieten, wenn bestimmte Module nicht verfügbar sind oder wenn man mehrere Sprachen in einem Dokument angeben möchte. In der Regel ist es vorteilhaft, das letzte Kindelement von switch ohne ein Attribut zur bedingten Verarbeitung anzugeben, dann wird dieses in jedem Falle dargestellt, wenn alle vorherigen Kindelemente nicht verarbeitet werden.

Aufgrund der einfachen Syntax sind besonders bei der Sprachauswahl die Möglichkeiten des Autors begrenzt. Hat etwa ein hauptsächlich deutschsprachiger Nutzer die Länderkennungen "de" und "en" angegegeben, möchte aber bevorzugt deutsch lesen, ein anderer mag hauptsächlich englischsprachig sein, täte aber auch notfalls deutsch verstehn, so hat er die gleichen Kennungen angegeben (mit anderen Gewichtungen). Dies ist vom Autor nicht berücksichtigbar, was auch immer zuerst im switch drinsteht, wird verarbeitet, deutsch oder englisch. Es kann also sinnvoll sein, dem Nutzer eine manuelle Auswahl zusätzlich oder alternativ anzubieten oder die Möglichkeiten der sogenannten 'content-negotiation' von Webservern zu nutzen, um zwischen Darstellungsprogramm und Webserver auszuhandeln, welche Sprachversion bevorzugt ist.

Beispiele für bedingte Verarbeitung[Bearbeiten]

Eine nähere Beschreibung ist jeweils im Dokument als Textalternative vorhanden.

Elemente mit XLink-Funktionalität und Zugänglichkeit[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 - 9 (nur title) 3 (nur title) - 4 (nur title)  ?  ?  ?

Elemente, für die in SVG eine XLink-Funktionalität angegeben ist, können eine Reihe von Attributen aus dem Namensraum von XLink aufweisen, welche die eingebauten Zugänglichkeitshilfen von XLink bereitstellen. Es soll hier wie üblich für XLink-Attribute das Präfix xlink verwendet werden. Typische solche Elemente sind a, image, use oder Animationselemente wie animate, in SVG tiny 1.2 auch Elemente wie audio, video, animation oder foreignObject. Die XLink-Funktionalität ist kurz gesagt bei jenen Elementen gegeben, in denen das Attribut xlink:href von XLink zu verwenden ist, um auf andere Dokumente oder Dokumentfragmente zu verweisen oder solche einzubetten. Bei anderen Elementen, wo dies nicht explizit definiert ist, finden auch die anderen Attribute von XLink keine Anwendung. Neben diesem Kernattribut von XLink können weitere angegeben werden, um die Zugänglichkeit des Verweises zu verbessern.

xlink:title mit einer Zeichenkette als Attributwert kann analog zum title-Attribut von (X)HTML genutzt werden, um dem Verweis einen Titel zu geben oder auch einen Nutzungshinweis. Nachvollziehbar ist das zum Beispiel mit Gecko von Mozilla oder – sofern das nicht mit der Anzeige von anderen Nutzungshinweisen in Konflikt steht – auch mit Opera.

Mittels xlink:role kann auf eine URI verwiesen werden, wo die Rolle oder Funktion des Verweiszieles beschrieben wird. Der Attributwert ist daher also die URI eines Dokumentes oder Dokumentfragmentes, in dem die Rolle oder Funktion des Verweiszieles beschrieben wird.

Mittels xlink:arcrole kann auf eine URI verwiesen werden, wo die Rolle oder Funktion des Verweises selbst beschrieben wird. Der Attributwert ist daher also die URI eines Dokumentes oder Dokumentfragmentes, in dem die Rolle oder Funktion des Verweises beschrieben wird. Die Funktion des Verweises ist allerdings in der Regel bereits in SVG durch die Elementdefinition gegeben, die Verwendung ist also allenfalls sinnvoll, wenn darüber hinaus eine besonders bemerkenswerte Funktion vorliegt.

Beispiele zur Verwendung von Attributen aus dem Namensraum XLink[Bearbeiten]

Ein Kreis wird verwendet, um mittels des Elementes a auf die deutsche wikipedia-Seite zu verweisen. Das Verweisziel wird gegebenenfalls in einem neuen Fenster geöffnet (weil xlink:show="new" angegeben ist, alternativ könnte auch target="_blank" analog zu (X)HTML transitional angegeben werden):

<a
xlink:href="http://de.wikipedia.org"
xlink:title="wikipedia in einem neuen Fenster aufrufen"
xlink:show="new">
<circle r="100" fill="#ccf" stroke="#00f" stroke-width="10" />
</a>

Wenn die Darstellung eines Bildes nicht das primäre Einsatzziel eines image-Elementes ist, sondern zum Beispiel in einer Anleitung zur Erstellung von SVG-Dokumenten nur als Beispiel dient, kann es durchaus sinnvoll sein, diese zusätzliche Funktion mittels xlink:arcrole anzugeben. Statt das Hauptmotiv des Bildes im Detail zu erläutern, kann es zum Beispiel für einen blinden Nutzer auch hilfreich sein, mittels xlink:role einen Verweis auf einen Fachartikel angeboten zu bekommen, wo im Detail nachgelesen werden kann, um was es sich genau handelt. Konkretes Beispiel:

<image width="300" height="200"
xlink:href="Zitronenfalter.jpg"
xlink:title="Zitronenfalter auf Sommerflieder"
xlink:role="http://de.wikipedia.org/wiki/Zitronenfalter"
xlink:arcrole="http://de.wikipedia.org/wiki/Beispiel">
<title>Zitronenfalter</title>
<desc>
Ein Zitronenfalter sitzt mit ausgebreiteten Flügeln
auf einem Sommerflieder und saugt Nektar.
Der Hintergrund des Bildes löst sich in diffusem Grün auf.

Beispiel für die Verwendung eines image-Elementes in SVG.
</desc>
</image>

Entsprechend bietet sich manchmal eine ähnliche Vorgehensweise beim Element use an:

<g stroke-width="10" stroke="#00f">
<use id="Start" x="100" y="100" fill="#0a0"
xlink:href="#Knopf"
xlink:title="Stoppuhr starten"
xlink:role="http://www.w3.org/TR/wai-aria/#button" />

<use id="Stop" x="100" y="200" fill="#c00"
xlink:href="#Knopf"
xlink:title="Stoppuhr stoppen"
xlink:role="http://www.w3.org/TR/wai-aria/#button" />
</g>

Um die Rolle oder Funktion eines jeden Elementes, nicht nur aber auch mit Bezug auf WAI-ARIA angeben zu können, bietet indes SVG-tiny 1.2 auch noch das Attribut role.

Zugänglichkeitsprobleme durch Stilvorlagen und Skripte vermeiden[Bearbeiten]

In SVG tiny 1.1 sind weder Stilvorlagen noch Skripte zu interpretieren, in SVG tiny 1.2 ist die Interpretation von Stilvorlagen und von Skripten optional - und die Spezifikation legt nicht fest, welche Skriptsprache zu verwenden ist, wenn eine verwendet wird. Dies ist auch in SVG 1.1 nicht vorgeschrieben, anders etwa als die Interpretation der Bildformate PNG und JFIF/JPEG, die nicht optional sind, ebenso wenig wie die Interpretation von CSS, so weit es für SVG spezifiziert ist.

Verwendet ein Betrachter nun ein Darstellungsprogramm, welches auf SVG tiny 1.1 ausgelegt ist, kann der Autor eine Interpretation von Stilvorlagen und Skripten nicht erwarten, auch bei SVG tiny 1.2 ist das fraglich, allerdings nicht mehr explizit ausgeschlossen. Bei SVG 1.1 und SVG tiny 1.2 ist immerhin unsicher, ob und welche Skriptsprache vom Darstellungsprogramm interpretiert wird. Zudem kann bei den allermeisten Programmen der Nutzer die Skriptinterpretation deaktivieren - aus Gründen der Sicherheit oder der Weltanschauung, warum auch immer.

Bei SVG tiny 1.2 kann immerhin mittels requiredFormats abgefragt werden, ob die Interpretation einer bestimmten Skriptsprache gegeben ist. Allgemeiner kann auch mit requiredFeatures abgefragt werden, ob generell eine Interpretation von Skriptsprachen möglich ist (die Antwort zum Beispiel von Opera ist falsch, das Programm behauptet (Stand Mitte 2011, getestet bis Version 11.10) immer, es könne Skripte, insbesondere ecmaScript und JavaScript interpretieren, selbst wenn der Nutzer dies explizit deaktiviert hat und somit auch keine Interpretation in SVG erfolgt).

Zusammenfassend kann also festgehalten werden, dass Stilvorlagen und Skripte ein Zugänglichkeitsproblem für bestimmte Nutzergruppen darstellen können, andererseits für andere aber auch wiederum Hilfen, den Inhalt besser zu verstehen. An der Stelle ist der Autor eines Dokumentes gefragt, diese Methoden so einzusetzen, dass gerade auch ohne deren Interpretation dennoch der Inhalt, die Information des Dokumentes verfügbar und zugänglich ist.

Hinsichtlich der Dekoration mit Stilvorlagen ist die Lösung gleich in SVG eingebaut. Bis auf sehr wenige Ausnahmen (von Eigenschaften, die mehrere verschiedene Eigenschaften zusammenfassen), gibt es für in SVG verfügbare CSS-Eigenschaften Präsentationsattribute, die dann auch verwendet werden sollten, sofern die Eigenschaft zum Informationsgehalt des Bildes beiträgt. Ist es zum Beispiel für das inhaltliche Verständnis relevant, dass ein Rechteck nicht schwarz, sondern rot ist, so wird die Farbe mit einem Präsentationsattribut angegeben. Zudem kann es sinnvoll sein zu prüfen, ob noch eine sinnvolle Anzeige zustande kommt, wenn eine Konversion der Farben in Grauwerte vorgenommen wird, was oft beim Drucken passiert, aber auch bei Grauwert-Monitoren oder anderen Hilfen für Menschen, die spezifische Probleme in der Farbwahrnehmung haben.

Präsentationsattribute sind in (X)HTML weitgehend verpönt, weil sie dort praktisch nur dekorativen Zwecken dienen, nicht inhaltlichen. Das ist bei Graphik ganz anders. Wenn dort alle Elemente schwarz gefüllt sind, ist keine Information mehr erkennbar, also haben Farben und Teiltransparenzen etc meist eine wichtige inhaltliche Funktion, die durch Einsatz von Präsentationsattributen zu gewährleisten ist. Eine andere, alternative Darstellung kann allerdings problemlos mit der Angabe von CSS-Eigenschaften ergänzt werden. Die CSS-Angaben haben eine höhere Spezifität als die Angaben in Präsentationsattributen, überschreiben diese also gegebenenfalls.

Verwendet man bestimmte Hilfsprogramme (wie zum Beispiel inkscape), so ist es nicht unwahrscheinlich, dass inhaltlich wichtige Angaben nicht in Präsentationsattributen abgelegt werden, sondern als Eigenschaften im Attribut style. Um den Zugang zum relevanten Inhalt zu optimieren, sind dann gegebenenfalls manuell Präsentationsattribute zu ergänzen oder die Angaben in style in Präsentationsattribute zu konvertieren, um besser zugängliche Information anzubieten.

Bei Skripten ist die Lösung meist weniger einfach. Generell sollte der Autor immer im Kopf behalten, dass das, was ohne Skriptinterpretation als Inhalt zugänglich ist, der Inhalt, die Aussage seines Dokumentes ist. Die Anwendung von Skripten fügt an sich keine weitere Information hinzu, bietet allenfalls einen alternativen Zugang zum ohnehin vorhandenen Inhalt. Wenn es für den Autor so aussieht, dass dieses Kriterium nicht erfüllt ist, kann er ohne Zweifel davon ausgehen, dass sein Dokument nicht barrierefrei und für alle Nutzer zugänglich ist. Solange nur ein definierter Nutzerkreis mit bekannten Möglichkeiten vorliegt, muss das kein Problem darstellen. Wenn sichergestellt ist, dass jedem, dem das Dokument zugänglich ist, auch der Inhalt wie geplant zugänglich ist, tritt kein Barriereproblem auf. Sobald das Dokument aber allgemein verfügbar veröffentlicht ist, tritt spätestens das Problem der mangelnden Zugänglichkeit auf. Es obliegt dann dem an Zugänglichkeit und Barrierefreiheit interessierten Autor (kann bei einigen gesetzlich vorgeschrieben sein, dass sie interessiert sein müssen), das Dokument so aufzubereiten, dass es zugänglich ist. Oder er muss notfalls Alternativen bereitstellen, die die Information zugänglich werden lassen.

Funktion und Semantik in SVG tiny 1.2[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 tiny - - - - -  ?  ?  ?

SVG tiny 1.2 bietet einige Attribute, die von XHTML und RDFa übernommen wurden, um die Zugänglichkeit und semantische Aussagekraft und die Maschinenlesbarkeit und -verstehbarkeit zu verbessern.

Ein Problem nicht nur von SVG ist etwa, dass die Funktion für den Benutzer von komplizierteren Konstruktionen für die darstellenden Programme nicht erkennbar ist. Ist der Nutzer etwa selbst oder durch Mängel des Programmes in der Rezeption eines Dokumentes wie vom Autor gedacht beeinträchtigt, so kann mit WAI-ARIA oder mit anderen Spezifikationen die Funktionalität einheitlich beschrieben werden, so dass Programmierer für die Funktionalitäten im Darstellungsprogramm generische Konstrukte bereitstellen können, welche bei solchen Beeinträchtigungen die Konstrukte des Autors ersetzen können und damit auch die generelle Funktionalität bereitstellen können. Zu diesem Zwecke gibt es das Attribut role, mit dem eine solche Funktionalität wie ein Knopf (button) oder Nutzungshinweis (tooltip) angegeben werden können, Die Basiswerte sind in WAI-ARIA definiert, aber Interessierte können darüber hinaus auch eigene Funktionalitäten spezifizieren, wobei der Attributwert dann eine CURIE ist, eine spezielle Methode, um URIs abzukürzen, die auf die Definition der Funktionalität verweisen. Da sowohl WAI-ARIA als auch die Spezifikation einer CURIE noch Arbeitsentwürfe waren, als SVG tiny 1.2 als Empfehlung veröffentlich wurde, ist der Attributwert noch nicht normativ auf die genannte Syntax einschränkt. Für die Funktionalität und Sinnhaftigkeit der Verwendung ist aber davon abzuraten, eigene Wege zu gehen. Sofern die verwendete Sprache selbst über generische Konstrukte verfügt, ist es natürlich besser, diese zu verwenden, statt etwa über teils unzugängliches Skripte ein an sich nicht dafür gedachtes Element mit der Funktionalität zu dekorieren und dann die Funktionalität nur mittels role kenntlich zu machen.

Nun ist es auch zwangsläufig so, dass nicht für alles, was mit SVG darstellbar ist, auch ein spezifisches Element vorhanden ist, es ist etwa nicht zu erwarten, dass für eine schlafende Katze oder einen afrikanischen Elefanten in einer Stampede ein passendes Element definiert wird.

RDFa bietet die Möglichkeit, zumindest für häufig auftretende Anwendungen andere Spezifikationen zu referenzieren, um die Bedeutung von eher generischen Elementen zu präzisieren. Insbesondere bei Textinhalten können sogar maschinenlesbare und -verstehbare Notationen von Textstrukturen angegeben werden, wofür es bereits zahlreiche spezielle Vokabularien gibt. SVG hingegen spezifiziert bei Textelementen nur, wie diese graphisch darzustellen sind, nicht was sie bedeuten (Überschrift, Abschnitt, Absatz, Liste etc). Zum Beispiel können dafür Elemente von (X)HTML referenziert werden oder auch Elemente aus anderen Sprachen mit besserer Semantik wie LML.

RDFa ist die Attributversion von RDF, benutzt also das gleiche Prinzip von Tripeln - Subjekt, Prädikat, Objekt. RDFa ist so konstruiert, dass in der Regel das Tripel automatisch aus der Dokumentstruktur und den verwendeten Attributen folgt. Wie bei role werden auch hier CURIEs verwendet, um die exakte Bedeutung aus anderen Spezifikationen zu referenzieren. Somit sind auch diese Attributwerte in SVG tiny 1.2 noch nicht normativ eingeschränkt, eine Abweichung von den RDFa-Vorgaben führt aber zu keinem semantisch sinnvollen und eindeutigen Ergebnis. Die Attribute sind im Detail in der Spezifikation von XHTML+RDFa definiert.

Details zur Interpretation sind dem entsprechenden Kapitel im XHTML-Buch zu entnehmen: RDFa in XHTML.


Attribut role[Bearbeiten]

Mittels role wird die Funktion eines Elementes gekennzeichnet. Der Wert ist eine mit Leerzeichen speparierte Liste von Funktionen. Die Funktionen werden entweder durch eine Zeichenkette repräsentiert, die eine von WAI-ARIA vordefinierte Funktion beschreibt, oder durch CURIE, einen (abgekürzten) Verweis auf eine Definition der Funktion.

Attribut about[Bearbeiten]

about gibt das Subjekt einer Aussage an, also worum es geht. Der Wert ist im Wesentlichen eine URI zu einem Dokument oder Dokumentfragment, auf welches sich die Aussage bezieht. Sofern nicht angegeben, wird das aktuelle Subjekt vom Elternelement übernommen. Ist das aktuelle Element das Wurzelelement, ist das Dokument selbst das Subjekt oder - sofern angegeben - das per xml:base referenzierte Dokument.

Attribut property[Bearbeiten]

property gibt das Prädikat einer Aussage an, also in welcher Relation das Subjekt zum Objekt steht. Sofern nicht anders angegeben, ist der Elementinhalt das Objekt, um welches es geht.

Attribut resource[Bearbeiten]

resource ist eine Möglichkeit, das Objekt einer Aussage anzugeben, sofern es nicht der Elementinhalt selbst ist. Der Wert ist im Wesentlichen eine URI zu einem Dokument oder Dokumentfragment.

Attribut datatype[Bearbeiten]

datatype gibt den Datentyp an, in dem eine Information angegeben ist. Der Wert ist eine CURIE zur Definition des Datentyps.

Attribut typeof[Bearbeiten]

typeof gibt an, mit welchen Datentypen das Subjekt assoziiert ist. Der Wert ist eine mit Leerzeichen separierte Liste von CURIEs zu den Definitionen der Datentypen.

Attribut content[Bearbeiten]

content ist ein Ersatz für den Inhalt des Elementes (oder bei einem inhaltsleeren Element offenbar der Inhalt selbst). Die als Wert notierte Zeichenkette ist ein Textäquivalent für den Inhalt. Sofern datatype ebenfalls angegeben ist, entspricht die Zeichenkette der maschinenlesbaren Variante, während der Elementinhalt eine freiere Variante darstellt. Für eine formale Auswertung wird daher der Wert des Attributes verwendet statt der freien, schwerer zu interpretierenden Variante.

Attribute rel und rev[Bearbeiten]

rel und rev sind von (X)HTML übernommen und enthalten eine mit Leerzeichen separierte Liste von CURIEs, um Beziehungen oder Prädikate zwischen zwei Ressourcen anzugeben.

Beispiele zu role und RDFa[Bearbeiten]

Ein Knopf mit Nutzungshinweis:

<circle id="Start" cx="100" cy="100" r="100"
fill="#0a0"stroke-width="10" stroke="#00f"
role="button">
<title>
Knopf zum Beginn der Jonglage
</title>
<desc>
Ein Clown fährt auf seinem Einrad 
durch die Manege und jongliert dabei mit 
sechs rosafarbenen Pudelmützen mit grünen Bommeln, 
wenn dieser Knopf aktiviert oder angeklickert wird.
</desc>
<metadata xmnlns:wai="http://www.w3.org/TR/wai-aria/#" 
 role="tooltip" 
 property="wai:tooltip"
 content="Anklickern oder Aktivieren
zum Start der Animation" />
<animateMotion xlink:href="#Clown" 
  dur="600s" begin="Start.click; Start.activate">
<mpath xlink:href="#ClownPfad" />
</animateMotion>
</circle>

Im folgenden Beispiel werden Überschrift und Absatz aus HTML4 als property angegeben, weil SVG tiny 1.2 selbst über keine semantisch relevante Auszeichnung von Text verfügt. Etwas anwenderfreundlicher als HTML4 für diesen Zweck ist wohl zum Beispiel eine Sprache wie LML, die bereits unter anderem zur Verwendung als RDFa-Referenz ausgelegt ist.

Hier wird dann gleichzeitig auch eine neue Funktionalität von SVG tiny 1.2 genutzt, um Fließtext automatisch umzubrechen, was in SVG tiny 1.1 nicht umzusetzen war. Man beachte dabei auch den Unterschied zwischen der graphischen Formatierung mit dem Element tbreak und der semantischen Strukturierung durch Anwendung von property auf tspan innerhalb von textArea.

<g font-family="sans-serif" 
   xmnls:h="http://www.w3.org/TR/html4/struct/"

<text font-size="20"
x="100" y="100"
property="h:global.html#h-7.5.5">Hallo Welt!</text>

<textArea font-size="10"
x="100" y="150" width="500">
<tspan property="h:text.html#h-9.3.1">So 
grüßen wir die Stadt, 
das Land, die Erde, die Galaxis!<tbreak />
Und ganz besonders die
SVG-Arbeitsgruppe des W3C.</tspan>
<tbreak /><tbreak />

<tspan property="h:text.html#h-9.3.1">Der 
Gruß impliziert eine gewisse Weltoffenheit 
und eine positive Grundeinstellung 
und die philosophische Hypothese, 
daß es eine Trennung 
zwischen dem Ich und der Welt gibt, 
etwa im Gegensatz zum solipsistischen 
Ansatz, wo dieser Gruß 
nur ein Selbstgespräch wäre.</tspan>
<tbreak /><tbreak />

<tspan property="h:text.html#h-9.3.1">Die 
Nutzung des Imperativs 
zeigt wiederum eine gewissen Entschlossenheit, 
der Gruß selbst den Willen, 
offen auf die Welt zuzugehen, 
um eine Brücke 
zwischen dem Ich und der Welt
zu schlagen.</tspan>
</textArea>

</g>

Diverse Beispiele, allerdings mit Verwendungen in XHTML, sind in der XHTML+RDFa-Spezifikation angegeben. Spezielle Vokabularien sind derzeit (2011) für SVG noch nicht bekannt, aufgrund der gut durchdachten CURIE-Syntax kann aber eigentlich jede interessierte Gruppe eine Vokabelkollektion spezifizieren, damit diese von allen Autoren einheitlich genutzt werden kann.

Literatur[Bearbeiten]

Ein Hinweis zur Barrierefreiheit von SVG ist von der SVG-Arbeitsgruppe des W3C veröffentlicht worden und liefert Hilfen für eine bessere Zugänglichkeit von Dokumenten.

Text aus SVG extrahieren, nützlich, um ein Gefühl zu bekommen wie sich ein SVG ohne G anfühlt.

XLink, XML-Sprache zur Beschreibung von Verweisen, in SVG verwendet.

RDF, Rahmenwerk zur Beschreibung von Quellen (Meta-Informationen zu Werken).

Semantic Web Activity, Semantik im internet.

DCMI Dublin Core Metadata Initiative - Sprache zur Angabe von Meta-Informationen über Werke.

Text in SVG, Vorschläge zur Verwendung und Interpretation von Text in SVG.

IANA Medientypen, Liste registrierter internet-Medientypen (MIME).

RDFa in XHTML, Verwendung von RDFa-Attributen

WAI-ARIA, Anwendungen und Funktionalitäten angeben und zugänglicher machen

role, XHTML: role-Attribut

CURIE-Syntax, URIs abkürzen

LML, Auszeichnungssprache für Literatur, geeignet für RDFa in SVG tiny 1.2, um Text semantisch relevant zu kennzeichnen


Transformationen[Bearbeiten]

Koordinatensysteme und Transformationen[Bearbeiten]

In SVG können mit diversen Elementen neue Anzeigebereiche eröffnet werden, welche dann mit dem Attribut viewBox auch ein neues Koordinatensystem erhalten. Entsprechend wird eine (implizite) Transformation vom lokalen neuen Koordinatensystem vorgenommen, um den neuen Inhalt im alten Koordinatensystem des umgebenden Elementes darzustellen.

Daneben ist das Attribut transform verfügbar, und zwar bei graphischen Elementen und Gruppierungselementen. Für Farbverläufe und Muster gibt es zudem die verwandten Attribute gradientTransform und patternTransform, um diese Maldienste ebenfalls zu transformieren.

Verfügbar sind in SVG 1.1 und SVG tiny 1.2 affine Transformationen, also solche, die sich durch Matrizen darstellen lassen, welche Objekte vom neuen ins alte Koordinatensystem transformieren. Für einen Autor ist es nützlich, sich etwas mit Matrizenrechnung auszukennen, um die Effekte genau zu verstehen oder eine beliebige Transformation direkt angeben zu können. Für typische und gängige Transformationen stellt SVG allerdings auch einige spezielle Typen bereit, so dass solche Kenntnisse und Fertigkeiten nicht unbedingt notwendig sind.

Attribut transform[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3 3.2 4  ?  ?  ?

Mit dem Attribut transform können Gruppierungselemente und graphische Elemente transformiert werden.

Der Wert von transform ist eine Liste von Transformationen, die dann nacheinander ausgeführt werden. Die jeweiligen Transformationen der Liste sind durch Leerzeichen oder Komma separiert.

Die Transformationen werden durch Transformationstypen angegeben, die aus einem Schlüsselwort bestehen, unmittelbar gefolgt von Zahlen in Klammern. Die Transformationen entsprechen Matrizen, welche vom neuen ins alte Koordinatensystem transformieren. Die Matrix beschreibt also mathematisch, welche Koordinaten der transformierte Inhalt im alten Koordinatensystem hat. Koordinaten und Abmessungen des zu transformierenden Elementes und gegebenenfalls der Kindelemente sind also im neuen Koordinatensystem angegeben und werden somit durch die Transformation in das alte, umgebende Koordinatensystem übertragen.

Ist V ein Vektor im neuen Koordinatensystem, so ergibt sich zum Beispiel mit anzuwendenden Transformationen A, B, C der Vektor V' im alten Koordinatensystem:
V' = A * B * C * V, wobei im Attribut transform die entsprechenden Schlüsselwörter in gleicher Reihenfolge notiert sind, also sinngemäß transform="A(...) B(...) C(...)".

Um Verschiebungen mit in die Matrixschreibweise einzubauen, wird ein Trick verwendet. Es wird eine dritte Koordinate eingeführt, die immer 1 ist, ein Vektor sieht dann also wie folgt aus: V = (Vx Vy 1).

Eine Matrix von dieser Art mit den Zahlen a bis f sieht allgemein wie folgt aus:

a c e
b d f
0 0 1

Zu beachten ist dabei, dass eine Vertauschung der Reihenfolge von Transformationsmatrizen meistens zu einem anderen Ergebnis führt. Das ist ein Unterschied zur Multiplikation von einfachen Zahlen.

Das Produkt aller Transformationsmatrizen bis hinauf zum nächstgelegenen Elternelement, welches einen neuen Anzeigebereich eröffnet, wird die aktuelle Transformationsmatrix eines Elementes genannt (englisch: Current Transform Matrix; abgekürzt CTM). Die verbindet also ein Objekt im lokalen Koordinatensystem mit der Darstellung im nächstgelegenen Anzeigebereich. Ist also V ein Vektor zu einem Punkt eines Objektes im lokalen Koordinatensystem, so ist V' = CTM * V die Darstellung im nächstgelegenen Anzeigebereich.


Das Attribut transform ist animierbar mit dem Element animateTransform. Dazu wird der jeweilige Typ animiert. Der Typ 'matrix' ist allerdings nicht animierbar. Näheres dazu ist im Kapitel über Animation erläutert.

Folgendes sind die verfügbaren Transformationstypen (in SVG tiny 1.2 kommen noch eingeschränkte Transformationen hinzu, siehe nächsten Abschnitt):

'translate', Verschiebung[Bearbeiten]

Beispiel Verschiebung

'translate(e f)' spezifiziert eine Verschiebung oder Translation. e ist eine Verschiebung um e in x-Richtung, f ist eine Verschiebung um f in y-Richtung. f ist optional, sofern nicht angegeben, wird 0 angenommen. Ein Beispiel ist also translate(60 40) für eine Verschiebung um 60 in x-Richtung und um 40 in y-Richtung. translate(50) beschreibt eine Verschiebung um 50 in x-Richtung. translate(0 -50) beschreibt eine Verschiebung um -50 in y-Richtung.

Eine Verschiebungsmatrix um e in x-Richtung und f in y-Richtung sieht wie folgt aus:

1 0 e
0 1 f
0 0 1

Beispiel Verschiebung
Blaue gerandete Rechtecke werden mittels des Attributes transform vom Typ 'translate' verschoben, so dass ein rotes gerandetes Rechteck komplett verdeckt wird. Ein grau gerandetes Rechteck zeigt die unverschobene Position.

Gleiche Transformationstypen vertauschen immer miteinander, dies wird mit den dunkler gerandeten Rechtecken angedeutet.

'scale', Skalierung[Bearbeiten]

Beispiel Skalierung

'scale(a d)' ergibt eine Skalierung. a ist eine Skalierung der x-Richtung entsprechend einer Multiplikation mit a. d ist eine Skalierung der y-Richtung entsprechend einer Multiplikation mit d. d ist optional, sofern nicht angegeben, wird der gleiche Wert wie für a angenommen. Ein Beispiel ist also scale(-1 2), x-Werte werden mit -1 multipliziert, also eine Spiegelung an der y-Achse, y-Werte werden mit zwei multipliziert. Mittels scale(-1) erfolgt eine Punktspiegelung am Ursprung, mit scale(1 -1) eine Spiegelung an der x-Achse. Mit scale(0 1) wird alles auf die x-Achse abgebildet. In SVG 1.1 sind so transformierte Inhalte prinzipiell nicht mehr sichtbar. In SVG tiny 1.2 ergibt sich mit vector-effect="non-scaling-stroke" gegebenenfalls noch ein sichtbarer Strich.

Eine Skalierungsmatrix um a in x-Richtung und d in y-Richtung sieht wie folgt aus:

a 0 0
0 d 0
0 0 1

Beispiel Skalierung
Blaue gerandete Rechtecke werden mittels des Attributes transform vom Typ 'scale' skaliert, so dass rot gerandete Rechtecke komplett verdeckt werden. Ein grau gerandetes Rechteck zeigt das nicht transformierte Rechteck.

Gleiche Transformationstypen vertauschen immer miteinander, dies wird mit den dunkler gerandeten Rechtecken angedeutet.


'rotate', Drehung[Bearbeiten]

Beispiel Drehung

Mit rotate(w x y) wird eine Rotation um einen Winkel w (in Grad) um den Punkt (x, y) vorgenommen. Die positive Drehrichtung geht von der positiven Richtung der x-Achse zur positiven Richtung der y-Achse. x und y sind optionale Angaben, sofern nicht vorhanden, wird 0 angenommen. Zum Beispiel dreht rotate(90) die x-Achse in die y-Richtung und die y-Achse in die -x-Richtung, rotate(-90) die x-Achse in die -y-Richtung und die y-Achse in die x-Richtung. rotate(37 11 -13) beschreibt eine Drehung um 37 Grad um den Punkt (11 -13).

rotate(w x y) ist gleich translate(x,y) rotate(w) translate(-x, -y).

Eine Drehmatrix um den Winkel w um den Ursprung sieht wie folgt aus:

cos(w) -sin(w) 0
sin(w) cos(w) 0
0 0 1

Beispiel Drehung
Blaue gerandete Rechtecke werden mittels des Attributes transform vom Typ 'rotate' rotiert, so dass ein rot gerandetes Rechteck komplett verdeckt wird. Ein grau gerandetes Rechteck zeigt das nicht transformierte Rechteck.

Verschiedene Kombinationen von translate und rotate oder nur rotate können zum gleichen Ergebnis führen, dies wird mit den dunkler gerandeten Rechtecken angedeutet.

'skewX' und 'skewY', Scherung[Bearbeiten]

Beispiel Scherung in x-Richtung
Beispiel Scherung in y-Richtung
Beispiel Scherung
Beispiel Scherung in beliebiger Richtung
Beispiel Scherung mit problematischen Winkeln

Eine Scherung in x-Richtung um den Winkel u in Grad wird mit skewX(u) angegeben.
Eine Scherung in y-Richtung um den Winkel v in Grad wird mit skewY(v) angegeben.

Beispiele sind also skewX(30) oder skewY(-45) für eine Scherung in x-Richtung um 30 Grad beziehungsweise -45 Grad in y-Richtung.

Eine Schermatrix um den Winkel u in x-Richtung sieht wie folgt aus:

1 tan(u) 0
0 1 0
0 0 1

Beispiel Scherung in x-Richtung
Blau gerandete Rechtecke werden mittels des Attributes transform vom Typ 'skewX' geschert, so dass das rot gerandete Rechteck komplett verdeckt wird. Ein grau gerandetes Rechteck zeigt das nicht transformierte Rechteck.

Gleiche Transformationstypen vertauschen immer miteinander, dies wird mit den dunkler gerandeten Rechtecken angedeutet.

Eine Schermatrix um den Winkel v in y-Richtung sieht wie folgt aus:

1 0 0
tan(v) 1 0
0 0 1

Beispiel Scherung in y-Richtung
Blau gerandete Rechtecke werden mittels des Attributes transform vom Typ 'skewY' geschert, so dass das rot gerandete Rechteck komplett verdeckt wird. Ein grau gerandetes Rechteck zeigt das nicht transformierte Rechteck.

Gleiche Transformationstypen vertauschen immer miteinander, dies wird mit den dunkler gerandeten Rechtecken angedeutet.

Beispiel Scherung
Verschiedene Transformationen vertauschen in der Regel nicht miteinander, auch 'skewX' und 'skewY' nicht. Das Beispiel zeigt die beiden Möglichkeiten.

Beispiel Scherung in beliebiger Richtung
Um eine Scherung in einer beliebigen Richtung zu erreichen, kann man zum Beispiel die Scherungsrichtung in die x-Richtung drehen, gefolgt von 'skewX', gefolgt von einer erneuten Drehung, diesmal in die umgekehrte Richtung.

Wenn der Scherungswinkel s ist und der Winkel von der x-Achse zur Scherungsrichtung a, dann entspricht dies der Transformation rotate(a) skewX(s) rotate(-a).

Die Graphik links zeigt Beispiele mit s gleich 40 Grad. Die gefüllten Beispiele links entsprechen einer Drehung von 90 Grad. Dabei ist zu beachten, dass dies für 90 Grad skewY(-90) entspricht. Die gerandeten Beispiele rechts zeigen verschiedene Scherungsrichtungen mit einer Differenz von 45 Grad.

Offenbar ergibt sich ein numerisches Problem bei Scherungswinkeln wie 90 Grad oder -90 Grad, allgemein (90 + n*180)Grad mit einer ganzen Zahl n. In solchen Fällen ergibt sich eine unendliche Ausdehnung in der Scherungsrichtung. Die Spezifikationen machen dazu allerdings keine besonderen Angaben, das Darstellungsprogramm muss mit dem Problem selbst fertigwerden.

Beispiel Scherung mit problematischen Winkeln
Zwei Rechtecke werden mittels animateTransform vom Typ 'skewX', beziehungsweise 'skewY' geschert, wobei auch problematische Winkel auftreten.

'matrix', Matrix[Bearbeiten]

Beispiel Matrix

Eine allgemeine (affine) Transformation, auch oder gerade wenn sie nicht unter die vorherigen Typen fällt, kann direkt mit matrix(a,b,c,d,e,f) angegeben werden.

Dies entspricht der Matrix:

a c e
b d f
0 0 1

Der Typ 'matrix' ist nicht animierbar. Gründe dafür sind in den Spezifikationen nicht angegeben. Sind alle Zahlen von 'matrix' 0, so unterbindet dies die Anzeige des transformierten Elementes in SVG tiny 1.2.

Beispiel Matrix
Ein großes blau gerandetes Rechteck wird mittels des Attributes transform vom Typ 'matrix' verschoben, so dass ein rotes gerandetes Rechteck komplett verdeckt wird. Ein grau gerandetes Rechteck zeigt die unverschobene Position.

Transformationen vom Typ 'matrix' vertauschen im Allgemeinen nicht miteinander. Die kleinen Rechtecke zeigen Beispiele dazu.

Eingeschränkte Transformationen[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 tiny - 9.5 - - -  ?  ?  ?

Mit SVG tiny 1.2 wurde eine Möglichkeit eingeführt, Transformationen einzuschränken, so dass die Koordinaten die gleichen sind wie für das Hauptelement svg.

Es gibt verschiedene Transformationen, die Einfluss auf die Darstellung haben können, zum einen sind dies vom Betrachter initiierte Skalierungen, Translationen oder Drehungen. Zum anderen gibt es die implizit durch viewBox bewirkte Transformationen und schließlich das Produkt aller Transformationen bedingt durch die Attribute transform, welche in Elternelementen notiert sind oder direkt in einem graphischen Element.

Seien die vom Betrachter initiierten Transformationen BS (Skalierung), BT (Translation) und BD (Drehung), insgesamt: B = BT * BS * BD. VS sei die durch viewBox beim Element svg bedingte Transformation. Das Produkt aller Transformationsattribute eines Elementes mit dem Fragmentidentifizierer id bis hinauf zum svg sei TS(id).

Als aktuelle Transformationmatrix CTM gemäß SVG tiny 1.2 ergibt sich somit:
CTM = B * VS * TS(id).

SVG tiny 1.2 führt nun den neuen Transformationstyp 'ref' ein, der die Transformationen ausgenommen B und VS rückgängig macht oder es anders formuliert erlaubt, an beliebiger Stelle im Dokument Elemente anzuordnen, für die das anfängliche Koordinatensystem gilt.

Sofern die inverse Matrix von TS(id) existiert, kann das Ergebnis formal erzielt werden, indem die CTM mit dieser inversen Matrix (von rechts) multipliziert wird. Existiert die inverse Matrix nicht, so muss das Darstellungsprogramm eine andere Methode verwenden, um den gewünschten Effekt zu erreichen, zum Beispiel direkt die Koordinaten als solche im anfänglichen Koordinatensystem interpretieren (was praktisch ein anderes Vorgehen erfordern mag als bei der Darstellung ohne diesen Transformationstyp).

'ref(svg)'[Bearbeiten]

Beispiel eingeschränkte Transformation

Mittels 'ref(svg)' wird angegeben, dass das Element nicht in lokalen Koordinaten angegeben ist, sondern in denen des anfänglichen Anzeigebereiches (ausschließlich der durch den Betrachter initiierten Transformationen).

Beispiel:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny"
   xmlns="http://www.w3.org/2000/svg"
   xml:lang="de"
   viewBox="-100 -100 200 200">
<title>Beispiel eingeschränkte Transformation</title>

<g transform="skewX(30) rotate(45) translate(-20,-20)">
<rect width="40" height="40" fill="green" />
<rect width="40" height="40" fill="blue" transform="ref(svg)" />
</g>

</svg>

Während das grüne Viereck geschert, gedreht und verschoben wird und darauf auch die implizite Transformation durch viewBox wirkt, wird das blaue Quadrat nicht geschert, gedreht oder verschoben, sondern in den Koordinaten des Anzeigebereiches dargestellt, aber gegebenenfalls aufgrund des Malermodells das grüne teilweise verdeckend, weil es später im Quelltext steht.

Beispiel eingeschränkte Transformation
Eine Gruppe mit einem grünen und einem blauen Quadrat wird verschoben, gedreht und geschert. Für das blaue Quadrat ist die Transformation allerdings eingeschränkt. Position und Größe entsprechen dem Quadrat mit schwarzem Strich.

'ref(svg, x, y)'[Bearbeiten]

Beispiel eingeschränkte Transformation

Mittels 'ref(svg, x, y)' wird angegeben, dass das Element nicht in lokalen Koordinaten angegeben ist, sondern in denen des anfänglichen Anzeigebereiches (ausschließlich der durch den Betrachter initiierten Transformationen).
Dabei sind x und y zwei Zahlen, die eine zusätzliche Verschiebung des Elementes relativ zum anfänglichen Anzeigebereich in Koordinaten des anfänglichen Anzeigebereiches bewirken.

Beispiel:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny"
   xmlns="http://www.w3.org/2000/svg"
   xml:lang="de"
   viewBox="-100 -100 200 200">
<title>Beispiel eingeschränkte Transformation</title>

<g transform="skewX(30) rotate(45) translate(-20,-20)">
<rect width="40" height="40" fill="green" />
<rect width="40" height="40" fill="blue" transform="ref(svg, -20,-20)" />
</g>

</svg>

Während das grüne Viereck geschert, gedreht und verschoben wird und darauf auch die implizite Transformation durch viewBox wirkt, wird das blaue Quadrat nicht geschert, gedreht oder verschoben, sondern in den Koordinaten des Anzeigebereiches dargestellt, aber gegebenenfalls aufgrund des Malermodells das grüne teilweise verdeckend, weil es später im Quelltext steht. Das blaue Quadrat wird zuätzlich im Anzeigebereich verschoben, so dass die linke obere Ecke um -20 horizontal und -20 vertikal verschoben ist (sofern der Betrachter keine zusätzlichen Transformationen veranlasst hat).

Beispiel eingeschränkte Transformation
Eine Gruppe mit einem grünen, blauen und gelben Quadrat wird verschoben, gedreht und geschert. Für die Gruppe mit dem blauen und dem gelben Quadrat ist die Transformation allerdings eingeschränkt. Das gelbe wird wiederum auch noch direkt gedreht, diese Transformation ist nicht direkt betroffen, weil die Eingeschränkung für die umgebende Gruppe angegeben ist. Position und Größe entsprechen dem Quadrat mit schwarzem Strich.


Grundformen[Bearbeiten]

Inhaltsverzeichnis


Einführung Grundformen[Bearbeiten]

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.

Zunächst werden im folgenden Kapitel graphische Grundformen behandelt. Die Erstellung allgemeiner Pfade ist im Kapitel Pfade erklärt. Die Verwendung von Text als eine besondere Form von Pfaden, deren genaues Aussehen von der verwendeten Schriftart abhängt, ist im Kapitel Text als Graphik erläutert.

Element line, Linie[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
Linien mit SVG
Linienscharen mit einer kubischen Bézierkurve als Scharfunktion

Linien - genauer gesagt Strecken - werden in SVG durch das Element line beschrieben. Eine Linie hat keine flächige Ausdehnung und somit keine Füllung (siehe fill-Attribute), sie besteht nur aus dem Strich (siehe stroke-Attribute). Anders als die anderen Grundformen ist eine Linie also ohne Angabe einer geeigneten Kombination von Präsentationsattributen stroke* nicht sichtbar, siehe auch das Beispiel und das Kapitel 'Graphiken formatieren', in welchem Präsentationsattribute erläutert werden.

Attribute x1, y1, x2, y2[Bearbeiten]

Eine Linie wird hierbei durch den Startpunkt mit den Attributen x1 und y1 und den Endpunkt mit den Attributen x2 und y2 spezifiziert. x1 und x2 sind also die x-Koordinaten, y1 und y2 die y-Koordinaten. Folglich ist der Wert eines jeden Attributes eine Koordinate.

Nicht angegebene Attribute x1, y1, x2, y2 werden als 0 angenommen. Die Attribute sind animierbar.

Beispiele Linie[Bearbeiten]

 <?xml version="1.0" ?>
 <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
   <line x1="5" y1="5" x2="95" y2="45" stroke="black" />
   <line x1="5" y1="45" x2="95" y2="5" stroke="black" />
 </svg>

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

Nun könnte vermutet werden, dass Linien alleine nicht besonders viel hergeben, schön dekoriert können aber bereits alleine mit ihnen reizvolle abstrakte Bilder erstellt werden: Linienscharen mit einer kubischen Bézierkurve als Scharfunktion.

LineElement W3C Referenz

Element rect, Rechteck[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
Einfaches Rechteck
Eine Schar von Rechtecken mit Farbverlauf, skaliert und rotiert

Ein einfaches Rechteck wird mit dem Element rect angegeben. Die Position der linken oberen Ecke in Form einer x- und einer y-Koordinate 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 das Rechteck dann in die gewünschte Ausrichtung gedreht wird.

Beispiel: Eine Schar von Rechtecken mit Farbverlauf, skaliert und rotiert.

Attribute x und y[Bearbeiten]

Die Attribute x und y geben die linke obere Ecke des Rechtecks (ohne Berücksichtigung möglicherweiser abgerundeter Ecken) im lokalen Koordinatensystem an. Der Wert ist jeweils eine Koordinate. x für die Position in x-Richtung, y für die Position in y-Richtung. Nicht angegebene x oder y entsprechen 0.

Die Attribute x, y sind animierbar.

Attribute width und height[Bearbeiten]

width gibt die Breite und height die Höhe des Rechtecks im lokalen Koordinatensystem an. Der Wert ist jeweils eine Länge.

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 width und height sind animierbar.

 <?xml version="1.0"?>
 <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
   <rect x="20" y="5" width="60" height="10" />
 </svg>

Ohne weitere Angaben ist solch eine Grundform schwarz gefüllt. Dies kann durch die Angabe des Präsentationsattributes fill geändert werden, etwa fill="red".

Attribute rx und ry[Bearbeiten]

Beispiel-SVG zur Verwendung des Elementes rect

Ein Rechteck kann auch abgerundete Ecken haben. Abgerundete Ecken werden durch die Angabe der Attribute rx und ry erreicht. Der Wert ist jeweils eine Länge. 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).

<rect x="10" y="10" width="20" height="50" rx="2" ry="3" />
<rect x="50" y="10" width="20" height="50" rx="2" />
<rect x="90" y="10" width="20" height="50" ry="2" />

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 rx, ry sind animierbar.

W3C: rect

Element circle, Kreis[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
Einfacher Kreis
Schar von Kreisen mit Farbverlauf

Ein Kreis wird in SVG durch das Element circle repräsentiert. Auch wenn die Kreise lediglich eine Spezialform der Ellipse ist, besitzt SVG hierfür ein eigenes Element.

Attribute cx und cy[Bearbeiten]

Der Kreismittelpunkt wird mit den Attributen cx und cy festgelegt. cx steht für die horizontale Koordinate im lokalen Koordinatensystem und cy für die vertikale Koordinate. Der Wert ist jeweils eine Koordinate.

Nicht angegebene cx oder cy werden als 0 angenommen. Die Attribute sind animierbar.

Attribut r[Bearbeiten]

Der Radius des Kreises wird mit dem Attribut r angegeben. Der Wert ist eine Länge. 0 unterbindet die Anzeige des Kreises, in SVG 1.1 ist ein negativer Wert ein Fehler. In SVG tiny 1.2 wird ein negativer Wert in dem Sinne ignoriert, dass dort stattdessen die Voreinstellung 0 verwendet wird, welche die Anzeige des Kreises unterbindet.

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.

Das Attribut ist animierbar.

Beispiele Kreis[Bearbeiten]

1  <?xml version="1.0"?>
2  <svg width="100" height="150" xmlns="http://www.w3.org/2000/svg">
3    <circle cx="50" cy="80" r="40" />
4  </svg>

Schar von Kreisen mit Farbverlauf.

W3C: circle

Element ellipse, Ellipse[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
Einfache Ellipse
Ellipsenscharen

Eine Ellipse wird mit dem Element ellipse beschrieben.

Attribute cx und cy[Bearbeiten]

Wie beim Kreis legen die Attribute cx und cy den Mittelpunkt fest. cx steht für die horizontale Koordinate im lokalen Koordinatensystem und cy für die vertikale Koordinate. Der Wert ist jeweils eine Koordinate.

Nicht angegebene cx oder cy werden als 0 angenommen. Die Attribute sind animierbar.

Attribute rx und ry[Bearbeiten]

Eine Ellipse enthält zwei Attribute zur Angabe der halben Hauptachsen (auch Radien genannt), wobei die Hauptachsen immer in x- und y-Richtung des lokalen Koordinatensystems ausgerichtet sind. Eine andere Ausrichtung ist mit dem allgemeinen Attribut transform möglich. Zum einem gibt es für die Horizontale das Attribut rx und zum anderen für die Vertikale ry. Der Wert ist jeweils eine Länge.

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.

Beispiele Ellipse[Bearbeiten]

1  <?xml version="1.0"?>
2  <svg width="60" height="100" xmlns="http://www.w3.org/2000/svg">
3    <ellipse cx="30" cy="50" rx="20" ry="30" />
4  </svg>

Ellipsenscharen


W3C ellipse

Element polyline, Linienzug[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
Beispiel-SVG zur Verwendung des Elementes polyline

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. Selbst wenn der erste Punkt dem letzten entspricht, kann es je nach Verwendung von Präsentationsattributen Unterschiede in der Präsentation von polyline und polygon. Auch deshalb ist es bei geschlossenen Formen dringend zu empfehlen, polygon zu verwenden.

Attribut points[Bearbeiten]

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 ein Wert für die x-Richtung, dann einer 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, dass 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ässt 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 Linienzug[Bearbeiten]

<polyline points="200,50 200,100 400,400 100,200 50,200" />

Beispiel-SVG zur Verwendung des Elementes polyline

Element polygon, Polygon[Bearbeiten]

Beispiel-SVG zur Verwendung des Elementes polygon
SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2

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 durch ein gerades Kurvenstück verbunden. Es ist also nicht notwendig, den ersten Punkt als letzten zu wiederholen.

Attribut points[Bearbeiten]

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 ein Wert für die x-Richtung, dann einer 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, dass 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ässt 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 Polygon[Bearbeiten]

Als Beispiel ein Pentagramm (mit einigen Präsentationsattributen):

1 <polygon fill="#005" fill-opacity="0.7" fill-rule="evenodd"
2 stroke="#ccf" stroke-width="32" stroke-opacity="0.7"
3 stroke-miterlimit="30" stroke-linejoin="miter"
4 points="500,800 323.6644,257.2949 785.317,592.7051
5 214.683,592.7051 676.3356,257.2949"/>

(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

Exkurs Polygone malen[Bearbeiten]

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

Programme wie Inkscape bieten eine graphische Oberfläche, wo insbesondere symmetrische Polygone wie die regulären (konvexen) und sogenannte Sterne mit vorgefertigten Funktionen gemalt werden können. 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[Bearbeiten]

Reguläre (konvexe) Polygone

Reguläre (konvexe) Polygone zeichnen sich dadurch aus, dass 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 beliebigen 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

Allgemeine reguläre Polygone[Bearbeiten]

Sternpolygone

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 werden 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

Man beachte: Mit obiger Formel lassen sich Sterne wie etwa der Davidsstern nicht darstellen. Will man diesen mit einem Element polygon darstellen, ist es notwendig, alle Schnittpunkte oder Ecken einzeln zu bestimmen und diese in einer bestimmten Reihenfolge zu verbinden. Meist wird man den Davidsstern allerdings lieber mit zwei gleichseitigen Dreiecken bilden wollen, die gegeneinander verdreht sind. Weil mit polygon keine weiteren Unterpfade notiert werden, ist dafür dann also auf das Element path auszuweichen. Anloges gilt natürlich für andere Sterne dieses Typs, etwa gegeneinander verdrehte Quadrate, Fünfecke etc.

Spiegelstern[Bearbeiten]

Spiegelsterne

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 oder mehr Radien oder Winkel im Wechsel vorkommen. Eine Variante ist zum Beispiel, was in diesem Zusammenhang einmal ein Spiegelstern getauft werden soll, 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 nur m = 1 verwendet, die anderen sind aber auch erwähnenswert. Insbesondere bei einer geraden Anzahl von Radien ergeben sich interessante Figuren.

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

Drehstern[Bearbeiten]

Drehsterne

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

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

Allgemeiner Stern[Bearbeiten]

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.

Stern mit vorgegebenem Spitzenwinkel[Bearbeiten]

Stern mit vorgegebenem Spitzenwinkel, Parameter
Umrandung eines Pentagramms als Beispiel für die Umrandung eines nicht konvexen regulären Polygons

Während bei den vorherigen Beispielen immer die Radien eines Sterns vorgegeben sind, kommt es beim 'Spiegelstern' getauften Stern auch oft vor, dass der Spitzenwinkel vorgegeben ist, also der Winkel an einer Strahlspitze, woraus sich dann automatisch das Verhältnis der beiden beteiligten Radien ergibt.

Ist n die Anzahl der Strahlen größer als 0, so ist (in Einheiten einer vollen Drehung, das wird in diesem Abschnitt immer als Einheit für Winkel verwendet) der Winkel zwischen zwei Strahlen w= 1/n (im folgenden Beispiel Strahlenwinkel genannt).

Sei R der Radius eines Strahls und r der Radius mittig zwischen zwei Strahlen.

Sei s der gegebene Spitzenwinkel größer als 0, so ergibt sich, falls s+w keine ganze Zahl ist:

r/R = sin(πs)/sin(π(s+w))

Ist s+w eine ganze Zahl, so handelt es sich nicht um einen Typ von Stern, der sinnvoll durch eine endlich große Figur beschrieben werden kann.

Zu erkennen ist dabei, dass bei besonderen Spitzenwinkeln r größer als R werden kann, Außen- und Innenspitze tauschen dabei also die Rollen.

Ist sin(πs) = sin(π(s+w)), ergibt sich offenbar r=R, also ein reguläres Polygon mit 2n Ecken.

Stern mit vorgegebenem Spitzenwinkel, Parameter

Umrandung eines Pentagramms als Beispiel für die Umrandung eines nicht konvexen regulären Polygons

Spezielle Untertypen dieser Sternfamilie mit zwei Radien werden oft auf Flaggen oder in der Heraldik verwendet. Dies ist die äußere Umrandung eines nicht konvexen, regulären Polygons, etwa eines Pentagrammes. Solch ein nicht konvexes, reguläres Polygon wird durch eine weitere Zahl bestimmt. Während bei einem konvexen regulären Polygon jeweils mit der nächsten Ecke verbunden wird, wird bei diesem nicht konvexen Typ eine der nächsten Ecken verwendet, die zweite Zahl d gibt dann an, zur wievielte Ecke gesprungen werden soll. Ohne Einschränkung der Allgemeinheit soll hier d kleiner oder gleich n/2 betrachtet werden, bei größeren gibt es allenfalls eine Umkehrung der Drehrichtung bei der Erzeugung des Polygons, kein neues Polygon (und die folgende Formel ist sinngemäß anzupassen).

Jedenfalls ergibt sich der Spitzenwinkel dieses speziellen Untertyps dann zu:
s=(1-2d/n)/2.

Dies schließt übrigens auch die Umrandung ähnlicher Sterne ein, zu denen der Davidsstern gehört, diese Sterne bestehen dann anders als die nicht konvexen regulären Polygone aus mehreren Unterpfaden, haben aber eine ähnliche Erscheinung.. Für die Umrandung des Davidssterns wäre zum Beispiel einfach n=6, d=2 zu wählen, also s=1/6.

Für den häufig auf Flaggen zu findenden fünfzackigen Stern, der der Umrandung eines Pentagramms entspricht, gilt demzufolge n=5, d=2, s=0.1.

Facettierter Stern[Bearbeiten]

Bei einem facettierten Stern wird durch unterschiedliche Farbgebung jeweils der Hälfte der radial geteilten Strahlen ein dreidimensionaler Effekt naiv vorgetäuscht. Vom Zentrum aus gesehen wird jeweils jede linke Hälfte der Strahlen in einer Farbe dargestellt, die jeweils rechte Hälfte in einer anderen. Zusätzlich oder stattdessen können auch die radialen Linien zu den Eckpunkten des Sterns mit sichtbaren Strichen versehen werden. Durch die farbliche Änderung bleibt so die diskrete Drehsymmetrie des Sterns erhalten, es gibt aber keine Spiegelachsen mehr.

Um einen facettierten Stern zu realisieren, ist zusätzlich zu den Eckpunkten eines Sterns mit vorgegebenem Spitzenwinkel noch das Zentrum als Punkt zu berücksichtigen. Durch Verbindung des Zentrums und der Eckpunkte in geeigneter Reihenfolge kann so eine Facette als Polygon notiert werden. Die andere Facette wird einfach durch eine andere Reihenfolge der Verbindung der Punkte erreicht. So besteht der facettierte Stern also mindestens aus zwei Polygonen, die zusammen den Stern bilden. Dann kann es noch vorteilhaft sein, die Umrandung des Sterns und die zentralen Striche getrennt zu notieren und sichtbar über den Verbindungslinien der beiden Facetten anzuordnen, um Artefakte durch Rundungsfehler des Darstellungsprogrammes zu kaschieren.

Sinngemäß können so natürlich auch andere Sterne, insbesondere solche mit diskreter Drehsymmetrie, facettiert werden.

Interessanter Trick bei der Beispieldatei: Die Striche werden zusammen in einem Element g notiert, auf welches die Eigenschaft opacity angewendet wird. So kann erreicht werden, dass trotz der Überlappung der Striche eine einheitliche Transparenz ähnlich wie bei einem einzigen Pfad erreicht wird, zudem kann so der Strich für den facettierten Stern für beide Facetten gemeinsam ausgeführt werden, ohne dass die später notierte Facette den Strich der früher notierten teilweise überdeckt.


Pfade[Bearbeiten]

Pfade - beliebige Formen spezifizieren[Bearbeiten]

Ein Pfad ist wahrscheinlich das meist verwendete Zeichenwerkzeug, welches in SVG Verwendung findet. Um einen Pfad anzugeben, wird das Element path verwendet. Es hat die spezifischen Attribute d und pathLength.

Attribut d[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2

Das Attribut d enthält die eigentlichen Pfaddaten, das sind Kommandos, meist gefolgt von lokalen Koordinaten oder Parametern. Der Wert ist also eine kompliziertere Zeichenkette, die im weiteren Text genauer erläutert wird.

Das Attribut ist animierbar. Allerdings gibt es spezielle Einschränkungen an die Struktur der Attributwerte für Animationen, die im weiteren Text noch erläutert werden.

Kommandos sind einzelne Buchstaben, Koordinaten oder Parameter oder 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 kann 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. Eines oder mehrere dieser Kurvensegmente können auch Pfadfragment(e) genannt werden, wenn sie im d-Attribut aufeinanderfolgen. Ein Pfad kann auch mehrere Unterpfade enthalten, die nicht miteinander verbunden sind. Trotzdem 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 einen oder mehrere sich kreuzende Pfade deutlich unterschiedlich aussehen.

Ein einfaches Beispiel für eine Pfadangabe:

<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. Kleine 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 Zeichenstiftes fest und beginnt einen neuen Pfad oder Unterpfad. Legt die Position des Zeichenstiftes 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 dem Kontrollpunkt am Anfang der Kurve und (x2,y2) als dem Kontrollpunkt am Ende der Kurve. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muss 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 muss 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 muss 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 gesamte Ellipse 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 Boolesche Parameter large-arc-flag sweep-flag. Die Werte sind 0 oder 1. large-arc-flag 1 bewirkt, dass 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 (keine)

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.

Insbesondere bei umfangreicheren Pfadangaben kann es für die gesamte Dateigröße entscheidend sein, wie geschickt oder ungeschickt die Pfaddaten notiert werden. Sind in einem Pfad aufeinanderfolgende Punkte auch räumlich benachbart, so sind meist relative Angabe mit kleinen Kommandos effektiver als absolute Angaben. Auch die Anzahl der angegebenen Stellen bei einer Zahl ist relevant sowohl für die Genauigkeit bei Skalierung als auch für die Dateigröße. Wenn drei statt sechs gültige Ziffern ausreichen, um die graphische Information zu vermitteln, kann das bei großen Pfaden eine Reduktion der Dateigröße um die Hälfte ausmachen. Entsprechend kann es sich lohnen, das Koordinatensystem so zu wählen, dass die meisten Koordinaten zum Beispiel zwischen 0 und 999 liegen. Mittels viewBox oder Transformationen von Gruppen kann dann dies Koordinatensystem an den gewünschten Anzeigebereich angepasst werden.

Als Sonderfall ist ein (Unter-)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.

Zur Animation des Attributes d:
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 muss die Anzahl der angegebenen Koordinaten und Parameter gleich bleiben. 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.

Attribut pathLength[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 - 9 - - -  ?  ?  ?
BeispielpathLength: kubische Pfade als Kreisnäherung mit gestricheltem Rand

pathLength gibt an, welche Pfadlänge der Autor für den angegebenen Pfad berechnet hat. Der Wert ist eine (positive) Zahl für die Pfadlänge in lokalen Einheiten. Ein negativer Wert ist in SVG 1.1 ein Fehler, der zum Abbruch der Darstellung führt, in SVG tiny 1.2 wird in dem Falle nur das Attribut ignoriert.

Das Attribut ist animierbar.

Die explizite Berechnung der Pfadlänge ist teilweise für einige Pfadsegmente nur numerisch möglich, weswegen es da Abweichungen zwischen den Ergebnissen des Autors und dem jeweils verwendeten Darstellungsprogramm geben kann. Das Darstellungsprogramm sollte dann die Darstellung zum Beispiel von gestrichelten Linien entlang des Pfades entsprechend anpassen. Nachvollziehbar ist dies zum Beispiel mit Opera.

Beispiel:
kubische Pfade als Kreisnäherung mit gestricheltem Rand
Mit kubischen Pfaden werden ineinanderliegende Kreise angenähert. Zumindest im tiny-Profil lässt sich die Figur mit einem Pfad nicht besser realisieren, weil es da keine elliptischen Pfadsegmente gibt. Für exakte Kreise wäre die Pfadlänge exakt bekannt, hier 1500π.
Aufgrund der kubischen Beispiele stimmt dies sowieso nicht ganz genau, für das Beispiel wird das großzügig auf 4500 abgerundet, das weicht nur um weniger als 5 Prozent vom richtigen Wert ab.
Besser wäre offenbar 4712.4 als Schätzung. Jenseits von Demonstrationsbeispielen ist es für Autoren immer ratsam, möglichst präzise zu schätzen.

Aufgrund der Verhältnisse der Durchmesser 8:4:2:1 der genäherten Kreise ergibt sich für das Muster von stroke-dasharray ein schönes Muster mit dem Wert 50 (oder eben genauer 50π/3), bei dem wird der Strich des kleinsten Kreises gerade in drei gleichgroße gemalte und 3 weitere ebenso große nicht gemalte Teile zerlegt, die Striche der größeren Kreise werden entsprechend der Verhältnisse der Durchmesser in mehr gleichgroße Teile zerlegt.

Zum Vergleich wird darunterliegend der gleiche Pfad ohne das Attribut verwendet und ein entsprechend optimierter Wert für stroke-dasharray verwendet. Dort ist das Strichmuster rot. Wird davon etwas sichtbar, hat das Darstellungsprogramm offenbar einen Fehler.

Opera hat einen für viele Versionen bekannten Fehler für stroke-dasharray und geschlossene Unterpfade. Der wird hier kompensiert durch das Anhängen des Anfangspunktes des Pfades mit einem M-Kommando, dies hat keinen Einfluss auf die korrekte Darstellung, kompensiert aber den Opera-Fehler.

Kurven mit speziellen Programmen erzeugen[Bearbeiten]

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 dem Autor meist 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.

'Hallo Welt!' mit Inkscape als Kalligraphie

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 der Autor erreichen will.

Zum Beispiel mit Inkscape kann nun das Resultat weiter bearbeitet werden, Pfade können automatisch vereinfacht werden. Die Vereinfachung besteht darin, die Anzahl der Punkte und Kontrollpunkte zu reduzieren und ihre Werte so zu manipulieren, dass ein einfacherer, glatterer Umriss entsteht. 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 offenbar, dass 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 Darstellungsprogramme, 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ässt sich die Dateigröße so meist auf einige Prozent bis schlimmstenfalls fünfzig Prozent reduzieren. Jeff Schiller bietet etwa das Skript 'scour' an, welches zum Beispiel Dateien von Inkscape ordentlich aufräumt, allerdings die Pfade nicht rundet oder vereinfacht.

Vogel

Beispiel: Vogel.

Die Abstrahierung des Motivs oder die Optimierung ist bei diesem Motiv nur so weit fortgeschritten, dass 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. Das Programm versteht also nicht, was aus menschlicher Sicht wichtig oder relevant ist, daher sind die erzeugten Pfade oft nicht direkt mit dem zu vergleichen, was ein Mensch als Struktur erkennen und malen würde. Bei einer weiteren Optimierung oder Abstrahierung müsste so vorgegangen werden, dass die Pfade wirklich Bestandteilen des Motivs zugeordnet werden, die von Menschen als relevant angesehen werden. Dies entspricht also einem weiteren Aufspalten von Unterpfaden in selbständige Pfade, eventuell dann weitere Vereinfachungen, an einigen Stellen auch Präzisierungen und Anpassungen der Kurvenform.

Eine weitere Methode der Vektorisierung besteht darin, das Bild der Digitalkamera in ein Programm wie Inkscape zu laden und dann mit diesem das Motiv nachzumalen, also als Hilfe und Vorlage zu verwenden. Das hat den Vorteil, dass der Mensch die relevanten Strukturen besser erkennen und nach Relevanz betonen kann, um die mit der Vektorisierung einhergehende Abstrahierung des Motivs gezielt nach eigenem Verständnis zu gestalten.


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.

Pfadkommandos im Detail[Bearbeiten]

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.

Neben den einfachen geraden Linien gibt es auch gekrümmte Kurven, nach Pierre Étienne Bézier (1910/1999) benannt, der diese Art von Kurven, beziehungsweise deren Parametrisierung erstmals beschrieb. Eine Gerade ist auch eine Bézierkurve, eine lineare, weil in der Parametrisierung der Laufparameter nur linear oder affin eingeht. Entsprechend geht bei einer quadratischen Kurve der Laufparameter auch noch quadratisch ein, bei einer kubisch auch noch kubisch. Es gibt auch noch Bézierkurven höherer Ordnung, für diese gibt es in SVG allerdings keine Pfadkommandos. Die gekrümmten Kurvensegmente haben neben Anfangs- und Endpunkt noch ein (quadratisch) oder zwei (kubisch) Kontrollpunkte, welche bestimmen, wie die Kurve vom Anfangs- zum Endpunkt verläuft.

Die genaue Parametrisierung ist im jeweiligen Unterabschnitt für das jeweilige Pfadkommando angegeben. Die animierten SVGs zeigen eine Veranschaulichung, wie die Kurven aus Hilfslinien entstehen (oben in der tabellarischen Kurzfassung der Kommandos gibt es für quadratische und kubisch Kurven ähnliche, im Format image/gif umgesetzte Animationen). Die Konstruktion einer Kurve erfolgt hierbei mittels einiger Hilfslinien. Üblicherweise werden die Punkte P(i) genannt, mit i einer Zahl, 0 für den Anfangspunkt, dann folgen gegebenenfalls die Kontrollpunkte, als letztes der Endpunkt. Bei einer Parametrisierung der beteiligten Kurven sei s der Laufparameter von 0 bis 1.

Konstruktion einer quadratischen Kurve:
Eine Hilfslinie entsteht, indem die Position s der Verbindungslinie von P(0) nach P(1) mit der Position s der Verbindungslinie von P(1) nach P(2) verbunden wird. Auf dieser Hilfslinie ist der zu s gehörige Punkt der quadratischen Kurve dann die zu s gehörige Position auf der Hilfslinie.

Konstruktion einer kubischen Kurve:
Eine Hilfslinie H entsteht, indem die Position s der Verbindungslinie von P(0) nach P(1) mit der Position s der Verbindungslinie von P(1) nach P(2) verbunden wird. Eine weitere Hilfslinie I entsteht, indem die Position s der Verbindungslinie von P(1) nach P(2) mit der Position s der Verbindungslinie von P(2) nach P(3) verbunden wird. Eine weitere Hilfslinie J entsteht, indem die Position s auf I mit der Position t auf J verbunden wird.

Die s-Positionen auf I und J bilden quadratische Kurven. Auf der Hilfslinie J ist der zu s gehörige Punkt der kubischen Kurve dann die zu s gehörige Position auf der Hilfslinie J.

Direktes ineinander Einsetzen ergibt dann übrigens auch die bei den jeweiligen Pfadkommandos angegebene Formel zur Parametrisierung der jeweiligen Kurve. Es ist also nicht unbedingt notwendig, die Konstruktion mit Hilfslinien auszuführen. Traditionell gibt es allerdings für Rechner effektive Verfahren gerade Linien zu malen. Zusammen mit dem weiter unten erläuterten Algorithmus nach De Casteljau ergibt sich so auch die Möglichkeit, eine gekrümmte Kurve durch viele Gerade effektiv anzunähern.

Eine Parametrisierung eines Kurvensegmentes ist auch hilfreich, um das Kurvensegment zu analysieren, Fortsetzungen ohne Knick zu bestimmen, Markierungen anzubringen oder gegebenenfalls andere Kurven zu berechnen, die diese unter einem definierten Winkel schneiden. Es gibt viele weitere Anwendungen, die eine mathematische Herangehensweise erfordern, um zügig ein korrektes Ergebnis zu erhalten. Generell gilt, dass 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. Eine senkrechte Linie ergibt sich durch Vertauschung der Komponenten von A und einem Vorzeichenwechsel einer der Komponenten.

Bei Parametrisierungen kann es auch an der Parametrisierung selbst 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. Statt die Regel von L'Hospital nun jedes Mal explizit anzuwenden, gilt für Bézierkurven: 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.

Pfad oder Unterpfad beginnen: M, m[Bearbeiten]

Pfad mit Unterpfaden, nur mit M, m konstruiert
Pfade mit und ohne Unterpfade, gleichsinnige und gegensinnige Umläufe

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, dass 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 angegebenen 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:

 1 <path fill="none" stroke="#ff0"
 2 d="M0,0 200,0 200,20 10,20
 3 M190,10 0,10 0,40 190,40
 4 m-180,-10 190,0 0,30 -190,0
 5 m180,-10 -190,0 0,30 190,0
 6 m-180,-10 190,0 0,30 -190,0
 7 m180,-10 -190,0 0,30 190,0
 8 m-180,-10 190,0 0,30 -190,0
 9 m180,-10 -190,0 0,30 190,0
10 m-180,-10 190,0 0,30 -190,0
11 m180,-10 -190,0 0,20 200,0
12 M-10,0 -10,190 M210,190 210,0" />

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 0

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.

Pfad oder Unterpfad beenden: Z, z[Bearbeiten]

Pfade mit und ohne Z - Einfluss auf die Darstellung
Fortsetzung von Pfaden hinter dem Kommando Z

Mit dem Kommando 'Z' oder 'z' (was dasselbe 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 sich ergibt, wenn einfach der Endpunkt gleich dem Anfangspunkt explizit angegeben wird. 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 - Einfluss 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.

Gerade Linienstücke: L, l, H, h, V, v[Bearbeiten]

Sudoku-Spielfeld - kompakte Darstellung mit 'H', 'h', 'V', 'v'
Spielerei mit Unterpfaden, bestehend aus Quadraten - Beispiel für Kommandos 'L' und 'l'

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
d2k(s)/ds2 = 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 zwei gerade Pfadsegmente so zu verlängern sind, dass sie als ein Kurvenzug dargestellt werden können. Das läuft darauf hinaus, erst mal 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, dass es viele Fälle gibt, wo mehr als ein quadratisches Kurvensegment gebraucht wird, um zwei Pfade ohne Knick miteinander zu verbinden.

Quadratische Kurvenstücke: Q, q, T, t[Bearbeiten]

Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando T
Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando t
Nichtlokalität von Kontrollpunkten in QT-Pfaden
Kurvensegmente mit quadratischem Pfad verbinden

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 Einfluss 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)2P(0) + 2s(1-s)P(1) + s2P(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
d2k(s)/ds2 = 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.

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 eignen 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.

Kubische Kurvenstücke: C, c, S, s[Bearbeiten]

Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando S
Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando s
Fortsetzungen eines kubischen Pfades ohne Knicke, vorne angehängt
Verbindung zweier kubischer Pfade ohne Knicke
'Sonne und Seuche'

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 Einfluss 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)3P(0) + 3s(1-s)2P(1) + 3s2(1-s)P(2) + s3P(3)

Die Ableitungen ergeben sich daraus als:
dk(s)/ds = -3(1 - s)2P(0) + 3(1-4s +3s2)P(1) + 3(2s-3s2)P(2) + 3s2P(3)
oder in der Parametrisierung einer quadratischen Bézierkurve
dk(s)/ds = (1 - s)2 (3P(1) - 3P(0)) + 2s(1-s) (3P(2) - 3P(1)) + s2(3P(3) - 3P(2))
Die zweite Ableitung ist somit
d2k(s)/ds2 = (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.

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.

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, dass 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 dass dadurch immer zwei Pfade mit einem kubischen Pfadsegment ohne Knick miteinander verbunden werden können. 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.

Gilt es, einen längeren Pfad oder Unterpfad so zu schließen, dass 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.

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 auf 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...

Elliptische Bögen: A, a[Bearbeiten]

Pfadkommando A
Pfadkommando 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':

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 rX sind die Hauptachsen der Ellipse und c = (cX, cY) 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))2
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 muss:
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-e2)
rY = p/(1-e2)1/2
Oder
p = rY2/rX
e = (1 - (rY/rX)2 )1/2


In SVG wird die Endpunktnotation verwendet. Um von der Zentraldarstellung in die Endpunktnotation und umgekehrt umzurechnen, dient folgende Betrachtung:

Seien x1,y1 die absoluten Koordinaten der aktuellen Pfadposition und x2,y2 die der Endposition. Seien rX und rY die halbe große und kleine Hauptachse der Ellipse ('Radien'). Sei φ der Winkel von der x-Achse des aktuellen Koordinatensystems zu rX. Sei fA der Parameter für den großen Bogen, 0 falls der Bogen nicht mehr als 180 Grad aufspannt oder 1, wenn der Bogen mehr als 180 Grad aufspannt. Sei fS der Parameter, welcher die Drehrichtung festlegt, 1 für größer werdende Winkel im Drehsinn von SVG und 0 sonst.

Folgende Regeln gelten für kritische Werte:

  • Sind die Endpunkte identisch, wird kein elliptischer Bogen dargestellt.
  • Wenn mindestens eine der Hauptachsen 0 ist, wird der Ellipsenbogen als gerade Linie vom Anfangs- zum Endpunkt angenommen.
  • Es werden die Beträge der angegebenen Hauptachsen verwendet.
  • Wenn es keine Lösung zu den angegebenen Hauptachsen und dem Winkel gibt, so werden die Hauptachsen gleichmäßig hochskaliert, bis es eine Lösung gibt.
  • φ wird Modulo 360 Grad genommen.
  • Haben fS oder fA einen anderen Wert als 0, so wird 1 angenommen.

In der Zentraldarstellung sei s1 der Anfangswinkel und s2 der Endwinkel und ds die Differenz dazwischen.

Umrechnung von der Zentraldarstellung in die Endpunktdarstellung[Bearbeiten]

(x1,y1) = D(φ) (rX cos(s1), rY sin(s1)) + c
(x2,y2) = D(φ) (rX cos(s2), rY sin(s2)) + c

fA ist 1 falls der Betrag von ds größer als 180 Grad ist, sonst 0.
fS ist 1 falls ds größer als 0 ist, sonst 0.

Umrechnung von der Endpunktdarstellung in die Zentraldarstellung[Bearbeiten]

Zunächst werden Hilfsgrößen berechnet.

(x1',y1') = D(-φ) ((x1 - x2)/2,(y1 -y2)/2)

L = x1'2/rX2 + y1'2/ry2

Falls L kleiner oder gleich 1 ist, bleiben rX und rY unkorrigiert, ansonsten werden sie mit der Wurzel aus L multipliziert, damit ein Ellipsenbogen möglich ist.

R = rX2y1'2 - rY2x1'2

(cX',cY') = ± ((rX2rY2 - R) / R ) * (rXy1'/rY , -rYx1'/rX)

Das Vorzeichen ist +, falls fS ungleich fA ist und - sonst.

c = D(-φ) (cX',cY') + ((x1 + x2)/2, (y1 + y2)/2)

Nun fehlt noch der Anfangswinkel und der Differenzwinkel.

Zur Berechnung sollte zunächst bekannt sein, wie ein Winkel zwischen zwei Vektoren berechnet wird. Allgemein ist der Winkel zwischen zwei Vektoren u und v (keiner von beiden 0) gleich ± arccos u*v/(|u||v|), wobei das Vorzeichen das gleiche ist wie das von uXvY - uYvX

s1 ist der Winkel zwischen (1,0) und ((x1' - cX)'/rX, (y1' - cY)'/rY)

ds ist der Winkel zwischen ((x1' - cX)'/rX, (y1' - cY)'/rY) und ((-x1' - cX)'/rX, (-y1' - cY)'/rY) modulo 360 Grad.

Dabei wird s1 auf den Bereich zwischen -360 Grad und 360 Grad begrenzt, so dass falls fS=0, dann ist ds kleiner als 0, sonst größer oder gleich.

Konversion zwischen Bézierkurven[Bearbeiten]

Pfadkonversionen

Eine Konversion von linearen und quadratischen Kurven in kubische Kurven kann 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.

Weglänge[Bearbeiten]

Weglänge einer Kurve abschätzen durch Verwendung von stroke-dasharray als einfachem Maßstab

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):= 0f ds ((dkx/ds)2 + (dky/ds)2)1/2

Bei einem 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))2 + (ky(0)- ky(1))2)1/2

Bei einem 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 dass 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 einfachem Maßstab.
Es sind drei Maßstäbe übereinandergelegt. Um den letzten, hellgelben abzulesen, muss gegebenenfalls das Pfadende rechts unten im Darstellungsprogramm vergrößert werden.

Kurven teilen - Algorithmus nach De Casteljau[Bearbeiten]

Algorithmus nach De Casteljau
Algorithmus nach De Casteljau mit animierter Kurve

Manchmal kann es hilfreich sein, ein Kurvensegment in zwei Teile zu teilen, etwa aufgrund der Einschränkungen, die es bei den Angaben zur Pfadanimation gibt. Dort ist die Anzahl und Folge der Kommandos für jeden Animationsschritt gleich zu wählen, so dass die Anzahl und Art der Pfadsegmente in den einzelnen Animationsschritten aneinander anzupassen sind. Dies kann durchgeführt werden, indem die Anzahl der kubischen Pfadfragmente auf das kleinste gemeinsame Vielfache erweitert wird.

Zudem kann so festgelegt werden, welche Fragmente bei einer Animation ineinander übergehen sollen. Eine solche Aufteilung eines Fragmentes einer Bézierkurve in zwei Fragmente jedenfalls geht recht effektiv und einfach mit dem Algorithmus von De Casteljau.

Dieser Algorithmus wird auch oft verwendet, um Bézierkurven mit einem Programm näherungsweise durch Geraden darzustellen, wobei dann so oft aufgeteilt wird, dass die Länge eines Fragmentes so klein wird, dass der Unterschied zu einer Geraden bei der Darstellung nicht mehr auffällt.

Das Verfahren sei hier für ein kubisches Fragment erläutert.
An der Stelle 0 < s < 1 soll das Fragment aufgeteilt werden.
Anfangspunkt sei P(0) und Endpunkt P(3).
Die Kontrollpunkte seien P(1) und P(2).

Die Notation wird nun um einen Iterationsschritt i erweitert:
P(i,0), P(i,1), P(i,2), P(i,3).
Wobei P(0,j) = P(j) sein soll.

Anschaulich werden die Geraden zwischen zwei aufeinanderfolgenden P im Verhältnis gemäß s aufgeteilt. So entsteht ein neuer Punkt und neue Kontrollpunkte, welche insgesamt und zusammen mit den alten Punkten die neuen Kurvensegmente ergeben.
Nach dem Algorithmus ist, soweit es zu den Indizes Werte gibt:
P(i+1,j) = (1 - s) P(i,j) + s P(i,j+1),
oder ausgeschrieben:
P(1,0) = (1 - s) P(0) + s P(1)
P(1,1) = (1 - s) P(1) + s P(2)
P(1,2) = (1 - s) P(2) + s P(3)
P(2,0) = (1 - s) P(1,0) + s P(1,1)
P(2,1) = (1 - s) P(1,1) + s P(1,2)
P(3,0) = (1 - s) P(2,0) + s P(2,1)

Die beiden neuen kubischen Fragmente sind dann gegeben durch die Punkte:
P(0), P(1,0), P(2,0), P(3,0) für den ersten Teil und
P(3,0), P(2,1), P(1,2), P(3) für den zweiten Teil.

Folgendes zeigt eine Beispielgraphik mit Pfad und asymmetrischer Teilung:
Algorithmus nach De Casteljau

Das Verfahren allein garantiert allerdings nicht, dass die Interpolation im Rahmen einer Animation besonders sinnvoll oder schön ist. Weil die aufgeteilten Fragmente nicht einfach mit dem Kommando S zusammengefügt werden können, werden in der Regel am Trennpunkt innerhalb der Animation Knicke entstehen.

Das sieht anders aus, wenn bei allen Kurven das s gleich gewählt wird, was recht einsichtig ist, weil jede einzelne Kurven ohnehin schon stetig differenzierbar am Trennpunkt ist, bei gleichem s sind dies dann auch die interpolierten Kurven.
Algorithmus nach De Casteljau mit animierter Kurve

Zwar könnte auch eine stetig differenzierbare Fortsetzung am Trennpunkt mit dem Kommando S/s erzwungen werden, was aber den Kurvenverlauf verändert und meistens nicht erwünscht sein wird. Wenn die Aufgabe also darin besteht, mit einer Animation eine bestimmte Kurve in eine bestimmte andere zu verwandeln, wobei während der Animation keine zuvor nicht vorhandenen Knicke entstehen sollen, so sind derartige Feinheiten bei der Zerlegung zu beachten und die Kurvenfragmente jeweils passend zu wählen. Sozusagen ist es durchaus nicht trivial, aus derAbbildung einer Mücke die eines Elefanten zu machen, ohne dabei während der Verwandlung eigenartige Artefakte zu erhalten.


Exkurs Sterne, Blüten und Bézierkurven[Bearbeiten]

Um etwas praktische Erfahrung mit Pfadkommandos zu bekommen, soll auf den 'Exkurs Polygone malen' zurückgegriffen werden, dieser wird Bézierkurven fortgesetzt.

Linienzug mit Unterpfaden

Mit einem polygon-Element oder polyline-Element kann man nur einen Linienzug malen, beim path-Element können eine beliebige Anzahl von offenen und geschlossenen Linienzügen zu einem Pfad kombiniert werden. Dies läßt sich auch gut nutzen, um dekorativere und komplexere sternartige Strukturen zu malen als mit den Grundformen, selbst wenn nur gerade Linien verwendet werden:

Linienzug mit Unterpfaden:
Linienzüge können nicht nur offen oder geschlossen sein, sondern können auch aus Unterpfaden bestehen. Das Objekt hier besteht aus einem Pentagramm und einem komplizierteren Gebilde aus fünf gleichen, offenen Linienzügen, die gegeneinander um das Zentrum gedreht sind. Insgesamt ergibt sich so eine fünfzählige Drehsymmetrie.

Zwischen mehreren dieser Objekte wird in einer einfachen Animation des Pfadattributes d interpoliert.

Die Konstruktion beruht im Wesentlichen auf den Formeln für reguläre Polygone. Bei den offenen Unterpfaden wird lediglich jede dritte Linie des regulären Polygons ausgespart. Dafür werden an die verbleibenden Linienzüge ein paar Linien angehängt, deren Punkte haben einfach einen etwas anderen Radius und Winkel.

Reguläre Sterne mit quadratischen Bézierkurven

Reguläre Sterne mit quadratischen Bézierkurven:
Reguläre Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (1)

Sterne mit quadratischen Bézierkurven (1):
Sterne mit diskreter Drehsymmetrie und mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (2)

Aufgrund des zusätzlichen Punktes ist die Variationsbreite bei quadratischen Kurven natürlich viel größer als bei einfachen Polygonen:
Sterne mit quadratischen Bézierkurven (2):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Kontrollpunkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Krümmungen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (3)

Sterne mit quadratischen Bézierkurven (3):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Kontrollpunkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Punkt wird vom Winkel her mittig zwischen den Kontrollpunkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Punkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Spitzen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert.

Regulärer Stern mit quadratischen Bézierkurven

Auch hier lassen sich natürlich durch Verwendung ähnlicher Unterpfade wieder interessante Effekte erreichen:
Regulärer Stern mit quadratischen Bézierkurven
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Krümmung von außen nach innen immer größer wird. Zudem sind die aufeinanderfolgenden Unterpfade leicht gegeneinander verdreht und haben eine gegenläufige Umlaufrichtung. Dadurch entsteht der Eindruck eines Strudels.

Reguläre Sterne mit kubischen Bézierkurven

Mit kubischen Bézierkurven gibt es durch die zwei Kontrollpunkte natürlich noch deutlich mehr Möglichkeiten. Ausgehen kann man natürlich wieder von der Situation mit größter Symmetrie, wo also die Winkel zwischen Punkten und Kontrollpunkten alle gleich sind:
Reguläre Sterne mit kubischen Bézierkurven
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Reguläre Sterne mit kubischen Bézierkurven (2)

Vertauscht man lediglich die Winkel für zwei benachbarte Kontrollpunkte, gibt es schon wieder deutlich andere Formen:
Reguläre Sterne mit kubischen Bézierkurven (2)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius und in der Reihenfolge vertauscht. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Die Symmetrie bleibt natürlich auch erhalten, wenn man beide Kontrollpunkte um den gleichen Winkel, nur mit anderem Vorzeichen verschiebt.

Reguläre Sterne mit kubischen Bézierkurven (3)

Reguläre Sterne mit kubischen Bézierkurven (3)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius, zwischen einem Punktepaar innerhalb des Punkteradius, zwischen dem benachbarten Punktepaar außerhalb.

Blüten mit kubischen Bézierkurven

Blüten mit kubischen Bézierkurven
Blüten von Pflanzen haben oft eine diskrete Drehsymmetrie. Sechs kubische Bézierkurven in blütenartiger Form sind locker über den Anzeigebereich verteilt. Oft herrschen rundere Formen vor, die in der einfachsten Variante erreicht werden können, wenn man die Radien der Punkte auf 0 setzt und für die Kontrollpunkte unterschiedliche Radien und Winkel wählt, wobei dies mit der gewünschten Symmetrie wiederholt wird. Kleinere Unregelmäßigkeiten würden kleine Symmetriebrüche erzeugen, die alles etwas organischer, natürlicher aussehen ließe.

Sternexplosion

Sternexplosion
Eine unregelmäßige Kombination von kubischen Bézierkurven in Unterpfaden bildet ein komplizierteres Strahlenmuster, als ob ein regulärer Stern explodiert sei.

Knickloser symmetrischer Stern

Knickloser symmetrischer Stern
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind jeweils automatisch mit dem Kommando S bestimmt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Knickloser Stern

Knickloser Stern
Das Objekt besteht aus symmetrischen elfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zweiundzwanzig Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons.

Blüte mit kubischen Bézierkurven

Blüte mit kubischen Bézierkurven
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Blüte mit kubischen Bézierkurven (2)

Blüte mit kubischen Bézierkurven (2)
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die siebenzählige Symmetrie einschließlich Spiegelachsen. Allerdings sind die verschiedenen Kurven um einen festen Winkel gegeneinander versetzt, die gesamte Blüte hat damit keine Spiegelachsen mehr.

Animierter Stern mit kubischen Bézierkurven

Animierter Stern mit kubischen Bézierkurven
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie einschließlich Spiegelachsen für die Einzelkurven. Während der Interpolation ergibt sich natürlich meist eine niedrigere Symmetrie.

Animierter Stern mit kubischen Bézierkurven (2)

Animierter Stern mit kubischen Bézierkurven (2)
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie für die Einzelkurven.


Text als Graphik[Bearbeiten]

Text als Graphik[Bearbeiten]

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ären 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, dass ein Buchstabe durch mehrere Glyphen repräsentiert wird. Daher muss die Anzahl der Buchstaben nicht mit der der darzustellenden Glyphen übereinstimmen. Die Zahl der Glyphen ist allerdings relevant dafür, wo welche Glyphe genau dargestellt wird. 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 dass 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 Einfluss 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. In SVG tiny 1.2 gibt es darüber hinaus neue Elemente für Text.

Element text[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? 2
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.

Leider ermöglicht 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. In der Version 1.1 hat der Autor den Text manuell umzubrechen und die jeweiligen Zeilen zum Beispiel in einzelnen text-Elementen unterzubringen. Es gibt allerdings auch andere, etwas schönere Möglichkeiten.

Attribute x und y[Bearbeiten]

Mit den Attributen x und y wird die Textposition angegeben. Der Wert ist eine Liste von Koordinaten. Im einfachsten Falle wird jeweils exakt eine Koordinaten für den gesamten Text angegeben. Die Attribute sind animierbar. Für ein fehlendes Attribut wird jeweils die Koordinate 0 angenommen.

Wie die Glyphen relativ zur angegebenen Position angeordnet werden, hängt von weiteren Präsentationsattributen ab. Die generelle Idee ist aber, dass bei Glyphen anders als bei den anderen Koordinatensystemen die y-Achse von unten nach oben zeigt. Ohne weitere Angaben ist also die y-Position unten beim Glyphen zu finden.

Zuerst nochmal das einfache Eingangsbeispiel:

   <text x="50" y="80">Hello World</text>

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.

Bei der im deutschsprachigen Raum üblichen Schreibrichtung von links nach rechts ergibt sich bei mehr Glyphen als x-Koordinaten eine automatische Fortsetzung der aktuellen Textposition nach rechts.

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

   <text 
     x="50 60 80 70 90 80 70 60 50 30 20" 
     y="20 30 50 40 60 70 80 90 110 100 130">Hello World</text>

Attribut rotate[Bearbeiten]

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. Das Attribut ist animierbar (nicht additiv) Sofern nicht angegeben, wird 0 angenommen.

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 ungewiss, wie diese die Situation interpretieren. Die aktuelle Interpretation ist, dass der letzte Winkel auf alle überschüssigen Glyphen angewendet wird. Die alte, alternative Interpretation war, dass die überschüssigen Glyphen ungedreht bleiben. Praktisch sollte ein Autor diesen Problemfall also vermeiden.

   <text x="50" y="20" rotate="-10">Hello World</text>
   <text x="50" y="60" 
    rotate="-10 -15 -20 -15 -10 -5 0 5 10 15 20 25">Hello World</text>

Attribute dx und dy[Bearbeiten]

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

Die Attribute sind in SVG tiny nicht verfügbar.

   <text x="50" y="80" 
    dx="0 -2 2 3 3 7 5" 
    dy="0 -5 0 0 5 0 5 0 0 0 -5">Hello World</text>

Attribut textLength[Bearbeiten]

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

Der Wert ist eine Länge. Das Attribut ist animierbar. Voreinstellung ist die vom Darstellungsprogramm berechnete Textlänge.

Das Attribut ist in SVG tiny nicht verfügbar.

Attribut lengthAdjust[Bearbeiten]

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 angepasst, was die Voreinstellung ist. Im Falle von spacingAndGlyphs wird beides gedehnt beziehungsweise komprimiert.

Das Attribut ist animierbar.

Das Attribut ist in SVG tiny nicht verfügbar.

   <text x="50" y="80" 
    font-size="10" 
    textLength="150" 
    lengthAdjust="spacing">Hello World</text>

Beispiel text[Bearbeiten]

SVG-Beispiel text - spezifische Attribute

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

W3C: text

Element tspan[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 2 3.2 4  ?  ? 2

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.

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. Allerdings 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.

Attribute von tspan[Bearbeiten]

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 Präsentationsattribute verwendet werden.

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

Beispiele tspan[Bearbeiten]

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

   <text x="50" y="80" 
    font-size="10" fill="blue">Hello <tspan fill="green">W<tspan fill="red"
    font-size="20">o</tspan>rld</tspan></text>

Mehrzeiliges Beispiel (SVG 1.1)

<text font-size="10"><tspan 
x="50" y="20">Hallo Welt</tspan><tspan 
x="50" y="40">Ja, dies ist eine neue Zeile
<tspan dx="20" dy="20">...und noch eine...</tspan></tspan>
</text>

Einfacher alle Glyphen eines Wortes drehen (SVG 1.1):

<text x="50" y="50" font-size="10"><tspan 
rotate="10">Hallo</tspan> <tspan
rotate="-10">Welt</tspan></text>

Mit den Autorenangaben zur Textlänge in folgendem Beispiel ist es wahrscheinlich, dass '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 Darstellungsprogramm zu keiner plausiblen Darstellung gelangen.

<text x="50" y="50" font-size="10"
textLength="180" lengthAdjust="spacingAndGlyphs">Hallo
<tspan textLength="30"
lengthAdjust="spacingAndGlyphs">Welt</tspan>!!!</text>
tspan - spezifische Attribute
text und tspan - spezifische Attribute in beiden verwendet

Hier kann ausprobiert, 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 muss dann korrekt implementiert sein, welcher Wert gilt. Zudem sollte das Darstellungsprogramm die evenfalls verfügbaren Elemente title und desc natürlich nicht direkt als graphische Textausgabe darstellen, obwohl sie im jeweiligen Element drinstehen.

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

Element tref[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 - - 4  ?  ? -

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.

Attribute von tref[Bearbeiten]

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 tref[Bearbeiten]

SVG-Beispiel tref

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

<svg viewBox="0 0 500 300"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:lang="de"
    font-size="10" font-family="sans-serif">
<title id="title">Hallo! Welt?</title>
<defs>
<text id="text1" xml:lang="la">alea iacta est!</text>
<text id="text2" xml:lang="la">timeo danaos et dona ferentes!</text>
</defs>

<text><tref xlink:href="#title"
x="50" y="50" rotate="-10 -5 0 5 10 15 20 15 10 5 0 -5" />
</text>

<text x="50" y="50" xml:lang="la">
<tref xlink:href="#text1" dy="50" rotate="-15" />
<tref xlink:href="#text2" y="150" rotate="15" />
<tref xlink:href="#text1" y="200" rotate="5" />
<tref xlink:href="#text2" y="250" rotate="-5" />
</text>

</svg>

SVG-Beispiel tref

Element textPath[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 2 3.2 4  ?  ? -
SVG-Beispiel textPath

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

Attribut href von XLink[Bearbeiten]

Mit dem Attribut href von XLink ist der Pfad (siehe entsprechenden Abschnitt zu Pfaden) zu referenzieren, entlang dessen der Text angeordnet werden soll. Der Wert ist also ein Fragmentidentifizierer eines Elementes path.

Ist mehr Text als Pfad vorhanden, wird jedenfalls der überschüssige Text nicht angezeigt.

Attribute textLength und lengthAdjust[Bearbeiten]

Die schon für text angegebenen Attribute textLength und lengthAdjust sind auch für textPath verwendbar.

Attribut startOffset[Bearbeiten]

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 ein Lauftext animiert werden soll), dies ist nicht explizit ausgeschlossen.

Das Attribut ist animierbar.

Attribut method[Bearbeiten]

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'.

Das Attribut ist animierbar.

Attribut spacing[Bearbeiten]

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.

Das Attribut ist animierbar.

Beispiele textPath[Bearbeiten]

<g fill="none" stroke="#ccc">
<path id="Pfad1"
d="M-400,0C-400,-200 -200,-400  0,-400
S400,-200 400,0
200,400 0,400
-400,200 -400,0Z"/>

<path id="Pfad2"
d="M-400,0C-400,200 -200,400  0,400
S400,200 400,0
200,-400 0,-400
-400,-200 -400,0Z"/>

<path id="Pfad3"
d="M-300 -90 300 -90
M-300 -30 300 -30
M-300 30 300 30
M-300 90 300 90" />
</g>

<text font-size="50">
<textPath xlink:href="#Pfad1" id="Text" 
textLength="2450"><tspan dy="-10">Text kann 
entlang eines Pfades angeordnet werden.
Dazu wird das Element textPath
verwendet.</tspan></textPath>

<textPath xlink:href="#Pfad2"><tref xlink:href="#Text" 
textLength="2450" dy="-5" /></textPath>

<textPath xlink:href="#Pfad3" 
textLength="2350">Das Element eignet 
sich allerdings nur sehr eingeschränkt für
automatische Zeilenumbrüche.</textPath>
</text>

SVG-Beispiel textPath

Elemente textArea und tbreak[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 tiny - 9.5 - - -  ?  ? -
'Die Kleinsten' von Wilhelm Busch
SVG mit RDFa: 'Die Kleinsten' von Wilhelm Busch
Beispiel mit automatischem Zeilenumbruch: 'Die Abweisung' von Franz Kafka


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

tbreak ist ein leeres Element ohne spezifische Attribute.

textArea hat einige Attribute, wie folgt erläutert. Es gibt auch einige Eigenschaften, die in SVG tiny 1.2 als Präsentationsattribute zu notieren sind, die spezifisch für textArea sind.

Attribute x und y[Bearbeiten]

Mit den Attributen x und y kann für textArea die linke obere Ecke des Textblockes angegeben werden, die Voreinstellung ist '0'. Der Wert ist jeweils eine Koordinate, x für die x-Postion, y für die y-Position.

Die Attribute sind animierbar.

Attribute width und height[Bearbeiten]

Mittels width und height kann Breite und Höhe angegeben werden, width für die Breite, height für die Höhe. Die Werte sind Längen oder der Wert 'auto'. Bei 'auto' wird die Ausdehnung automatisch berechnet. Die Voreinstellung ist 'auto'. Anders als vielleicht erwartet werden kann, wenn (X)HTML und CSS bereits bekannt sind, bedeutet 'auto' insbesondere 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. Ist insbesondere für height ein Wert angegeben und reicht der Platz für den Text nicht aus, so wird überstehender Text nicht angezeigt (!).

Die Attribute sind animierbar.

Eigenschaft line-increment[Bearbeiten]

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.

Die Eigenschaft ist animierbar.

Eigenschaft text-align[Bearbeiten]

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'.

Die Eigenschaft ist animierbar.

Eigenschaft display-align[Bearbeiten]

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.

Die Eigenschaft ist animierbar.

Beispiele textArea und tbreak[Bearbeiten]

Einfaches Beispiel:

<textArea x="20" y="20" width="260" height="300"
  text-align="center" display-align="center"
  line-increment="auto"
  font-size="10" font-family="sans-serif"
  fill="#026">
<tspan font-size="20"
 fill="#044">Die Kleinsten</tspan>
<tbreak /><tbreak />
<tbreak />Sag Atome, sage Stäubchen.
<tbreak />Sind sie auch unendlich klein,
<tbreak />Haben sie doch ihre Leibchen
<tbreak />Und die Neigung da zu sein.<tbreak />

<tbreak />Haben sie auch keine Köpfchen,
<tbreak />Sind sie doch voll Eigensinn.
<tbreak />Trotzig spricht das Zwerggeschöpfchen:
<tbreak />Ich will sein so wie ich bin.<tbreak />

<tbreak />Suche nur sie zu bezwingen,
<tbreak />Stark und findig wie du bist.
<tbreak />Solch ein Ding hat seine Schwingen,
<tbreak />Seine Kraft und seine List.<tbreak />

<tbreak />Kannst du auch aus ihnen schmieden
<tbreak />Deine Rüstung als Despot,
<tbreak />Schließlich wirst du doch ermüden,
<tbreak />Und dann heißt es: Er ist tot.<tbreak />

<tbreak /><tspan fill="#028"
  font-size="6">Wilhelm Busch</tspan>
</textArea>

SVG-Beispiel: 'Die Kleinsten' von Wilhelm Busch

Es ist leicht zu erkennen, dass 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ässt sich dies jedoch durch die Attribute aus RDFa deutlich verbessern. In diesem Fall kann tspan als Strukturelement verwendet werden und mit dem allgemeinen 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, muss 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


Graphiken formatieren[Bearbeiten]

Einführung: Eigenschaften und Präsentationsattribute[Bearbeiten]

Während in den Kapiteln über Grundformen, Text als Graphik und Pfade vermittelt wurde, mit welchen Elementen und Attributen Objekte angegeben werden können, die dargestellt werden sollen, so geht es in diesem Kapitel darum anzugeben, wie sie dargstellt werden.

Allen graphisch dargestellten Objekten gemeinsam ist das Konzept, dass die von den angegebenen Pfaden aufgespannten Flächen gefüllt werden können und dass die Pfade selbst als Strich endlicher Breite dargestellt werden können. Da es auch offene Pfade gibt, ist der Pfad oder Strich nicht gleichbedeutend mit dem Rand der aufgespannten Fläche, dennoch wird der dargestellte Pfad oft einfach Rand genannt, Strich oder Weg ist eigentlich die präzisere Bezeichnung.

Füllung (englisch: fill) und der Strich oder Weg (englisch: stroke) haben entsprechend einige Eigenschaften, die angegeben werden können. Text als Graphik hat noch einige Eigenschaften, die spezifisch für diese Arten von Pfaden ist. Einige andere Konstruktionen haben auch noch spezielle Eigenschaften.

In den tiny-Profilen können die Eigenschaften nur als sogenannte Präsentationsattribute genauso wie normale Attribute angegeben werden, bei der Vollversion SVG1.1 sollte dies ebenfalls die bevorzugte Methode sein. Das Verhalten von Attributen und Präsentationsattributen ist aber leicht unterschiedlich, etwa können Eigenschaften von Elternelementen geerbt werden.

Die Begriffe 'Eigenschaft' und 'Präsentationsattribut' deuten schon an, dass Eigenschaften dem Konzept von Cascading Style Sheets [CSS] und XSL entstammen.
Entsprechend gibt es im vollen Profil von SVG 1.1 die Möglichkeit, diese Eigenschaften auch wirklich als Stilvorlagen anzugeben. Die kann mit externen Stilvorlagen erfolgen, die mit Stilvorlagenverarbeitungsanweisungen eingebunden werden. Ebenfalls möglich sind auch Angaben im Element style, welches am besten ziemlich zu Beginn des Dokumentes innerhalb des Elementes defs auftreten sollte (aber auch in anderen Elementen wie svg oder g).

Ebenfalls im vollen Profil von SVG 1.1 definiert ist das Attribut style, welches bei nahezu jedem Element angegeben werden kann und welches ebenfalls Angaben zu Eigenschaften in der CSS-Notation enthalten kann. Wie auch bei (X)HTML ist allerdings die Verwendung dieses Attributes aus verschiedenen Gründen zu vermeiden. Zum einen können für das Profil tiny zugeschnittene Darstellungsprogramme den Inhalt nicht interpretieren. Bei anderen Darstellungsprogrammen kann es zum Abbruch der Interpretation von weiteren Eigenschaften kommen, wenn es bei der Interpretation einer Eigenschaft Probleme gibt. Zum anderen haben Angaben im Attribut style eine relativ hohe Spezifität, können also weder vom Autor noch vom Betrachter einfach mit eigenen Angaben überschrieben werden, ohne für jeden einzelnen Fall die Spezifität explizit geeignet hoch anzusetzen. Ein weiteres Problem kann bei der Animation von Präsentationsattributen auftreten, zumindest wenn Animation korrekt im Sinne von SMIL implementiert wurde. Leider gibt es immer noch einige Hilfsprogramme, welche das Attribut style intensiv nutzen. Autoren ist zu empfehlen, diesen Mangel dann manuell zu beheben, nachdem ein Dokument abgespeichert ist.

Insgesamt kann gesagt werden, dass alles in Form von Präsentationsattributen notiert werden sollte, was inhaltlich relevant ist, also dazu beiträgt, den Inhalt des Bildes zu vermitteln. Präsentationsattribute haben eine niedrige Spezifität und können daher leicht mit Angaben im Element style oder in einer externen Stilvorlage überschrieben werden, mit denen dann alternative Ansichten des Dokumentes angeboten werden können.

Eigenschaften zur Füllung[Bearbeiten]

Füllung, fill[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Füllfarben mit SVG
Vergleich fill und PNG-Farbe
Gerade Unterpfade und Flächen
Offene Unterpfade und Füllung

Bei den Beispielen im Kapitel Grundformen wurden von Pfaden aufgespannte Flächen ohne weitere Angaben immer schwarz gefüllt. Nun mag es sein, dass dies für gewisse Anwendungen sehr nützlich ist – hin und wieder sind jedoch auch andere Farben oder Füllungen wünschenswert. Daher kann mit der Eigenschaft fill angegeben werden, wie oder womit eine aufgespannte Fläche gefüllt werden soll.

Die möglichen Werte von fill sind sehr reichhaltig und hängen vom Profil ab.

Folgendes sind die Werte mit Erklärung:

'none'
keine Füllung
'currentColor'
Es wird der Farbwert von der Eigenschaft color übernommen
'inherit'
Es wird der Wert vom Elternelement übernommen (geerbt)
Farbe
Ein Farbwert wie im Folgenden erläutert. Optional kann zusätzlich ein ICC-Farbprofil angegeben werden, wenn es sich nicht um ein tiny-Dokument handelt.
Maldienst
Die URI eines Maldienstes (Farbverlauf, Muster, feste Farbangabe; englisch: paint server), optional gefolgt von einer der anderen Möglichkeiten, falls der Maldienst nicht anwendbar ist. SVG tiny 1.1 hat keine Maldienste, SVG 1.1 zudem keine fest Farbangabe, SVG tiny 1.2 keine Muster. Wie der Maldienst exakt zu notieren ist, wird im entsprechenden Abschnitt erläutert.

Der Initialwert ist 'black' also schwarz und die Füllung wird vererbt. Ist also beim Elternelement ein Wert angegeben, nicht aber beim Kindelement, so gilt beim Kindelement die Angabe vom Elternelement, nicht 'black'.

Als Farbwert sind in den tiny-Profilen nur die numerischen Angaben zulässig und die sechzehn Farbwörter von (X)HTML: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, aqua. SVG tiny 1.2 und das volle Profil SVG 1.1 verfügen ferner über die Systemfarben wie von CSS2 definiert, SVG1.1 als Farbangabe, SVG tiny 1.2 als Maldienst, was in dem Falle auf die gleiche Angabe hinausläuft.

Farbwerte können also in dreierlei Form angegeben werden:

  • als RGB kodiert in der Form rgb(rrr,ggg,bbb) dabei sind rrr,ggg,bbb Farbangaben für die Kanäle rot, grün und blau, Werte jeweils von 0 bis 255. Beziehungsweise rgb(10%,50%,100%), also als Prozentangaben von 0% bis 100%
  • hexadezimal angegeben in der Form #000000 mit jeweils zwei Ziffern von 00 bis ff für wieder jeweils einen Farbkanal oder #000 mit jeweils einer Ziffer zwischen 0 und f für einen Farbkanal, wobei dann die Ziffer vom Darstellungsprogramm gedoppelt werden, um auf den Wert in der langen Darstellung zu kommen, #abc entspricht also #aabbcc.
  • mit dem Namen der Farbe (vgl. CSS), nicht in allen Profilen komplett verfügbar, daher sind andere als die oben genannten Farbwörter eher zu vermeiden.

fill ist animierbar, wobei kontinuierliche Animation nur möglich ist, wenn einem Wert eine numerische Farbangabe zugeordnet werden kann, was insbesondere nicht bei 'none' oder einem Maldienst wie einem Farbverlauf oder einem Muster zutrifft. Aufgrund der Komplexität der möglichen Werte liegen häufig Implementierungsmängel vor, wenn in einer Animation eine bunte Mischung von Farbangaben und nicht interpolierbaren Werten vorgegeben wird. Autoren ist dann dringend zu empfehlen, explizit anzugeben, dass eine diskrete Animation durchgeführt werden soll, statt sich darauf zu verlassen, dass das Darstellungsprogramm dies selbst herausbekommt, wie es laut Spezifikation vorgesehen ist, wenn der Autor keine Angaben macht.

Zur Verdeutlichung der Verwendung von fill mit Farbwerten ein kleines Beispiel:

   <rect x="0" y="0" width="80" height="10" rx="6" ry="10" fill="rgb(255,0,0)" />
   <rect x="0" y="0" width="13" height="60" rx="10" ry="7.5" fill="red"/>
   <circle cx="0" cy="0" r="20" fill="#C00000"/>

Beispiel: Vergleich fill und PNG-Farbe.
Die Füllfarbe von Pfaden wird verglichen mit der gleichen Farbe in eingebetteten PNGs. Die PNGs sind links oben über den Pfaden angeordnet - es handelt sich um Quadrate. Sofern ein Farbunterschied zwischen einem Quadrat und der darunterliegenden Form sichtbar wird, werden die Farbangaben im PNG und in der Eigenschaft fill der Pfade unterschiedlich interpretiert, was auf einen Implementierungsfehler hinweist.

Beispiel: Gerade Unterpfade und Flächen.
Gerade Pfadsegmente spannen allein keine Fläche auf. Auch mehrere Unterpfade, die nur aus geraden Pfadsegmenten bestehen, spannen keine Fläche auf, die zu füllen wäre.

Anders hingegen, wenn die geraden Pfadsegmente miteinander verbunden werden. Sofern das Resultat nicht wieder nur ein gerader Pfad ist, kann eine Fläche aufgespannt werden, die gefüllt werden kann.

Im konkreten Beispiel gibt es zwei Pfade. Der außenliegende besteht aus vier geraden Unterpfaden, die ein Quadrat aufzuspannen scheinen. Da die Unterpfade aber selbst keine Flächen aufspannen, ergibt sich auch keine Füllung, die ansonsten rot wäre.

Beim inneren Pfad sind einige gerade Pfadsegmente zu einem Pfad verbunden. Dieser Pfad ergibt einige füllbare Flächen, die hier mit einer gelben Füllung versehen sind. Zwei weitere gerade, unverbundene Unterpfade, die ein mittiges Kreuz bilden, spannen keine neuen Flächen auf und ändern nichts an der Füllung.

Beispiel: Offene Unterpfade und Füllung.
Zur Füllung werden offene Unterpfade immer so geschlossen, also ob der Endpunkt mit dem Anfangspunkt verbunden wäre.

Ein Pfad mit mehreren gekrümmten Unterpfaden kann auch füllbare Flächen aufspannen, die sich gegenseitig überlagern können, so dass sich ein interessanter Wechsel von Innen und Außen ergeben kann.

Der hier blau dargestellte Pfad besteht aus mehreren offenen Unterpfaden, die sich gegenseitig überschneiden und so ein etwas komplizierteres Muster von Innen (orange) und Außen (gelb-weiß) produzieren.

Füllregel, fill-rule[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? ja
Beispiele zur Eigenschaft fill-rule
Beispiel Klothoide - nicht geschlossener Pfad und fill-rule

SVG hat also ein Konzept von Innen und Außen für Formen.

Überschneidet sich ein Pfad selbst, ist die Interpretation von Innen und Außen nicht mehr eindeutig. Mit der Eigenschaft fill-rule kann das Verhalten festgelegt werden.

Mögliche Werte sind 'nonzero', 'evenodd' und 'inherit'. Der Initialwert ist 'nonzero', die Eigenschaft wird vererbt und ist ferner animierbar.


Umschließt zum Beispiel ein Unterpfad alle anderen und ist die Umlaufrichtung gegensinnig, entsteht durch einen inneren Pfad ein Loch. Ist die Umlaufrichtung gleichsinnig, passiert dies nur mit fill-rule="evenodd".
Im anderen Falle für fill-rule="nonzero". kann es also passieren, dass bei gleichsinnigen Umflaufrichtungen sich überschneidender oder ineinanderliegender Unterpfade der Strich auch innerhalb der Fläche auftritt, was bei fill-rule="evenodd" nicht passieren wird, wenn alle Unterpfade Flächen aufspannen. Da ist der Strich immer am Rand zwischen Innen und Außen. Bei "evenodd" wechseln sich Innen und Außen bei jedem Rand ab.


Beispiele zur Eigenschaft fill-rule
In dem interaktiven Beispiel kann die Füllregel für jede Form gewechselt werden. Sollte das aktuell verwendete Darstellungsprogramm hinsichtlich Animation noch eine Implementierungslücke haben, sind jeweils zwei Formen mit evenodd und zwei mit nonzero als Startwert angegeben.

Bei einer nicht geschlossenen Form ist nicht immer ganz intuitiv einzusehen, was innen und außen ist.
Beispiel Klothoide - nicht geschlossener Pfad und fill-rule
Anfang und Ende des Pfades werden miteinander verbunden, dann wird anhand von fill-rule bestimmt, was innen und was außen ist. In diesem Fall ist außen violett und innen gelb. Der eigentliche Pfad ist rot und teiltransparent.


Die präzise Bestimmung des Verhaltens für fill-rule:

  • Bei offenen Pfadsegmenten werden diese für die Zählung mit einer geraden Verbindung vom Ende zum Anfang geschlossen.
  • Für jeden Punkt wird bestimmt, ob er innen oder außen liegt, indem ein Strahl betrachtet wird, der im Unendlichen beginnt und am betrachteten Punkt endet.
  • Um Komplikationen zu vermeiden, ist dabei der Strahl jeweils so zu wählen, dass er keine Tangente zu einem Pfadsegment darstellt, also immer eindeutig eine Kreuzung vorliegt, nicht nur ein Tangieren.

'nonzero':
Es werden die Schnittpunkte des Strahles mit dem Pfad gezählt, angefangen mit null im Unendlichen. Jedes Mal wenn ein Pfadsegment von links nach rechts den Strahl kreuzt, wird der Zähler um eins erhöht. Wenn ein Pfadsegment von rechts nach links den Strahl kreuzt, wird der Zähler um eins erniedrigt. Ist das Endergebnis null, ist der Punkt außerhalb, sonst innerhalb.

'evenodd':
Es wird die Anzahl der Kreuzungen des Strahles mit Pfadsegmenten gezählt. Ist die Zahl der Kreuzungen ungerade, liegt der Punkt innerhalb, sonst außerhalb.


Füll-Opazität, fill-opacity[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? ja
Beispiel zur Eigenschaft fill-opacity
Test zur Eigenschaft fill-opacity

Graphische Objekte können auch teilweise durchsichtig gefüllt sein, dazu dient die Eigenschaft fill-opacity mit Werten zwischen 0 und 1. 0 steht für ganz durchsichtig.
Andere Werte außerhalb des Intervalls [0;1] werden zum nächstgelegenen zulässigen Wert gerundet.

Der Initialwert ist 1, also undurchsichtig, die Eigenschaft wird vererbt und ist animierbar.

fill-opacity ist in SVG tiny 1.1 nicht verfügbar.

Die resultierende Farbe von mehreren teildurchsichtigen Elementen kann recht einfach aus den jeweils angegebenen Werten für fill-opacity berechnet werden. Ist u die unterliegende Farbe und a die aktuelle Farbe des darüberliegenden Elementes, und t dessen Wert von fill-opacity, so ist die neue Farbe n = (1-t)u + ta.


Beispiel zur Eigenschaft fill-opacity
Zwei Scharen von Ellipsen, gedreht, mit variierter Füll-Opazität.

Test zur Eigenschaft fill-opacity
fill-opacity wird getestet, indem mehrere Formen übereinandergelegt werden, von denen einige teiltransparent sind. Diese Stapel werden mit einer teils offenen Form mit weißem Strich in ihrer Mitte verglichen, welche die gleiche Farbe hat wie die resultierende des Stapels.

Eigenschaften zum Strich oder Weg[Bearbeiten]

Der Strich, die Darstellung eines Pfades, erfolgt mittig zum Pfad, gegebenenfalls also zur Hälfte auf der Füllung, zur anderen Hälfe außerhalb des Objektes.
SVG1.1 und SVG tiny 1.2 sehen keine direkten Möglichkeiten vor, um die Position des Striches relativ zum Pfad zu verschieben, ihn etwa nur innerhalb oder außerhalb der Füllung darzustellen. Dies ist für die Vollversion von SVG 2 in Vorbereitung, kann derzeit allenfalls mit einigen Tricks auf Umwegen erreicht werden.

Strichfüllung, stroke[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Zwei Scharen von Kurven werden mit unterschiedlichen Strichfarben gemalt

Neben der Farbangabe für die Füllung kann auch angegeben werden, ob und wie der Strich oder Weg gemalt, beziehungsweise gefüllt werden soll. Dazu dient die Eigenschaft stroke.

Die möglichen Werte sind die gleichen wie für fill.

Weil allerdings der Initialwert 'none' ist, wird der Strich ohne explizite Angabe nicht dargestellt.
Die Eigenschaft wird vererbt und ist animierbar - mit der gleichen Problematik, wie bereits für fill erläutert.

Beispiel: Zwei Scharen von Kurven werden mit unterschiedlichen Strichfarben gemalt

Strichstärken, stroke-width[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Strichstärke und -farbe mit SVG

Auch die Strichstärke kann angegeben werden - sozusagen die Pinselstärke, mit der ein Pfad gezeichnet wird. Dazu dient die Eigenschaft stroke-width.
In SVG 1.1 und tiny 1.2 ist die Strichstärke für einen Pfad immer gleich. Für die Vollversion 2 gibt es Planungen und Ideen, die Strichstärke über den Verlauf des Pfades zu ändern. In SVG 1.1 kann dies nur indirekt erreicht werden, indem aus den Rändern eines solchen Striches selbst (gefüllte) Pfade erzeugt werden.


Mögliche Werte von stroke-width sind Längen und 'inherit' (vererbt).
Der Initialwert ist 1, die Eigenschaft wird vererbt und ist animierbar.

In folgendem Beispiel hat das obere Rechteck mit einem orangefarbenen Strich (oder in dem Falle auch Rand oder Rahmen, weil ein Rechteck geschlossen ist) der Strichstärke 15. Das untere Rechteck ist mit einem olivfarbenen Rahmen versehen mit der Strichstärke 30. Der Kreis mit goldenem Rand hat schließlich eine Strichstärke von 19.5. Da spezielle Farbwörter verwendet wurden, handelt es sich um ein Dokument in der Vollversion von SVG 1.1.

   <rect x="0" y="0" width="800" height="100" rx="60" ry="100" 
         fill="rgb(73,10,61)" stroke="DarkOrange" stroke-width="15"/>
   <rect x="0" y="0" width="103" height="600" rx="100" ry="75" 
         fill="#490A3D" stroke="Olive" stroke-width="30"/>
   <circle cx="0" cy="0" r="200" 
         fill="MediumVioletRed" stroke="Gold" stroke-width="19.5"/>

Weitere Beispiele:

Eine Schar von Kurven mit abgerundeten Enden wird mit unterschiedlichen Strichfarben gemalt
Kreise und große Strichstärke


Eine Schar von Kurven mit abgerundeten Enden wird mit unterschiedlichen Strichfarben gemalt..
Durch gleichzeitige Verkürzung der Kurve und Änderung der Farbe entsteht ein stufiger Farbverlauf, der nicht so einfach mit Farbverläufen in SVG zu erreichen ist.


Kreise und große Strichstärke.
Solange die Objekte viel größer sind als die Strichstärke, stellt die Darstellung kein praktisches Problem dar.

Überdeckt der Strich mehr als den halben Durchmesser eine Objektes, so kommt es zu einer nicht lokalen Überschneidung der Striche. Dies bedeutet, dass in dem Bereich nichts mehr von der Füllung übrigbleibt.

Einige Darstellungsprogramme haben damit verschiedene Probleme.

Hier werden einige Kreise mit solch breiten Strichstärken entlang einer logarithmischen Spirale angeordnet. Die Kreise haben eine grüne Füllung einen blauen Strich. Werden dahinter angeordnete rote Kreise sichtbar, ist die Implementierung fehlerhaft, ebenso, wenn etwas vom gelben Hintergrund innerhalb eines Kreises sichtbar wird oder die Kreise gar nicht als Kreise erscheinen.

Strich-Opazität, stroke-opacity[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Beispiel zur Verwendung von stroke-opacity

Pfade können auch teilweise durchsichtig gemalt sein, dazu dient die Eigenschaft stroke-opacity mit Werten zwischen 0 und 1. 0 steht für ganz durchsichtig. Andere Werte außerhalb des Intervalls [0;1] werden zum nächstgelegenen zulässigen Wert gerundet.

Der Initialwert ist 1, also undurchsichtig, die Eigenschaft wird vererbt und ist animierbar.

stroke-opacity ist in SVG tiny 1.1 nicht verfügbar.


Beispiel zur Verwendung von stroke-opacity.
Zwei Pfade mit vierzähliger Drehsymmetrie und Spiegelsymmetrie werden referenziert und jeweils einmal gefüllt und dann mehrmals ohne Füllung, aber mit teiltransparentem Strich mit schmaler werdender Linienbreite übereinandergelegt. So entsteht der Eindruck eines Farbverlaufes senkrecht zu Strich. (Man beachte auch, dass die Eigenschaft stroke-opacity selbst nur einmal im Element svg angegeben ist und von dort aus vererbt wird.)

Strichenden, stroke-linecap[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Beispiel zur Verwendung von stroke-linecap

Mit der Eigenschaft stroke-linecap wird festgelegt, wie die Strich- oder Pfadenden von offenen Pfaden oder Unterpfaden darzustellen sind.

Mögliche Werte sind:

inherit
geerbt
round
Halbkreis als Kappe
square
halbes Quadrat als Kappe
butt
keine Kappe

Etwas ausführlicher:

Bei round werden die Pfadenden mit runden Kappen versehen, deren Durchmesser der Strichstärke entspricht.

Bei butt wird keine Kappe an den Pfadenden angefügt.

Bei square werden halbe Quadrate mit der Kantenlänge entsprechend der Strichstärke an den Enden angefügt.

Beim Wert inherit erfolgt eine Vererbung vom Elternelement.

Der Initialwert ist 'butt', die Eigenschaft wird vererbt und ist animierbar.


Beispiel zur Verwendung von stroke-linecap.

Strichecken, stroke-linejoin[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Beispiel und Test zu stroke-linejoin

Dort, wo Pfadesegmente so zusammentreffen, dass Knicke oder Ecken entstehen, kann mit der Eigenschaft stroke-linejoin festgelegt werden, wie dies dargestellt werden soll.
Der Wortlaut der Spezifikation impliziert, dass dies auch anwendbar ist, wenn ein Kurvensegment selbst eine Ecke aufweist, was prinzipiell bei einem kubischen Pfadsegment nicht ausgeschlossen ist (ohne es nachgerechnet zu haben, liegt die Vermutung nahe, dass bei einer solchen Ecke der Winkel zwischen den Tangenten immer 0 Grad ist).

Folgende Werte sind möglich:

inherit
geerbt
round
Ecke auf der spitzen Seite abgerundet
miter
Bis zum Schnittpunkt der Tangenten wird der Strich verlängert, die Ecke läuft also spitz zu, eine Gehrung entlang der Winkelhalbierenden der Tangenten der beiden zusammentreffenden Kurvensegmente.
bevel
Statt einer Spitze wie bei miter wird die Ecke mit einer stumpfen Kante beendet, welche senkrecht zur Winkelhalbierenden der Tangenten der beiden zusammentreffenden Kurvensegmente steht.

Initialwert ist 'miter', die Eigenschaft wird vererbt und ist animierbar.

In den Spezifikationen ist lediglich eine Abbildung angegeben, so dass keine weiteren Details schriftlich nachzulesen sind. Immerhin sind die Implementierungen trotzdem einheitlich.
Durch detaillierte Experimente und Nachforschungen ergibt sich jedoch folgendes:
Bei der inneren Ecke laufen die Kanten der Striche immer spitz zusammen, das Verhalten bei der äußeren Ecke hängt vom Wert von stroke-linejoin ab.

  • round - die Ecke wird abgerundet. Der Radius der Rundung ist die halbe Linienstärke.
  • miter - sofern stroke-miterlimit groß genug ist, laufen die Kanten zu einer Spitze zusammen.
  • bevel - die Ecke wird abgestumpft, dazu werden die Kanten bis zum Segmentende ausgeführt und die äußeren Kanten werden dann durch einer gerade Kante miteinander verbunden. Diese Verbindungslinie ist dann senkrecht zur Winkelhalbierenden.

Beispiel und Test zu stroke-linejoin.
Bei diesen Beispielen wird die konkrete Form des Striches mit einer Kombination von gefüllten Pfaden und Basisformen nachempfunden. Dabei liegt einmal die Nachempfindung oben und einmal der Strich. Die untere rote Version wird daher immer komplett von der oberen blauen Form verdeckt. Wird etwas Rotes sichtbar, liegt ein Implementierungsfehler vor.

Strich-Gehrungsbegrenzung, stroke-miterlimit[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 3.5 3.2 -  ?  ?  ?
Einfache Beispiele - einige Dreiecke mit verschiedenen Werten
Test von Implementierungen anhand kritischer Fälle

Bei sehr spitzen Winkeln entsteht bei stroke-linejoin 'miter' das Problem, dass die Ecken sehr lang werden, dies wird mit der Eigenschaft stroke-miterlimit eingegrenzt. Der Wert ist eine Zahl größer oder gleich 1 oder 'inherit'. Wenn eine Ecke so spitz wird, dass das stroke-miterlimit überschritten wird, wird auf den Typ 'bevel' gewechselt.
Die Eigenschaft wird vererbt und ist animierbar. Der Initialwert ist 4.
Werte kleiner als 1 führen in SVG tiny 1.2 dazu, dass der angegebene Wert ignoriert wird, effektiv also der ererbte Wert, beziehungsweise wenn es den nicht gibt der Initialwert gilt. In SVG 1.1 stellt ein Wert kleiner als 1 einen Fehler dar, der zum Abbruch der Darstellung des Dokumentes führen sollte (manche Programme ignorieren diese Implementierungsregel, ein Autor kann sich also nicht darauf verlassen, dass solch ein Fehler unmittelbar sichtbar wird).

Ist m die Länge der Spitze vom äußersten Punkt der Ecke bis zur inneren Ecke, so ergibt sich mittels
'miter' = m / stroke-width = 1/sin(θ/2)
ein direkter Zusammenhang zwischen der Länge der Spitze, der Strichstärke, und dem Winkel θ, unter dem die Tangenten der Ecke aufeinanderzulaufen. Bei dem so ermittelten Wert 'miter' wird die Ecke noch spitz dargestellt, wenn dieser Wert nicht größer als stroke-miterlimit ist.


Einfache Beispiele - einige Dreiecke mit verschiedenen Werten.
In den desc-Elementen stehen nähere Beschreibungen, was wie berechnet wurde. Je nach Winkel und stroke-miterlimit sind einige Ecken abgeflacht oder nicht. Insgesamt ist jeweils ein Dreieck zu sehen mit keiner, einer, zwei oder drei spitzen Ecken.

Test von Implementierungen anhand kritischer Fälle.
Beispiele zum Testen vom Implementierungen. Es ist jeweils ein Vergleichspfad angegeben. Das Resultat ist dabei immer, dass der blaue Pfad den roten komplett verdeckt. Rot weist auf einen Implementierungsfehler hin.

Einige Implementierungsprobleme, die auf schlechter Rundungsgenauigkeit beruhen, kann ein Autor natürlich leicht umgehen, indem entweder stroke-linejoin gleich auf bevel besetzt wird oder aber stroke-miterlimit deutlich größer gewählt wird als für die konkrete Form erforderlich ist. Einigen Problemen können Autoren nicht ohne weiteres entgehen, viele davon treten aber in der Praxis eher selten auf.

Strichmuster, stroke-dasharray[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? ja
Beispiel stroke-dasharray
Beispiel (2) stroke-dasharray

Mittels stroke-dasharray kann ein Pfad auch recht flexibel gestrichelt werden (grobe Übersetzung: Strich-Strichelaufstellung oder Wegstrichelanordnung). Die Spezifikation selbst nennt es ein Muster von Strichen und Aussparungen. Abwechselnd wird also ein Stück des Striches dargestellt, dann ein Stück ausgepart. Obgleich das recht eindeutig formuliert ist, wird dies zumeist allerdings anders implementiert, wobei die dargestellten Teile wie Unterpfade dargestellt werden, auf die auch stroke-linecap angewendet wird. Das gibt zwar die Spezifikation der Eigenschaft nicht her, ist aber mehr oder weniger einheitlich so implementiert (und ist daher als durchgehend falsch anzusehen, kann sogar dazu führen, dass im Falle von stroke-linecap square Teile des Musters aus der Strichbreite herausragen, dies also keinesfalls mehr ein Muster des Striches ist).
Auch Wechselwirkungen mit anderen Eigenschaften zum Strich lassen sich zwar teilweise indirekt erschließen, sind aber nicht explizit formuliert. Daher stellt SVG tiny 1.2 explizit klar, dass dies Verhalten noch nicht eindeutig definiert ist und Autoren sich nicht darauf verlassen sollten. Problematisch sind insbesondere die Wechselwirkungen mit stroke-linecap vom Typ round oder square, die Wechselwirkung mit stroke-linejoin und was genau passiert, wenn mehrere Unterpfade vorliegen. Recht unproblematisch ist das Verhalten bei einfachen Pfaden ohne Knicke und Ecken und mit stroke-linecap 'butt'.

Mögliche Werte sind:

inherit
geerbt
none
kein Gestrichel, also Strich komplett durchgezogen
Liste von Längen
Ergibt ein Strichmuster wie angegeben

Die Listenwerte sind in SVG 1.1 jeweils mit einem Komma zu separieren (optional zusätzlicher Leerraum). Bei SVG tiny 1.2 ist auch eine Separation nur mit Leeraum erlaubt.

Ein Wert wie "90,10,50,20" bedeutet also, erst ein Strich der Länge 90, dann eine Aussparung der Länge 10, dann ein Strich der Länge 50, dann eine Aussparung von 20, dann wiederholt sich die Abfolge mit einem Strich der Länge 90 und so weiter. Bei einer ungeraden Anzahl von Listeneinträgen wird die Liste verdoppelt. "50" bedeutet also das gleiche wie "50,50", also abwechselnd ein Strich der Länge 50 und eine Aussparung der Länge 50. Analog: "1,2,3" entspricht "1,2,3,1,2,3". Negative Längen sind in SVG1.1 ein Fehler (Abbruch der Darstellung des Dokumentes). In SVG tiny 1.2 bewirkt dies effektiv nur, dass die Eigenschaft für das Element nicht interpretiert wird, der Strich also durchgezogen wird. Ist hingegen die Summe aller Längen 0, so ist dies gleichbedeutend mit 'none'.

Der Initialwert ist 'none', die Eigenschaft wird vererbt und ist auch animierbar (allerdings nicht additiv; calcMode paced ergibt ebenfalls keinen Sinn).


Beispiel stroke-dasharray
Ein referenzierter Pfad wird mehrmals mit verschiedener Dicke und anderem Muster übereinandergemalt, um eine interessantere Strukturierung des Strichmusters zu erzeugen. Die Verschiebung der kleineres Strichel lässt sich dann auch noch eleganter mit der Eigenschaft stroke-dashoffset lösen. Relevant für den gewünschten Effekt ist zum einen, dass bei allen Pfaden die Summe aus Strichel und Aussparung gleich bleibt und zu anderen bei den kleineren Pfaden mit einer geeignet großen Aussparung begonnen wird, um die Strichel der verschiedenen Pfade relativ zueinander zu zentrieren oder geeignet relativ zueinander zu verschieben.


Beispiel (2) stroke-dasharray
Mittels stroke-dasharray wird ermittelt, wo begonnen wird, einen Pfad zu zeichnen. Dies ist in den Spezifikationen genau angegeben. Daher kann diese Datei verwendet werden, um zu testen, ob alles richtig implementiert ist.

Liegt das dunkelblaue stroke-dasharray nicht unter dem jeweiligen orangen Teil, liegt ein Fehler vor. Beginnt das Strichmuster nicht exakt mit dem dünnen orangen Strich, liegt ebenfalls ein Fehler vor.

Strichmusterversatz, stroke-dashoffset[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 -  ?  ? ja
Beispiel stroke-dashoffset
Beispiel (2) stroke-dashoffset

Mit der Eigenschaft stroke-dashoffset kann die Anfangsposition des Strichmusters relativ zum Anfang des Pfades verschoben werden.
Der Wert ist inherit oder eine Länge.
Der Initialwert ist 0, die Eigenschaft wird vererbt und ist animierbar.

Für stroke-dasharray="100,50" und stroke-dashoffset="10" bedeutet dies, dass der erste Strich die Länge 100-10=90 hat. Bei stroke-dashoffset="100" beginnt die Darstellung mit einer Aussparung der Länge 50.
Negative Werte sind auch erlaubt, da es sich um ein periodisches Muster ohne Anfang und Ende handelt. stroke-dashoffset="-10" bedeutet dann in diesem Falle, dass die Darstellung mit einer Aussparung der Länge 10 beginnt. stroke-dashoffset="-100" beginnt mit einem Strich der Länge 50, weil die Aussparung nur 50 lang ist.


Beispiel stroke-dashoffset.
Ein ähnliches Beispiel wie zuvor für stroke-dasharray, nur wird hier die die Zentrierung der Strichel relativ zueinander mit 'stroke-dashoffset statt mit einer komplizierteren Abfolge von Werten in stroke-dasharray erreicht, was etwas einfacher und eleganter ist. Testweise mag der geneigte Leser auch einmal die jeweiligen Werte für stroke-dashoffset so verändern, dass statt einer Zentrierung eine leichte Asymmetrie des Musters entsteht.

Beispiel (2) stroke-dashoffset.
stroke-dashoffset wird für verschiedene Werte getestet. Dazu werden die Muster für verschiedene Linien mit Pfaden vergleichen, die entsprechende Unterpfade aufweisen.

Eine Lage Vergleichspfade liegt in rot unter dem Muster, eine Lage dünne gelbe Pfade darüber.

Wird etwas Rotes sichtbar, weist dies auf einen Implementierungsfehler hin, ebenso, wenn die dunkelblauen Muster nicht immer exakt unter den gelben Markierungen liegen.

Vektoreffekt, vector-effect[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 - 9.5 - - -  ?  ? -
Beispiel vector-effect

Mit SVG tiny 1.2 wurde die Eigenschaft vector-effect eingeführt, die demzufolge in SVG 1.1 noch nicht verfügbar ist. Für SVG tiny 1.2 ist auch nur ein Effekt definiert. Weitere sind für zukünftige Versionen von SVG in Vorbereitung.

Mögliche Werte sind:

inherit
geerbt
none
kein Vektoreffekt, Verhalten wie in SVG 1.1
non-scaling-stroke
Angaben zur Strichstärke werden nicht mittransformiert, was zur Folge hat, dass die Strichstärke immer gleich bleibt, auch bei Vergrößerung des Bildes oder bei Verwendung des Attributes transform, welches dann zwar noch die Pfaddaten transformiert, nicht aber die Strichstärke, auch Scherungen oder unterschiedliche Skalierungen verzerren die Strichstärke nicht, wie dies im Falle des Wertes 'none' passiert. Die Angabe der Strichbreite bezieht sich also auf das Ausgabekoordinatensystem, nicht auf das lokale Koordinatensystem.

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel vector-effect
Die Eigenschaft vector-effect wird mit dem Wert 'inherit' auf einen Pfad angewendet. Dieser wird einige Male referenziert und dann transformiert. Diese Kopien haben ebenfalls vector-effect gesetzt, entweder auf 'non-scaling-stroke' (magenta Strich) oder 'none' (gelber Strich). stroke-width ist auf 5 gesetzt. Dies ist unabhängig von den Transformationen, wenn 'non-scaling-stroke' vorliegt. Daher haben jene Pfade mit magenta Strich alle die gleiche Strichbreite, die von denen mit gelbem Strich variieren. Zudem ändert sich die Strichbreite der Pfade mit magenta Strich nicht, wenn das Dokument vergrößert oder verkleinert wird.

Eigenschaften des Anzeigebereiches[Bearbeiten]

Ein häufig auftretendes Problem in SVG 1.1 liegt vor, wenn der an sich transparente Anzeigebereich eines Dokumentes eigentlich eine definierte Farbe bekommen soll. Die Lösung besteht in der Praxis meist darin, ein Rechteck ziemlich zu Beginn des Dokumentes einzufügen, welches die passende Füllung hat und deutlich größer ist als der typisch zu erwartende Anzeigebereich des Darstellungsprogrammes.

Mit SVG tiny 1.2 werden neue Eigenschaften eingeführt, mit denen dies Problem elegant gelöst werden kann. In SVG 1.1 stehen diese Eigenschaften noch nicht zur Verfügung.

Die Eigenschaften sind anwendbar auf alle Elemente, die einen (neuen) Anzeigebereich erzeugen. Dies sind in SVG tiny 1.2 die Elemente svg, animation, image, video und foreignObject.


Füllung des Anzeigebereiches, viewport-fill[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 - 9.5 - - -  ?  ? -
Beispiel viewport-fill

Mittels viewport-fill kann der Anzeigebereich mit einer Farbe gefüllt werden.

Mögliche Werte sind:

inherit
geerbt
none
keine Füllung wie in SVG 1.1
currentColor
die aktuelle, mit der Eigenschaft color festgelegte Farbe
Farbe
Farbangaben wie für fill beschrieben

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel viewport-fill
Der Anzeigebereich wird mittels viewport-fill hellblau gefüllt. Der Anzeigebereich wird mit einem Rechteck mit schwarzem Strich angedeutet. Der eigentliche Inhalt ist ein gelbes Rechteck, welches bei den gängigen Seitenverhältnissen von Anzeigebereichen von Darstellungsprogrammen zum großen Teil außerhalb des Anzeigebereiches des Dokumentes liegen wird. Weil aber das Seitenverhältnis des Anzeigebereiches des Dokumentes zu erhalten ist, wird so im Anzeigebereich des Darstellungsprogrammes auch etwas dargestellt, was nicht mehr im Anzeigebereich des Dokumentes liegt. In solch einem Falle wird auch der zusätzlich angezeigte Bereich mittels viewport-fill mit einer Füllung versehen. Das liegt bei diesem Dokument an dem doch sehr ungewöhnlichen Seitenverhältnis und daran, dass die nicht explizit gesetzten Höhe und Breite jeweils einem Wert von 100% entsprechen, also dem gesamten Anzeigebereich des Darstellungsprogrammes, wenn das Dokument sonst nirgends eingebettet wird.

Füll-Opazität des Anzeigebereiches, viewport-fill-opacity[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.2 - 9.5 - - -  ?  ? -
Beispiel viewport-fill-opacity

Der Abzeigebereich kann auch teildurchsichtig gefüllt werden, dazu dient die Eigenschaft viewport-fill-opacity.

Mögliche Werte sind:

inherit
geerbt
Zahl
Zahl aus dem Intervall 0 bis 1 einschließlich dieser Werte. Zahlen außerhalb dieses Intervalles werden auf den nächstgelegenen korrekten Wert verändert.

Der Initialwert ist '1', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel viewport-fill-opacity
Der Anzeigebereich wird mittels viewport-fill hellblau gefüllt und durch einen Wert von 0.3 für viewport-fill-opacity teilweise durchsichtig.

Die konkrete Farbwirkung hängt also davon ab, welcher Hintergrund im Darstellungsprogramm für den Anzeigebereich verwendet wird. Dies hängt davon ab, ob das Dokument in ein anderes eingebettet ist oder falls nicht, welche Hintergrundfarbe am Darstellungsprogramm als Voreinstellung eingestellt ist. Bei den meisten kann dies vom Nutzer eingestellt werden.

Der Anzeigebereich wird mit einem Rechteck mit schwarzem Strich angedeutet. Der eigentliche Inhalt ist ein gelbes Rechteck, siehe Beispiel zu viewport-fill.

Eigenschaft zur Farbangabe[Bearbeiten]

Farbe, color[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 3.5 3.2 4  ?  ?  ?
SVG-Beispiel color und currentColor

Mit der Eigenschaft color kann die aktuelle Farbe angegeben werden. Dies kann dann als Farbangabe mittels des Farbwertes 'currentColor' verwendet werden.


Mögliche Werte sind:

inherit
geerbt
Farbe
Farbwert, wie bereits für fill erläutert

Der Initialwert ist vom Darstellungsprogramm abhängig, das ist dann also sofern vom Autor nicht anders gesetzt, die vom Nutzer des Darstellungsprogrammes als bevorzugt eingestellte Farbe oder eben die vom Darstellungsprogramm voreingestellte Farbe, wenn der Nutzer diese nicht verändert hat.
Dei Eigenschaft wird vererbt und ist animierbar. Bei einer Animation dieser Eigenschaft bedeutet das insbesonderen, dass der Wert für 'currentColor' sich entsprechend der Änderung von color verändert, womit interessante Effekte erreicht werden können.


Eine interessante Anwendung von color und 'currentColor' ergibt sich, wenn von vielen Objekte gleichzeitig die Farbe geändert werden können soll, diese aber nicht einfach gruppiert werden können. Da es nur eine solche Eigenschaft gibt, ist das Konzept so nicht beliebig erweiterbar. Für eine statische Änderung kann dies bei der Interpretation von CSS-Selektoren jeweils durch Verwendung von Klassen erfolgen, denen per CSS Eigenschaften zugeordnet werden können. Allerdings ermöglicht es es SMIL-Animation in SVG nicht, Klassen selbst zu animieren. Da CSS-Notation in SVG tiny 1.2 nicht vorgesehen ist, gibt es dort das Element solidColor mit entsprechenden Eigenschaften, um als Maldienst referenzierbare eigene Farbangaben machen zu können. Da dies auch Animation mit einschließt, ist dies Modell der CSS-Notation mit Klassen überlegen (wobei es inzwischen auch einen Arbeitsentwurf für Animation in CSS3 gibt).


Beispiel zur Verwendung:

<g color="blue" fill="yellow">
<animate attributeName="color"
  values="#00a;#f0a;#a0f;#00a" dur="60s"
  repeatDur="indefinite" />
<animate attributeName="fill"
  values="#080;#ff0;#0ff;#080" dur="61s"
  repeatDur="indefinite" />
<circle r="160" />
<circle r="150" fill="red" />
<circle r="140" fill="currentColor" />
<circle r="130" />
<circle r="120" fill="red" />
<circle r="110" fill="currentColor" />
<circle r="100" />
<circle r="90" fill="red" />
<circle r="80" fill="currentColor" />
<circle r="70" />
<circle r="60" fill="red" />
<circle r="50" fill="currentColor" />
<circle r="40" />
<circle r="30" fill="red" />
<circle r="20" fill="currentColor" />
<circle r="10" />
</g>

SVG-Beispiel color und currentColor.

Eigenschaften zur Anzeige, Sichtbarkeit und Durchsichtigkeit[Bearbeiten]

Eigenschaften zur Anzeige oder Sichtbarkeit sind bei statischen Dateien eher langweilig, weil nicht angezeigte oder nicht sichtbare Objekte bei einer graphischen Repräsentation nicht besonders viel hermachen. Anders wird es bei nichtstatischen Dateien, die etwa Ereignisse auswerten und animiert sind.

Teilweise durchsichtige Objekte können hingegen auch bereits in statischen Dateien interessant sein. Darunterliegende Objekte scheinen so durch und es können Effekte einfach erreicht werden, die bei beliebigen Pfaden ansonsten einen nicht unerheblichen Aufwand für den Autor bedeuten würden.


Anzeige, display[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Minimal-Comic mit Anspielung auf Becketts 'Warten auf Godot'

Ob ein graphisches Element überhaupt direkt angezeigt wird oder nicht, hängt zum einen davon ab, wo es sich befindet - innerhalb eines Elementes defs wird es zum Beispiel nicht direkt angezeigt werden, kann aber referenziert werden. Dort, wo es generell angezeigt werden kann, kann dies mit der Eigenschaft display beeinflusst werden.
Wird für ein Gruppenelement (g, svg, a, switch, foreignObject) die Anzeige unterbunden, so gilt dies für alle Kindelemente, unabhängig vom individuellen Wert des jeweiligen Elementes. Ein Element mit unterbundener Anzeige ist auch nicht Empfänger von Ereignissen.
Der konkrete Wert von display eines Elternelementes hat allerdings keinen Einfluss darauf, dass ein Element zum Beispiel mit use referenziert werden kann.

Andersherum kann bei Elementen, die in SVG nicht zur direkten Anzeige gedacht sind, nicht mittels display eine Anzeige erzwungen werden. Um dies zu erreichen, müsste die Kennzeichnung des Dokumentes so geändert werden, dass es nur noch als allgemeines XML-Dokument erkannt wird und nicht mehr als SVG-Dokument.


Die Eigenschaft ist in CSS ganz allgemein definiert und enthält daher einige Werte, deren Bedeutung sich für SVG nicht voneinander unterscheidet.

Mögliche Werte sind:

inherit
geerbt
none
keine Darstellung oder Anzeige
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption 
Genau einer der Werte ist anzugeben, um eine Anzeige oder Darstellung zu bewirken.

Der Initialwert ist 'inline', die Eigenschaft wird nicht vererbt, ist aber animierbar.


Beispiele zu Verwendung:

<g font-size="15" font-family="fantasy">
<animate attributeName="display" values="inline;none"
dur="2s" repeatDur="indefinite" />
<circle r="100" fill="#fc0" />
<text x="10" y="20">Blinker </text>
<text x="10" y="40">
Unwichtiges<tspan display="none"> kann
gestrichen werden</tspan>!</text>
</g>

Der Text 'Blinker' ist also abwechselnd eine Sekunde sichtbar, eine Sekunde unsichtbar. Zweifellos kein wichtiges Beispiel, weswegen da auch der Hinweis 'Unwichtiges!' ausreicht, statt eines ganzen Satzes, nach dem Motto: Was gestrichen ist, kann auch nicht durchfallen!


<text x="10" y="20" font-size="15" font-family="fantasy">
<tspan><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="0s" />0</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="1s" />1</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="2s" />2</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="3s" />3</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="4s" />4</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="5s" />5</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="6s" />6</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="7s" />7</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="8s" />8</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="9s" />9</tspan>
</text>

Ein simpler Zähler von 0 bis 9 mit Wiederholung.


Beispiel: Minimal-Comic mit Anspielung auf Becketts 'Warten auf Godot'.
Anwendung der Eigenschaft display mit Animation.
Das Dokument ist so angelegt, dass bei einer kompletten Implementierungslücke hinsichtlich Animation eine statische Version des Comics verfügbar ist.

Sichtbarkeit, visibility[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ? ja
Verwendung von visibility

Anders als display hat visibility nur Einfluss auf die Sichtbarkeit von Elementen, diese Werte aber nicht komplett aus der Darstellung entfernt, was etwa Einfluss auf Elemente wie tspan hat, weil auch unsichtbare Glyphen die aktuelle Textposition verändern, nicht dargestellte Glyphen tun dies hingegen nicht. Grob gesagt bleibt der Platz für unsichtbare Element reserviert, für nicht dargestellte nicht. Nicht sichtbare Elemente können trotzdem Ziel von Ereignissen sein, so dass ein unsichtbares Element platziert werden kann, um Ereignisse abzufangen, die zum Beispiel für sichtbare Elemente unerwünscht wären.

In SVG tiny 1.2 gibt es auch die Möglichkeit hörbarer Inhalte. Wie der Name der Eigenschaft bereits impliziert, hat die Frage der Sichtbarkeit nichts mit der der Hörbarkeit zu tun, insofern hat die Eigenschaft visibility auch keinen Einfluss auf hörbare Elemente.

Mögliche Werte sind:

inherit
geerbt
visible
sichtbar
hidden | collapse
Genau einer der Werte ist anzugeben,dann ist das Objekt nicht sichtbar.

Initialwert ist 'visible', die Eigenschaft wird vererbt und ist animierbar.


Beispiel zu Verwendung:

<text x="10" y="40" font-size="15" 
      font-family="fantasy">Beispiel 
 <tspan visibility="hidden">zur Verwendung von</tspan>
 visibility</text>


Beispiel: Verwendung von visibility.
Von fünf (!) Quadraten kann die Füllung durch Klicken oder Aktivieren verändert werden.

Das kleine Quadrat in der Mitte ist anfänglich nicht sichtbar, kann aber Ziel von Klicks sein oder kann aktiviert werden. Dies bewirkt eine Änderung der Füllung der großen Quadrate. Gleichzeitig bewirkt dies aber auch eine Änderung der Sichtbarkeit und zudem wird für 20s die Möglichkeit deaktiviert, Ziel von Ereignissen zu sein.

Beim Quadrat links unten bewirkt ein Ereignis anfangs das Setzen der Füllung auf 'none' für 5s. Weil pointer-events auf 'visiblePainted' gesetzt ist, lässt sich dies nur durch ein abermaliges Ereignis verlängern, wenn entweder der Strich angeklickert oder aktiviert wird oder aber die 5s gewartet wird, bis die Füllung wieder einen anderen Wert erhält.

Beim Quadrat rechts oben bewirkt ein Ereignis anfangs das Setzen der Sichtbarkeit auf 'hidden' für 5s. Weil pointer-events auf 'painted' gesetzt ist, lässt sich dies jederzeit durch ein weiteres Ereignis verlängern.

Opazität, opacity[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 1.5 3.2 4  ?  ?  ?
Vergleich opacity, fill-opacity, stroke-opacity

Während fill-opacity und stroke-opacity nur den Grad der Durchsichtigkeit der Füllung, beziehungsweise des Striches individueller Elemente beeinflussen, wird mit opacity die Durchsichtigkeit des gesamten Elementes oder einer ganzen Gruppe von Elementen beeinflusst. Diese Angabe zur Durchsichtigkeit wird verarbeitet, nachdem bereits die Füll- und Stricheigenschaften und gegebenenfalls die Anordnung in der Gruppe verarbeitet wurden.

Während visibility angibt, ob das Element oder die Gruppe überhaupt sichtbar ist, geht es bei opacity nur darum, wie durchsichtig es ist. Auch komplett durchsichtige Elemente können so das Ziel von Ereignissen sein, die auf sichtbare Elemente wirken, sofern sie nicht mittels visibility explizit unsichtbar gemacht werden oder gar mittels display gar nicht dargestellt werden.

Mögliche Werte sind 'inherit' für einen geerbten Wert oder eine Zahlenangabe aus dem Intervall 0 bis 1; 0 für komplett durchsichtig, 1 für komplett undurchsichtig. Werte außerhalb des Intervalles werden auf den nächsten zulässigen Wert, also 0 beziehungsweise 1 korrigiert, bevor die Eigenschaft angewendet wird.

Der Initialwert ist 1, die Eigenschaft wird nicht vererbt und ist animierbar.
opacity ist in SVG tiny 1.1 nicht verfügbar und ist in SVG tiny 1.2 darauf beschränkt, auf image-Elemente angewendet zu werden. Diese Einschränkung hängt damit zusammen, dass die Anwendung dieses Attributes eine größere Menge Rechnerei zur Folge haben kann, die zumindest für Mobiltelephone eine Herausforderung sein kann. Wenn es also für eine Anwendung weniger rechenintensive Umsetzungen gibt, sind diese sicher auch in der Vollversion von 1.1 dem Einsatz von opacity vorzuziehen.


Beispiel: Vergleich opacity, fill-opacity, stroke-opacity.
Zum Vergleich der Eigenschaften opacity, fill-opacity und stroke-opacity werden fünf Gruppen von Formen jeweils unterschiedlich mit diesen Eigenschaften ausgestattet. Links oben sind fill-opacity und stroke-opacity jeweils einzeln auf jede Form angewendet. In der Mitte oben ist opacity jeweils einzeln auf jede Form angewendet. Rechts oben ist opacity auf die ganze Gruppe angewendet. Links unten sind fill-opacity und stroke-opacity jeweils einzeln auf jede Form angewendet und opacity auf die ganze Gruppe. Rechts unten ist opacity jeweils einzeln auf jede Form angewendet und opacity auf die ganze Gruppe.


Überlauf, overflow[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 9 3 3.2 -  ?  ?  ?
Ein Symbol steht über. Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird der Überlapp dargestellt.
Ein Symbol steht über (2). Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird der Überlapp dargestellt.

Mit der Eigenschaft overlow kann angegeben werden, ob überstehende oder überlaufende Teile eines Elementes angezeigt werden sollen oder nicht. Dies gilt für Elemente, die einen eigenen Anzeigebereich öffnen, außerdem auch bei Markierungen und Mustern, wobei das Verhalten bei Mustern unterspezifiziert und uneinheitlich implementiert ist, es ist nicht eindeutig geregelt, wie überstehender Inhalt bei einem Muster miteinander wechselwirkt. Die Situation ist bei Mustern also derzeit zu vermeiden.

Die Eigenschaft ist nicht in SVG tiny 1.1 und tiny 1.2 verfügbar.

Elemente, die in der Vollversion einen eigenen Anzeigebereich eröffnen, sind: svg, symbol, image und foreignObject.


Mögliche Werte sind:

inherit
geerbt
hidden
Überstehende Bereiche werden nicht angezeigt.
scroll
Überstehende Bereiche werden nicht angezeigt. Es gibt allerdings auch keine Rollbalken, wie man vom Namen her und von CSS her erwarten könnte.
visible
Überstehende Bereiche werden angezeigt, sofern sie in einem anzuzeigenden Bereich liegen
auto
Überstehende Bereiche werden angezeigt, sofern sie in einem anzuzeigenden Bereich liegen

Handelt es sich beim betroffenen Element um das svg-Hauptelement, welches in einem anderen XML-Dokument mit Stilvorlageninterpretation eingebettet ist, entspricht der Ausschnitt im Falle von 'hidden' und 'scroll' dem des anfänglichen Anzeigebereiches. Ansonsten wird die Eigenschaft verwendet, wie in CSS definiert. Wird ist für das XML-Dokument keine Stilvorlageninterpretation vorgesehen oder das svg-Hauptelement ist nicht eingebettet, so wird die Eigenschaft ignoriert und der Ausschnitt ergibt sich aus dem anfänglichen Anzeigebereich.


Der Initialwert ist in CSS 'visible', allerdings wird dies durch die Stilvorlage des SVG-Darstellungsprogrammes überschrieben, dort ist der Wert 'hidden'. Die Eigenschaft wird nicht vererbt und ist animierbar.


Ein Symbol steht über:
Einige Beispiele für das Zusammenspiel von symbol mit der Eigenschaft overflow, Überstehen bedingt durch preserveAspectRatio 'slice'.
Ein Symbol steht über (2):
Einige Beispiele für das Zusammenspiel von symbol mit der Eigenschaft overflow, wenn die Pfade über die viewBox überstehen.

Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben jeweils keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird jeweils der Überlapp dargestellt.

Texteigenschaften[Bearbeiten]

Allgemeine und spezielle Eigenschaften auf Text angewendet[Bearbeiten]

Da Text in SVG ebenfalls als Graphik dargestellt wird, kann Text ebenfalls mit den Eigenschaften zur Füllung und zum Strich versehen werden. In SVG tiny 1.1 ist allerdings nicht vorgesehen, dass Eigenschaften zum Strich auch auf Text wirkt, weil die verwendeten Schriften auf Mobiltelephonen dies zur Zeit der Herausgabe der Spezifikation vermutlich noch nicht hergegeben haben oder aber dies die Prozessoren von Mobiltelephonen zu der Zeit zu stark gefordert haben mag.

Sofern Eigenschaften vererbbar sind können Texte nicht nur direkt durch Angabe der Präsentationsattribute in Elementen wie text oder tspan notiert werden, sondern auch in dem übergeordneten Element zum Beispiel der Gruppierung g angegeben werden. So können Füllung, Strich, Schriftart und Zeichenhöhe angegeben werden:

<g fill="red" fill-opacity="0.5"
stroke="blue" stroke-width="0.2" 
stroke-linejoin="round" stroke-linecap="round"
stroke-opacity="0.75"
font-family="fantasy" font-size="25">
<text x="10" y="50">Hallo</text>
<text x="40" y="60">Welt<tspan font-size="50">!</tspan></text>
</g>

Neben font-family und font-size gibt es einige weitere Eigenschaften, die nur auf Text als Graphik wirken und nicht auf anderen Elemente.


Auswahl der Schriftart[Bearbeiten]

Schriftfamilie, font-family[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3 3.2 4  ?  ?  ?
Beispiel generische Schriftfamilien

Mit der Eigenschaft font-family wird die Schriftart angegeben. Der Wert von font-family ist eine mit Komma separierte Liste von Namen von Schriftarten oder generischen Schriftfamilien oder das Schlüsselwort 'inherit' für vererbt. Generische Schriftfamilien sind gekennzeichnet durch folgende Schlüsselwörter, die nicht in Anführungszeichen zu setzen sind: serif, sans-serif, cursive, fantasy, and monospace. Jedes Darstellungsprogramm sollte eine Schriftart für jede dieser generischen Schriftfamilien verfügbar haben, nicht aber zwangsläufig eine spezielle Schriftart.

Enthält der Name einer Schriftart Leerzeichen, so sollte der Name in Anführungszeichen stehen.

Findet das Darstellungsprogramm in der ersten angegebenen Schriftart einen Glyphen nicht, wird in der nächsten gesucht und so weiter. Die letzte Angabe in der Liste sollte daher immer eine generische Schriftfamilie sein, um sicherzustellen, dass überhaupt was dargestellt wird.

Der Initialwert ist vom Darstellungsprogramm abhängig (zum Beispiel, was der Nutzer dort eingestellt hat). Die Eigenschaft wird vererbt und ist animierbar.

Folgende Angabe wäre also suboptimal, weil die generische Schriftfamilie fehlt und der Name der Schriftart Leerzeichen enthält, aber nicht in Anführungszeichen steht (die vom Präsentationsattribut gelten nicht, gemeint sind zusätzliche innerhalb der Liste):

 <text x="300" y="150" font-family="Comic Sans MS">Schlechtes Beispiel</text>

Wichtig ist hierbei also, korrekte Angaben zu machen anzugeben, so kann die Angabe "'Comic Sans MS'" zwar zum richtigen Ergebnis führen - dies muss jedoch nicht sein, wenn dieser Zeichensatz zum Beispiel nicht auf diesem Computer installiert ist oder eine Glyphe benötigt wird, die darin nicht enthalten ist. Daher sollte von der Möglichkeit Gebrauch gemacht werden, eine Liste anzugeben:

 <text x="300" y="150" 
  font-family="Frutiger,'Comic Sans MS',Arial,Helvetica,sans-serif">Weitere Projekte</text>

oder vielleicht besser:

 <text x="300" y="150" 
 font-family="'Frutiger Capitalis','Alexa Regular','Comic Strip','Comic Sans MS',fantasy"
 >Weitere Projekte</text>

weil 'Comic Sans MS' zur fantasy-Schriftfamilie gehört und dies dem Autor wichtig sein könnte.


Beispiel generische Schriftfamilien
Vorstellung der fünf generischen Schriftfamilien. Welche Schriftart die jeweilige Schriftfamilie repräsentiert, kann der Nutzer in der Regel beim Darstellungsprogramm selbst auswählen.

  • serif - Schriftart mit Serifen, also kleine Füßchen, altbekannt ist zum Beispiel die Schriftart 'Times'.
  • sans-serif -Schriftart ohne Serifen, also keine Füßchen, altbekannt ist zum Beispiel die Schriftart 'Helvetica'.
  • cursive - schräggestellt, wird oft aus einer anderen Schriftart durch Scherung gewonnen.
  • fantasy - stark dekorative, spielerische Schriftart.
  • monospace - nichtproportionale Schriftart, altbekannt ist zum Beispiel die Schriftart 'Courier'.

Schriftgröße, font-size[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3 (fehlerhaft bei kleinen Längenangabe) 3.2 4  ?  ?  ?
Beispiel Schriftgröße

Die Schriftgröße wird durch die Eigenschaft font-size angegeben. Der mögliche Wert hängt vom verwendeten Profil ab.

inherit
geerbt
absolute Größe
Eines der Schlüsselwörter: xx-small, x-small, small, medium, large, x-large, xx-large
relative Größe
Eines der Schlüsselwörter: larger,smaller
Längenangabe
Eine nicht negative Länge
Prozentangabe
Zum Beispiel 120%, relativ zur Schriftgröße des Elternelementes (nicht in den tiny-Profilen)

Der Initialwert ist medium. Die Eigenschaft wird vererbt und ist animierbar.

Bei den tiny-Profilen sind wie gehabt Einheiten bei der Längenangabe nicht möglich, die Zahl ist also in lokalen Einheiten. Aufgrund der Skalierungsfunktionen von SVG kommt der Schriftgröße in SVG eine etwas andere Bedeutung zu als bei Angaben für (X)HTML-Dokumente. Bei CSS+(X)HTML sind eher absolute oder relative Größen, Prozentangaben und Längeneinheiten wie em oder ex sinnvoll, damit die vom Nutzer als optimal eingestellte Schriftgröße Berücksichtigung findet oder diese nicht ungeeignete Angaben einfach überschreibt. Indes in SVG sind eher lokale Einheiten angemessen, da es sich um Text als Graphik handelt und SVG zudem explizit die Möglichkeit hat, die Darstellung zu skalieren und SVG auch eher suboptimal für langen Fließtext ist. Bei einer Gaphik hat eher Priorität, dass der Autor einschätzen kann, wie groß der Text relativ zu den restlichen Inhalten wird. In Elementen wie text wird der Text auch nicht automatisch umgebrochen, also haben Autor und Betrachter kaum eine Chance, flexible Schriftgrößen sinnvoll zu nutzen. Bei Fließtext in (X)HTML kommt es eher auf optimale Lesbarkeit von längeren Textpassagen ohne Kunststücke seitens des Betrachters an.

So wird die Eigenschaft notiert:

<text x="300" y="150" font-size="12.3">Weitere Projekte</text>

Beispiel Schriftgröße
Die Schriftgröße wird für jeden Buchstaben des Wortes font-size geändert. In der Mitte beim Bindestrich liegt der kleinste Wert.

Schriftstil, font-style[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3 3.2 4  ?  ?  ?
Beispiel Schriftstil

Mittels der Eigenschaft font-style wird der Schriftstil ausgewählt, damit ist innerhalb einer Schriftfamilie auswählbar, ob die normale Variante verwendet wird, eine kursive oder eine geneigte.

Mögliche Werte sind:

inherit
geerbt
normal
'normal' im Gegensatz zu kursiv oder geneigt
italic
kursiv
oblique
geneigt

Jede Schriftfamilie sollte mindestens einen Eintrag für eine normale Variante und eine geneigte haben. Gibt es keine für kursiv, so kann auch die für oblique verwendet werden. Begriffe mit ähnlicher Bedeutung unter Experten für Schriftarten für geneigt oder oblique sind auch 'slanted' oder 'incline' (sofern jemand auf diese Begriffe in diesem Zusammenhang stoßen sollte).

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.

Beispiel Schriftstil
Der Schrifstil wird für ein paar Zeilen Text wie angegeben notiert.

Schriftvariante, font-variant[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 - 9 - - 4  ?  ?  ?
Beispiel Schriftvariante

Mit der Eigenschaft font-variant kann angegeben werden, ob Kapitälchen verwendet werden sollen oder nicht. Glyphen in der Kaptälchenvariante sehen ähnlich wie Großbuchstaben aus, sind bei Kleinbuchstaben aber etwas kleiner und eventuell etwas anders proportioniert als Großbuchstaben.

Mögliche Werte sind:

inherit
geerbt
normal
keine Kapitälchen
small-caps
mit Kapitälchen

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.

Beispiel Schriftvariante
Die Schriftvariante wird für ein paar Zeilen Text wie angegeben notiert.

Schriftgewichtung, font-weight[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 8 3 3.2 4  ?  ? ja
Beispiel Schriftgewichtung

Die Gewichtung der Schrift kann mit der Eigenschaft font-weight angegeben werden. Im Großen und Ganzen geht es darum, wie fett die Schrift dargstellt wird. Das ist in SVG nicht zu verwechseln mit der Strichstärke, da im Allgemeinen die Glyphen vorrangig aus Füllungen bestehen. Wird bei den Glyphen allerdings ein Strich gleicher Farbe verwendet, kann damit ein ähnlicher Effekt wie mit font-weight für eine fette Schrift erzielt werden, meist ist allerdings bei diesem Trick die Lesbarkeit schlechter, dafür die Einstellung aber stufenlos möglich.

Mögliche Werte sind:

inherit
geerbt
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
genau eine der Zahlen ist anzugeben, eine kleine Zahl bedeutet ein kleines Gewicht, also ein 'mageres' Aussehen der Glyphen, eine große Zahl entsprechend ein großes Gewicht oder fette Glyphen.
normal
wie 400
bold
wie 700
bolder
es wird eine Zahl größer angenommen als die geerbte, 900 bleibt unverändert
lighter
es wird eine Zahl kleiner angenommen als die geerbte, 100 bleibt unverändert

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Je nach Schriftfamilie müssen nicht alle Gewichte verfügbar sein, es wird dann das dem angegebenen Wert am nächsten liegende verfügbare Gewicht gewählt.


Beispiel Schriftgewichtung
Die Schriftgewichtung wird für ein paar Zeilen Text wie angegeben notiert.

Schriftdehnung, font-stretch[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 1.7 - - - -  ?  ? ja
Beispiel Schriftdehnung

Die Eigenschaft font-stretch entscheidet darüber, ob die Darstellung von Text normal, komprimiert oder gedehnt dargestellt wird.

Mögliche Werte sind:

inherit
geerbt
normal
weder Dehnung noch Komprimierung
wider
gedehnter als geerbt
narrower
komprimierter als geerbt
ultra-condensed
maximal komprimiert
extra-condensed
stark komprimiert
condensed
komprimiert
semi-condensed
schwach komprimiert
semi-expanded
schwach gedehnt
expanded
gedehnt
extra-expanded
stark gedehnt
ultra-expanded
maximal gedehnt

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.

In der Reihenfolge steht 'normal' zwischen 'semi-condensed' und 'semi-expanded'. Mit den relativen Angaben wird jeweils zum nächsten Wert relativ zu geerbten gesprungen, es sei denn, es gibt in der Reihe keinen nächsten Wert mehr, dann wird der geerbte verwendet.

Beispiel Schriftdehnung
Die Schriftdehnung wird für ein paar Zeilen Text wie angegeben notiert.

Schriftanpassung, font-size-adjust[Bearbeiten]

SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
1.1 - - - - -  ?  ? -
Beispiel Schriftanpassung

Anpassung des Aspektwertes eine Schrift (zu einer anderen). Die Höhe oder Größe von Glyphen aus verschiedenen Schriftarten kann verschieden ausfallen. Wird eine davon anders als bei der geerbten Schriftart gewählt oder bei einzelnen Glyphen als Alternative zur ersten Wahl verwendet, weil es für die Glyphe kein Zeichen in der ersten Schriftart gibt, so wird eine aus der Alternative genommen. Durch Angabe von font-size-adjust kann nun die Erscheinung der Alternative mit