SVG/ Interaktivität

SVG:

Interaktivität

SVG-Dokumente können interaktiv sein, also auf Ereignisse reagieren, die vom Betrachter oder Nutzer des Dokumentes ausgehen.

Sofern Skriptsprachen interpretiert werden, können Skripte die Erscheinung des Dokumentes zeitabhängig ändern, was durch den Nutzer beeinflussbar sein kann, wofür spezielle Mechanismen im Dokumentobjektmodell verfügbar sind (englisch: listener, handler). Dies wird im Kapitel über Skripte behandelt.

Eine Interaktion kann auch den Beginn oder das Ende einer Animation hervorrufen. Dies wird im Kapitel über Animation behandelt. Die Listen für den Beginn und das Ende haben spezielle Ereigniswerte, mit denen ähnlich wie für Skriptsprachen Ereignisse genutzt werden können, damit der Betrachter die Zeitabhängigkeit des Dokumentes aktiv beeinflussen kann.

SVG stellt auch die Funktionalität von Verweisen (englisch: hyperlink) zur Verfügung. Dies wird im Kapitel Verweise erklärt.

SVG tiny 1.2 bietet ferner die Möglichkeit anzugeben, welche Elemente fokussiert oder editiert werden können und bietet eine Möglichkeit, einen Navigationsring anzugeben.

Mit der Eigenschaft pointer-events kann der Autor auch beeinflussen, in welcher Weise Interaktivität mit einem Zeigergerät Einfluss auf ein Element haben kann, ob dieses das Ereignis also registriert oder nicht. Die Eigenschaft ist beschrieben im Kapitel über allgemein verwendbare Eigenschaften (Kapitel Graphiken formatieren).

Sofern das Darstellungsprogramm CSS interpretiert, ist mit den dynamischen Pseudoklassen ':hover', ':active' und ':focus' ebenfalls eine Änderung der Darstellung durch Interaktivität möglich. Anders als die Ereignisse, welche für Skripte und Animationen verwendbar sind, sind Pseudoklassen jedoch nicht direkt an Ereignisse gebunden, sondern stellen einen aktuellen Status dar. Ändert ein Objekt seinen Status, können die mit einer solchen Pseudoklasse notierten Eigenschaften wirksam oder unwirksam werden. CSS definiert allerdings nicht präzise, wann sich der Status ändert, so dass das dynamische Verhalten je nach Darstellungsprogramm deutlich anders ausfallen kann (bei ':hover' etwa ist nicht klar, ob der Status nur eintritt, wenn sich ein Zeigergerät über das betroffene Element bewegt oder auch, wenn sich das betroffene Element unter das Zeigergerät bewegt und umgekehrt, wenn der Status wieder verloren geht). In der Praxis eignen sich daher Pseudoklassen nicht für präzise Interaktionen, sondern wie CSS ganz allgemein für dekorative Aspekte. Interessant dabei ist auch, dass Arbeitsentwürfe für CSS3 veröffentlicht wurden (2009), mit denen dekorative Übergänge und Animationen mittels CSS möglich werden.

Ereignisse

Ereignisse werden in SVG über das Dokumentobjektmodell ausgewertet und für Beginn- und Endlisten von Animationen. Insgesamt ergibt sich daraus eine recht umfangreiche Liste. Teile davon sind nur über Skripte und das Dokumentobjektmodell auswertbar.

Blubbern

Beispiel für Blubbern

Wenn ein Element ein Ereignis registriert (zum Beispiel einen Klick), so ist eine relevante Frage, ob auch das Elternelement das Klickereignis registriert oder ob das angeklickte Element das Ereignis vor den Elternelementen abschirmt. Wenn das Ereignis nicht abgeschirmt wird, sondern auch an das Elternelement weitergereicht wird, so wird von blubbern (englisch: bubble) gesprochen.

Etwa folgendes Beispiel für Blubbern:

<g fill="blue">
<set attributeName="fill" to="green" begin="click" />
<circle r="100" />
<circle r="30" fill="green">
  <set attributeName="fill" to="yellow" begin="click" />
</circle>
</g>

Wird nun der kleine Kreis angeklickert, ist die Frage des Blubberns relevant für die Farbe des größeren Kreises. Blubbert das Ereignis, wird fill vom Element g auf 'green' gesetzt und der große Kreis wird grün. Blubbert es nicht, so wird nur der kleine Kreis gelb, der große bleibt blau. Korrekt ist in diesem Falle das Blubbern, also wird der große Kreis grün, wenn der kleine angeklickert und gelb wird.

In der Tat blubbern fast alle Ereignisse, die für Beginn- und Endlisten von Animationen verfügbar sind. Ausnahme sind die Ereignisse 'zoom' und 'rotate'. Problematisch sind ferner die Ereignisse 'beginEvent', 'endEvent' und 'repeatEvent', weil in SMIL definiert ist, dass diese nicht blubbern (was dann auch auf SVG 1.1 zutrifft). SVG tiny 1.2 legt hingegen fest, dass diese blubbern.

Der Autor kann das Blubberverhalten nicht selbst festlegen. Allenfalls kann die Struktur des gesamten Dokumentes so angelegt werden, dass durch das Blubbern kein Problem entsteht.

Das Verhalten ist in der Tabelle im folgenden Abschnitt einzeln angegeben.

Ereignisliste

Eine komplette Liste (Tabelle) mit Ereignissen und in welchem Zusammenhang sie verwendet werden, sieht wie folgt aus. Abbrechen bezieht sich auf die Möglichkeit, ein Ereignis über das DOM (Dokumentobjektmodell) zu unterbinden (englisch: cancelable). Ein DOM-Ereignisattribut kann in SVG 1.1 eingesetzt werden, um ein Skript anzusteuern und wird dann im betroffenen Element notiert. SVG tiny 1.2 hat dafür spezielle Elemente (listener und handler).

Ereignisliste
Ereignistyp	Beschreibung	Name für Animation	Name DOM-Ereignisattribut (SVG1.1)	Blubbern	Abbrechen
DOMFocusIn	Element erhält Fokus	focusin	onfocusin	ja	nein
DOMFocusOut	Element verliert Fokus	focusout	onfocusout	ja	nein
DOMActivate	Element wird aktiviert, etwa durch Anklickern oder Tastendruck	activate	onactivate	ja	ja
click	Element mit Zeigergerät angeklickert: mousedown - mouseup - click	click	onclick	ja	ja
mousedown	Knopf am Zeigergerät gedrückt	mousedown	onmousedown	ja	ja
mouseup	Knopf am Zeigergerät losgelassen	mouseup	onmouseup	ja	ja
mouseover	Zeigergerät auf Element bewegt	mouseover	onmouseover	ja	ja
mousemove	Zeigergerät über Element bewegt	mousemove	onmousemove	ja	ja
mouseout	Zeigergerät vom Element wegbewegt	mouseout	onmouseout	ja	ja
mousewheel	Rad vom Zeigergerät aktiviert (nur SVG tiny 1.2)	-	-	ja	ja
beginEvent	zeitabhängiges Element beginnt (begin-Liste)	beginEvent	onbegin	ja (SVG tiny 1.2), nein (SVG 1.1)	nein
endEvent	zeitabhängiges Element endet (end-Liste)	endEvent	onend	ja (SVG tiny 1.2), nein (SVG 1.1)	nein
repeatEvent	zeitabhängiges Element wiederholt sich	repeatEvent	onrepeat	ja (SVG tiny 1.2), nein (SVG 1.1)	nein
textInput	Text eingegeben (nur SVG tiny 1.2)	-	-	ja	ja
keydown	Taste gedrückt (nur SVG tiny 1.2)	-	-	ja	ja
keyup	Taste losgelassen (nur SVG tiny 1.2)	-	-	ja	ja
loadstart	Ladeoperation beginnt, nur SVG tiny 1.2	-	-	nein	nein
progress	Ladeoperation einer Resource macht Fortschritte, nur SVG tiny 1.2	-	-	nein	nein
loadend	Ladeoperation beendet, nur SVG tiny 1.2	-	-	nein	nein
SVGTimer	Zeitgeberintervall abgelaufen, nur SVG tiny 1.2	-	-	nein	nein
load	Element samt Inhalt und referenzierter Ressourcen geladen (nur SVG tiny 1.2)	load	-	nein	nein
SVGload	Dokument geladen, nur Element svg (veraltet in SVG tiny 1.2, load benutzen)	SVGload (in SVG 1.1)	onload	nein	nein
resize	Größe des Anzeigebereiches verändern, nur Element svg (nur SVG tiny 1.2)	resize	-	ja	nein
SVGResize	Größe des Anzeigebereiches verändern, nur Element svg (veraltet in SVG tiny 1.2, resize benutzen)	SVGResize (in SVG 1.1)	onresize	ja	nein
scroll	Dokument rollen, nur Element svg (nur SVG tiny 1.2)	scroll	-	ja	nein
SVGScroll	Dokument rollen, nur Element svg (veraltet in SVG tiny 1.2, scroll benutzen)	SVGScroll (in SVG 1.1)	onscroll	ja	nein
SVGZoom	Dokument vergrößern oder verkleinern, nur Element svg	zoom	onzoom	nein	nein
SVGRotate	Dokument drehen, nur Element svg, nur SVG tiny 1.2	rotate	-	nein	nein
SVGUnload	Dokument aus Anzeige entfernt, nur Hauptelement svg (nur SVG 1.1)	SVGUnload	onunload	nein	nein
SVGAbort	Dokument laden abgebrochen, bevor ein Elmenent komplett geladen ist (nur SVG 1.1)	SVGAbort	onabort	ja	nein
SVGError	Element nicht richtig geladen oder fehlerhaft (nur SVG 1.1)	SVGError	onerror	ja	nein
DOMSubtreeModified	Allgemeine DOM-Änderung (nur SVG 1.1)	-	-	ja	nein
DOMNodeInserted	Kindknoten eingefügt (nur SVG 1.1)	-	-	ja	nein
DOMNodeRemoved	Kindknoten von anderem Knoten entfernt (nur SVG 1.1)	-	-	ja	nein
DOMNodeRemovedFromDocument	Kindknoten vom Dokument entfernt (nur SVG 1.1)	-	-	nein	nein
DOMNodeInsertedIntoDocument	Kindknoten in Dokument eingefügt (nur SVG 1.1)	-	-	nein	nein
DOMAttrModified	Attribut geändert (nur SVG 1.1)	-	-	ja	nein
DOMCharacterDataModified	Textinhalt eines Knotes geändert (nur SVG 1.1)	-	-	ja	nein

Fokussierbarkeit


SVG
1.2 tiny	-	-	-	-	-	?	?	?

Beispiel Fokussierbarkeit

In SVG tiny 1.2 kann mit dem Attribut focusable angegeben werden, ob ein Element fokussierbar ist oder nicht. Die korresondiert dann mit den Ereignissen 'focusin' und 'focusout'. Ist ein Element fokussierbar, so können diese Ereignisse bei diesem auftreten, sonst nicht.

Alle darstellbaren und gruppierenden Elemente (außer defs) können fokussierbar. Ein fokussierbares Gruppierungselement kann auch fokussierbare Kindelemente enthalten.

Die möglichen Werte sind:

true: Das Element ist fokussierbar
false: Das Element ist nicht fokussierbar
auto: Das ist die Voreinstellung, das im folgenden angegebene Verhalten hängt vom Element ab und deckt sich mit dem, was in SVG 1.1 immer gilt.

Das Verhalten für 'auto' entspricht 'false', falls nicht eine der folgenden Ausnahmen auftritt:

Das Element a.
Textelemente (die dargestellt werden; in tiny 1.2 text, textArea und tspan), welche das Attribut editable auf 'simple' gesetzt haben.
Zielelemente von Animationen beziehungsweise damit verbundenen Ereignissen, falls die begin- und end-Listen 'focusin', 'focusout' oder 'activate' enthalten.
Elemente mit einem Ereignisempfänger für die DOM-Ereignisse 'onfocusin', 'onfocusout', 'onactivate'.

focusable ist animierbar.

Beispiel Fokussierbarkeit
Text mit blauem Strich sind fokussierbar. Ein grauer Strich zeigt an, dass der Text nicht fokussierbar ist. Strich und Fokussierbarkeit werden bei zwei Texten animiert.

Eine Fokussierung bewirkt eine Animation der Füllung des benachbarten Kreises.

Hervorhebung


SVG
1.2 tiny	-	9.5	-	-	-	?	?	?

Beispiel focusHighlight

Mit dem Attribut focusHighlight kann in SVG tiny 1.2 festgelegt werden, ob ein fokussiertes Element hervorgehoben werden soll oder nicht. Die Art der Hervorhebung kann abhängig vom Darstellungsprogramm sein, zum Beispiel könnte die Farbe verändert werden oder ein Rahmen um das Objekt gemalt werden.

Der Attributwert ist entweder 'auto' oder 'none'.

Bei 'none' sollen fokussierte Elemente nicht hervorgehoben werden. Bei 'auto' soll das fokussierte Element hervorgehoben werden. Dies ist die Voreinstellung.

Das Attribut ist nicht animierbar.

Beispiel focusHighlight
Die Antworten auf die Frage 'Wie geht's?' können fokussiert werden, was im Falle der Antwort 'Gut' hervorgehoben werden sollte. Im Falle von 'Schlecht' bedingt durch focusHighlight sollte keine Hervorhebung stattfinden. Unabhängig davon wird der Strich der Rechtecke durch Fokussierung farblich verändert.

Editierbarkeit


SVG
1.2 tiny	-	9.5 (teilweise)	-	-	-	?	?	?

Beispiel editable

In SVG tiny 1.2 kann mit dem Attriut editable angegeben werden, ob Textelemente (text, textArea und tspan) editierbar sind oder nicht.

Jenseits von Skriptinteraktionen bietet SVG tiny 1.2 jedoch keine Möglichkeit für den Autor, das Dokument auf die Editierung reagieren zu lassen oder dies zum Beispiel mit einem Formular abschicken zu lassen. Eine formularartige Interaktion erfordert demzufolge Formularfunktionalitäten, wie sie zum Beispiel von XForms oder von XHTML zur Verfügung gestellt werden. Da eine Interpretation von Skripten beim Nutzer nicht sichergestellt werden kann, sollten damit keine relevanten Informationen verareitet werden, ohne die Zugänglichkeit der Verarbeitung anderweitig zu gewährleisten (Kriterium der Barrierefreiheit und Zugänglichkeit).

Die möglichen Werte sind 'none' oder 'simple'. Bei 'none' gibt es keine Editiermöglichkeit. Bei 'simple' stellt das Darstellungsprogramm eine einfache Eingabemöglicheit für dargetellten, nicht versteckten Text zur Verfügung, mit welcher der Text editiert werden kann.

Sofern eine Zwischenablage im Darstellungsprogramm verfügbar ist, muss sich auch damit einfach Text hin- und herkopieren lassen.

Im Falle von 'simple' ist focusable 'true'.

editable ist animierbar.

Beispiel editable
Nach einem Aktivieren des blauen Kreises ist der Text für 10s editierbar, Dies wird mit einem blauen Strich des Rechtecks gekennzeichnet. Mit dem magenta Kreis kann die Editierbarkeit alternativ beendet werden.

Zwischen fokussierbaren Elementen soll navigiert werden können. Dazu ist von den Darstellungsprogrammen ein geeigneter Mechanismus zur Verfügung zu stellen, oft zum Beispiel mit Tabulatortasten.

Im Dokument besteht ein Fokussring, in dem kann also von einem fokussierbaren Element zum nächsten gesprungen werden, vom letzten wieder zum ersten. Ohne weitere Angaben wird die Reihenfolge verwendet, wie die fokussierbaren Elemente im Quelltext stehen.

SVG tiny 1.2 bietet auch die Möglichkeit, die Reihenfolge zu ändern oder statt eines einfachen Ringes ein effektiveres Muster zu realisieren.

Ein Element mit display="none" ist nicht fokussierbar und ist daher nicht Bestandteils eines Navigationsmechnismus. Lediglich unsichtbare oder transparente Elemente sind hingegen fokussierbar. Es können auch Elemente fokussiert werden, die außerhalb des angezeigten Bereiches liegen. Wenn das Element fokussiert wird, soll der Anzeigebereich so verschoben werden, dass das fokussierbare Element im sichtbaren Bereich liegt.

Das Verhalten ist wie folgt:

Beim Laden liegt der Fokus zuerst beim Darstellungsprogramm.
Sobald das Darstellungsprogramm den Fokus freigibt, geht der Fokus an ein anderes Element über, das erste passende aus folgender Liste:
- Das Wurzelelement svg, falls dies fokussierbar ist.
- Das Element, welches mit dem Attribut nav-next angegeben im Wurzelelement svg ist, sofern es angegeben ist.
- Das erste fokussierbare Element im Dokument
- Das Darstellungsprogramm
Wenn ein Element fokussiert ist, dann wird das nächste fokussierte Element wie folgt bestimmt, die erste zutreffende Bedingung gilt:
- Sofern im fokussierten Element das Attribut nav-next angegeben ist, das darin referenzierte Element
- Das nächste fokussierbare Element in der Reihenfolge des Quelltextes
- Das Darstellungsprogramm
Wenn ein Element fokussiert ist, dann wird das vorherige fokussierte Element wie folgt bestimmt, die erste zutreffende Bedingung gilt:
- Sofern im fokussierten Element das Attribut nav-prev angegeben ist, das darin referenzierte Element
- Das vorherige fokussierbare Element in der Reihenfolge des Quelltextes
- Das Darstellungsprogramm

In alleinstehenden SVG-Dokumente, muss das Darstellungsprogramm immer ein aktuell fokussiertes Objekt haben. Hat kein Element im Dokument den Fokus, so hat das Dokument selbst den Fokus.

Wird ein SVG-Dokument in ein anderes Dokument eingebettet, nimmt das SVG-Dokument am Navigationsring des einbettenden Dokumentes teil, sofern dies nicht explizit anderweitig anders festgelegt ist.

Der Fokusring muss allerdings auch verlassen werden können, wozu das Darstellungsprogramm einen Mechanismus zur Verfügung stellen muss, der Fokus geht dann zurück an das Darstellungsprogramm.

Navigationsattribute


SVG
1.2 tiny	-	9.5 (teilweise)	-	-	-	?	?	?

Beispiel Navigationsattribute nav-next und nav-prev

Beispiel Navigationsattribute

Die Reihenfolge der Navigation in einem Fokusring kann mit folgenden Attributen festgelegt werden:

nav-next gibt das nächste Element an, nav-prev das vorherige, mögliche Werte sind:

self: Der Fokus bleibt beim Element selbst
auto: Verhalten, als ob das Attribut nicht angegeben ist, die Voreinstellung
Funktionale IRI: Fragmentidentifizierer des nächsten, beziehungsweise des vorherigen fokussierbaren Elementes im selben Dokument; also url(ID) mit ID dem Identifizierer

Die Attribute sind animierbar.

Weitere acht Attribute ermöglichen eine Navigation in bestimmte 'Richtungen' in einer gedachten zweidimensionalen Ebene. Die 'Richtung' ergibt sich aus dem Namen:

nav-up: Nach oben
nav-up-right: Nach oben rechts
nav-right: Nach rechts
nav-down-right: Nach unten rechts
nav-down: Nach unten
nav-down-left: Nach unten links
nav-left: Nach links
nav-up-left: Nach oben links

Mögliche Werte sind die gleiche wie für nav-next und nav-prev:

self: Der Fokus bleibt beim Element selbst
auto: Verhalten liegt beim Darstellungsprogramm, als ob das Attribut nicht angegeben ist, die Voreinstellung
Funktionale IRI: Fragmentidentifizierer des fokussierbaren Elementes in der angegebenen 'Richtung' im selben Dokument; also url(ID) mit ID dem Identifizierer

Die Attribute sind animierbar.

Beispiel Navigationsattribute nav-next und nav-prev
Acht Textelemente 1 bis 8 sind nebeneinander angeordnet. Mittels nav-next and nav-prev kann von einem zum nächsten gewechselt werden, jeweils umgekehrt als die Zahlen angeben und die Elemente im Quelltext stehen.

Wenn ein nicht sichtbares Element fokussiert wird, wird der Anzeigebereich so verschoben, dass das fokussierte Element im sichtbaren Bereich liegt.

Beispiel Navigationsattribute
Zehn Ziffern, + und - sind als Textelemente nebeneinander angeordnet. Mit Navigationselementen kann von einem zum nächsten gewechselt werden, für 1 bis 9 die Richtungenentsprechend der räumlichen Anordnung, für +, - und 0 mit vorwärts und rückwärts untereinander.

Ein fokussiertes Element sollte hervorgehoben sein.

Positioniererelement, Mauszeiger

Bei interaktiven Darstellungsprogrammen wird der Zeiger, die Maus oder das Positioniererelement oftmals abhängig von der aktuellen Funktion anders dargestellt. Dazu hat das Darstellungsprogramm einen Satz von Präsentationen, welche über die Eigenschaft cursor in der Vollversion von SVG 1.1 verfügbar ist. Die Eigenschaft ist im Kapitel Graphiken formatieren beschrieben. Neben den vordefinierten Formen kann der Autor auch eigene Präsentationen referenzieren. Damit Autoren die graphische Repräsentation auch innerhalb des SVG-Dokumentes mittels SVG oder eines Pixelgraphikformates realisieren können, gibt es das Element cursor.

Weil die Eigenschaft cursor ganz allgemein in CSS definiert ist, stehen die per SVG realisierten Präsentationen auch für Dekorationen in anderen Formaten zur Verfügung, sofern das Darstellungsprogramm cursor und SVG interpretiert.

Element cursor


SVG
1.1	1.7 (teilweise)	-	-	-	-	12	?	?

Mit dem Element cursor gibt es in der Vollversion von SVG 1.1 die Möglichkeit die Präsentation des Mauszeigers oder der Positionsmarke selbst und einheitlich für ein Dokument zu definieren.

Es wird ein komplettes Bild oder ein Element referenziert, welches den Zeiger darstellt. Dazu wird die präzise Zeigerposition angegeben.

Ansonsten ist das Element in der Spezifikation recht spärlich beschrieben. Bei der Referenzierung eines Elementes ist davon auszugehen, dass dieses einen eigenen Anzeigebereich mit definierter Höhe und Breite und vor allem definiertem Koordinatensystem haben sollte, also im Zweifelsfalle ein symbol oder ein svg sein sollte.

Damit der Zeiger überhaupt präsentiert werden kann, ist dieser vermutlich mit der Eigenschaft cursor zusammen mit optionalen weiteren Zeigern, gefolgt von einem generischen Zeiger anzugeben. Der jeweils folgende Zeiger wird in dem Fall verwendet, wenn der oder die davor angegebenen Zeiger nicht darstellbar sein sollten.

In der Dokumenttypdefinition des Elementes wurde ferner vermutlich vergessen anzugeben, dass das Element Animationselemente beinhalten kann, daher sind diese im Bedarfsfalle außerhalb zu notieren und das Element ist dann als Zielelement der Animation mittels href von XLink zu notieren. Erlaubter Inhalt des Elementes sind daher nur title, desc und metadata. Als nicht direkt dargestellter Inhalt sollte cursor im Element defs notiert werden. Andere Gruppierungselemente als Elternelemente sind allerdings technisch nicht ausgeschlossen.

Attribute x und y

Mit den Attributen x und y wird im Koordinatensystem des Zeigers die Position festgelegt, auf die gezeigt wird. x für die x-Koordinate, y für die y-Koordinate. Der Wert ist für beide Attribute jeweils eine Koordinate. Die Attribute sind animierbar.

Für ein nicht angegebenes Attribut wird jeweils 0 angenommen.

Attribute von XLink, insbesondere href

Mit dem Attribut href von XLink wird die Graphik oder das Element referenziert, welches als Zeiger dienen soll. Der Wert ist eine IRI der Graphik, beziehungsweise ein Fragmentidentifizierer des Elementes. Das Attribut ist animierbar.

Damit sind auch die anderen Attribute von XLink verfügbar.

Mindestens PNG muss als Format für die Graphik interpretiert werden.

Beispiele cursor

PNG als Zeiger

Symbol als Zeiger

PNG als Zeiger
Der Zeiger wechselt alle 10s zwischen einem kreisartigen Kringel und einem Kreuz, die links oben dargestellt sind. Der Wechsel ist darunter dargestellt. Zudem wird die Position animiert.

Hier sind die PNGs gleich eingebettet, zudem als Erweiterung der Dokumenttypdeklaration. Es können natürlich auch ganz einfach externe Dateien verwendet wird, wenn kein Wert darauf gelegt wird, dass alles in einem Dokument verfügbar ist. Die Erweiterung der Dokumenttypdeklaration ist hier vorteilhaft, weil die IRI der Bilder aufgrund der Animation wiederholt werden, da lohnt sich wie hier eine Abkürzung einzuführen.

Symbol als Zeiger
Der Zeiger wechselt alle 10s zwischen zwei Symbolen, die links oben dargestellt sind. Der Wechsel ist darunter dargestellt. Zudem wird die Position animiert.

Der Vorteil von einem Symbol liegt natürlich in der so verfügbaren Vektorgraphik und damit der höheren Qualität. Auch kann das Symbol einfach im selben Dokument untergebracht werden. Das gilt natürlich auch für ein svg.

Interaktivität mit CSS

Mit den dynamischen Pseudoklassen ':hover', ':active' und ':focus' kann die Dekoration eines Dokumentes abhängig von einer Nutzerinteraktion modifiziert werden. Genauer, es kann angegeben werden, wie ein Element dekoriert werden soll, wenn der jeweilige Status angenommen wird.

Diese Pseudoklassen schließen sich nicht gegenseitig aus. Auf ein Element können mehrere davon gleichzeitig zutreffen.

CSS definiert nicht, welche Elemente sich in dem Status der jeweilige Pseudoklasse befinden können, oder wie ein Element in einen solchen Status gelangt oder ihn wieder verlässt. Das Verhalten kann also bei verschiedenen Darstellungsprogrammen bei der gleichen Aktion unterschiedlich ausfallen.

Pseudoklasse :hover


SVG
1.1	-	9	3	-	4	12	?	?

Beispiel mit :hover

Die Pseudoklasse :hover findet Anwendung, wenn der Nutzer ein Element zum Beispiel mit einem Zeigergerät zwar markiert, aber nicht aktiviert. Ein Darstellungsprogramm kann :hover anwenden, wenn der Mauszeiger über ein Element gezogen wird. Darstellungsprogramme, die keine interaktiven Medien präsentieren, interpretieren auch diese Pseudoklasse nicht. Einige Zeigegeräte wie eventuell Stifte, die an sich interaktiv sind, sind gegebenenfalls auch nicht geeignet, um den Status :hover hervorzurufen.

Beispiel:

<defs>
<linearGradient id="verlauf1" 
  x1="50%" x2="50%" y1="0%" y2="100%">
  <stop offset="0" stop-color="black"/>
  <stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="verlauf2" 
  x1="50%" x2="50%" y1="0%" y2="100%">
  <stop offset="0" stop-color="red"/>
  <stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="verlauf3" 
  x1="50%" x2="50%" y1="0%" y2="100%">
  <stop offset="0" stop-color="navy"/>
  <stop offset="2" stop-color="white"/>
</linearGradient>

<style type="text/css">
#r1{fill:url(#verlauf1)}
#r2{fill:url(#verlauf2)}
#r3{fill:url(#verlauf3)}

#r1:hover{fill:url(#verlauf2)}
#r2:hover{fill:url(#verlauf3)}
#r3:hover{fill:url(#verlauf1)}
</style>
</defs>

<rect width="300" height="100" 
  x="50" y="20" rx="10" id="r1" />
<rect width="300" height="100" 
  x="50" y="220" rx="10" id="r2"/>
<rect width="300" height="100" 
  x="50" y="420" rx="10" id="r3"/>

Oder etwas ausgeschmückter mit Rechtecken, Kreisen und Gruppen und Ausnutzung von Spezifitäten:
Beispiel mit :hover
Rechtecke und Kreise ändern ihre dekorativen Eigenschaften mit dem Status :hover

Pseudoklasse :active


SVG
1.1	-	9	3	-	4	?	?	?

Beispiel mit :active

Die Pseudoklasse :active findet Anwendung, während ein Element vom Benutzer aktiviert wird. Zum Beisiel könnte das der Fall sein, wenn der Nutzer die Maustaste drückt bis er sie wieder loslässt.

Beispiel mit :active
Rechtecke und Kreise ändern ihre dekorativen Eigenschaften mit dem Status :active

Pseudoklasse :focus


SVG
1.1	-	-	-	-	-	12	?	?

Beispiel mit :focus

Die Pseudoklasse :focus findet Anwendung, während ein Element den Fokus hat, es also vom Nutzer ausgelöste Ereignisse akzeptiert, also in Ereignissen gesprochen zwischen 'focusin' und 'focusout', etwa vom Zeigergerät oder von der Tastatur ausgelöst, zum Beispiel bei einer Markierung.

Beispiel mit :focus
Rechtecke und Kreise ändern ihre dekorativen Eigenschaften mit dem Status :focus