SVG/ Dokumentstruktur

SVG:

Dokumentstruktur, Einführung

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


SVG
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

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

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

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

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

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 15 cm × 15 cm festgelegt und definiert die viewBox, so dass der Anzeigebereich innerhalb des Dokumentes nur 15 × 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

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

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

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

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

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

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

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

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

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

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

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


SVG
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

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

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

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

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

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

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

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

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+5^1/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

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

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

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

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

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

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

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

Beispiel zur Verwendung von image

Im Beispiel referenziertes 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

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

W3C bedingte Verarbeitung

Externe Ressourcen und progressive Darstellung

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

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

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

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

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

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

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

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

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

Beispiel zur Verwendung von discard


SVG
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

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

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

Attribute id und xml:id

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

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

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

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

SVG: