SVG/ Verweise

SVG:

Verweise

SVG stellt mit dem Element a und Attributen aus dem Namensraum von XLink auch die Funktionalität von Verweisen (englisch: hyperlink) zur Verfügung. Dies kann sowohl dazu verwendet werden, Animationen zu starten als auch andere Dokumente aufzurufen oder einen anderen Ausschnitt oder allgemeiner eine transformierte Darstellung desselben Dokumentes zu betrachten.

Ferner sieht SVG vor, dass das Darstellungsprogramm Funktionalitäten bereitstellt, mit denen der Betrachter die Art der Anzeige beeinflussen kann. Die Anzeige kann vergrößert oder verkleinert werden und bei einem Ausschnitt kann dieser verschoben werden. Eine Drehung der Darstellung kann ebenfalls möglich sein.

URI, IRI

Im internet werden Ressourcen mit vereinheitlichen Identifizierern verfügbar gemacht, auch bekannt als URI (englisch: Unified Resource Identifier) oder IRI (englisch: Internationalized Resource Identifier). Im folgenden wird vereinfachend die Bezeichnung IRI für alle Möglichkeiten verwendet.

Zum Beispiel etwa:

http://example.com/Bild.svg

IRIs sind etwas allgemeiner als URIs, IRIs werden allgemein aus Zeichen aus dem UNICODE-Bereich konstruiert, während die erlaubten Zeichen in URIs weiter eingeschränkt sind. Aus Autorensicht sind URIs also eher die sicherere Wahl, weil sie weniger Anforderungen an das Darstellungsprogramm bei der Verarbeitung stellen und auch von älteren Programmen korrekt interpretiert werden. In SVG 1.1 sind auch nur URIs vorgesehen, in SVG tiny 1.2 auch IRIs.

Externe Ressourcen referenzieren

http://example.com/Bild.svg

ist eine absolute Angabe einer IRI. Die besteht aus einer Angabe des Protokolles, hier 'http', gefolgt von Angaben zur Identifikation der Ressource. Die Angaben können vom Protokoll abhängen. Für 'http' folgt hier nach '://' eine Domäne (englisch: domain) 'example.com', vereinfacht der Name oder auch die internet-Protokoll-Adresse des Rechners, auf dem die Datei zu finden ist, dann mit einem Schrägstrich abgeteilt eine Pfadangabe zur Datei. Hier ist dies einfach '/Bild.svg'. Liegt die Datei in einem Unterverzeichnis 'svg', wäre die Pfadangabe '/svg/Bild.svg'.

Die Pfadangabe entspricht in der Regel nicht dem absoluten Pfad auf dem referenzierten Rechner. Dort ist in der Regel in der Konfiguration des Programmes, welches Anfragen zum Protokoll 'http' beantwortet, ein geeignetes Wurzelverzeichnis angegeben, auf welches sich die Pfadangabe bezieht.

Relative Angaben sind ebenfalls möglich, optional auch in Kombination mit xml:base. Das Darstellungsprogramm setzt relative Angaben dann entsprechend zu einer IRI zusammen. Neben der kürzeren Adresse hat dies auch den Vorteil, dass es einfacher ist, eine Gruppe zusammengehöriger Dokumente auf einen anderen Rechner zu verschieben, ohne die Angaben zur IRI in den Dateien ändern zu müssen.

Bei der Verwendung von xml:base gibt dieses Attribut eine IRI an, mit welcher eine relative Angabe vervollständigt wird, jeweils durch Anhängen der relativen Angabe an den Attributwert.

Also

http://example.com/Bild.svg

entspricht mit

xml:base="http://example.com/"

der Angabe

Bild.svg

Im Weiteren sei angenommen, dass xml:base nicht gesetzt ist.

Liegt das Dokument Bild.svg im Hauptverzeichnis des servers example.com, so ist vorheriges Beispiel äquivalent zu:

/Bild.svg

Liegen referenzierendes und referenziertes Dokument in einem Verzeichnis, so reicht einfach die Angabe des Dateinamens:

Bild.svg

oder

./Bild.svg

'.' steht immer für das aktuelle Verzeichnis.
'..' steht für das übergeordnete Verzeichnis.

Angenommen in einem Dokument erreichbar unter

http://example.com/Verzeichnis/Beispiele/Bild.svg

soll ein Dokument A.svg im Unterverzeichnis 'SVGs' des Verzeichnisses 'Beispiele' referenziert werden, so kann zum Beispiel angegeben werden:

http://example.com/Verzeichnis/Beispiele/SVGs/A.svg

SVGs/A.svg

./SVGs/A.svg

/Verzeichnis/Beispiele/SVGs/A.svg

Soll hingegen ein Dokument B.svg in dem Verzeichnis 'Verzeichnis' referenziert werden, so kann angegeben werden:

http://example.com/Verzeichnis/B.svg

../B.svg

/Verzeichnis/B.svg

Interne Fragmente referenzieren

Ferner ist es möglich, auf ein Element im selben Dokument zu verweisen, wofür Fragmentidentifizierer verwendet werden. Diese bestehen aus einem # gefolgt von einem Wert eines Attributes id oder xml:id im selben Dokument, zum Beispiel:

#Beispiel

Fragmente in externen Ressourcen referenzieren

Beide Methoden können auch kombiniert werden, um ein Element in einem anderen Dokument zu identifizieren, zum Beispiel:

http://example.com/Bild.svg#Beispiel

oder

SVGs/A.svg#Beispiel

Im engeren Sinne gehört das # und alles dahinter nicht mehr zur IRI selbst. In dieser Konstruktion sind also weder Sonderzeichen zu maskieren, noch gibt das Darstellungsprogramm diesen Teil überhaupt bei einem Aufruf weiter. Bei obigen Beispielen wird also nur der Teil vor dem # für eine Anfrage an einen Server oder ein Dateisystem verwendet, der Teil dahinter wird vom Darstellungsprogramm zur Auffindung des angegebenen Fragmentes in der aufgerufenen Datei verwendet.

Methoden der Referenzierung

In SVG tauchen zwei verschiedene Methoden auf, um IRIs zu notieren.

Zum einen erfolgt dies direkt als Wert des Attributes href aus dem Namensraum XLink, zum Beispiel, sofern das Präfix des Namensraumes zuvor als 'xlink' festgelegt wurde:

xlink:href="http://example.com/Bild.svg"

Die andere Methode ist die sogenannte funktionale IRI, die aus CSS stammt und bei Eigenschaftswerten Anwendung findet. Der Wert beginnt dann mit 'url(' und endet mit ')'. Dazwischen steht die IRI.

Zum Beispiel so:

fill="url(#Farbverlauf1)"

Möglichkeiten und Einschränkungen

Je nach Attribut gibt es Einschränkungen, welche Typen von IRIs notiert werden dürfen. Die jeweilige Definition des referenzierenden Elementes kann auch eine Angabe dazu enthalten, welche Formate die Dokumente haben dürfen, auf welche verwiesen wird. Teils ist auch angegeben, ob nur komplette Dateien oder nur Fragmente referenziert werden dürfen. Animationselemente dürfen etwa nur Fragmentidentifizierer enthalten, verweisen also immer auf Elemente im selben Dokument.

Mit Ausnahme von Bildern (Element image) und Verweisen (Element a) sind in SVG tiny 1.1 alle Referenzierungen lokal, die Ressourcen sind also im selben Dokument zu finden. Generell können Elemente wie image, audio, video, animation und foreignObject nur komplette externe Dokumente referenzieren.

In SVG tiny 1.2 wird dies Prinzip der Lokalität etwas gelockert. use darf wie auch in SVG 1.1 externe Fragmente referenzieren, allerdings keine anderen svg-Elemente und keine Fragmente mit Skripten, Verweise auf Animationen und auch keine weiteren use oder animation-Elemente, welche externe Referenzen haben. prefetch und font-face-uri dürfen sowohl interne als auch externe Ressourcen referenzieren.

Eigenschaften wie fill oder stroke dürfen in SVG tiny 1.2 keine externen Maldienste referenzieren, das Element mpath auch keine externen Pfade. Navigationsattribute sind in SVG tiny 1.2 auch nur lokal gemeint.

Eine direkte oder indirekte Selbstreferenzierung, die also zu einer rekursiven Schleife führen täte, ist ein Fehler. Bei komplizierteren Schleifen kann allerdings der Abbruch der Interpretation abhängig vom Darstellungsprogramm sein, je nachdem, wann diesem die Schleife auffällt.

Pseudoprotokoll 'data'

Das Pseudoprotokoll 'data' kann bei einigen Elementen verwendet werden, um Inhalte direkt in den Verweis einzubetten.

Sinngemäß sieht das wie folgt aus:

xlink:href="data:image/png;base64,-Dokumentdaten-"

Anwendbar ist das Pseudoprotokoll bei a, image, audio, video, animation, foreignObject, script, handler, font-face-uri.

Die IRI beginnt mit der Angabe des Protokolles 'data', gefolgt von einem Doppelpunkt ':'. Dann folgt die Angabe des Inhaltstyps (ehemals MIME-Typ) des einzubettenden Dokumentes, zum Beispiel 'image/svg+xml' für ein SVG-Dokument, 'image/png' für ein PNG-Dokument, 'image/jpeg' für ein JPEG-Dokument, 'application/xhtml+xml' für ein XHTML-Dokument etc. Dann folgt ein Semikolon ';'.

Bei Textdateien kann dann eine Angabe zur Kodierung des Textes erfolgen, etwa 'charset=iso-8859-1', gefolgt von einem Komma ',' und dann den Daten des Dokumentes. Beispiel:

xlink:href="data:image/svg+xml;charset=iso-8859-1,-Dokumentdaten-"

oder

xlink:href="data:application/xhtml+xml;charset=utf-8,-Dokumentdaten-"

Da in einer IRI einige typisch in Dokumenten auftauchende Zeichen nicht einfach so auftreten dürfen, sind diese entsprechend zu maskieren (englisch: URL encode). Ein Konflikt tritt zum Beispiel bereits auf, wenn in den Dokumentdaten die gleichen Anführungszeichen auftreten wie jene, mit denen der Attributwert umschlossen wird. Auch Leerzeichen sind in IRIs problematische Zeichen.

Mit der base64 gibt es eine weitere effektive Methode, um eine geeignete Maskierung vorzunehmen. In dem Falle wird hinter der Angabe des Inhaltstyps und des Semikolons 'base64' angegeben, gefolgt von einem Komma und den Dokumentdaten.

Exkurs: Hinweise zur Kodierung für das Pseudoprotokoll 'data'

Serverseitige Skriptsprachen wie PHP enthalten geeignete Funktionen sowohl für base64 als auch für 'URL encode'.

Steht etwa in der PHP-Variablen $Beispiel ein mit base64 zu kodierendes Dokument, so kann verwendet werden:

$ausgabe=base64_encode($Beispiel);

Oder aber sofern eine URL-Kodierung ausreicht:

$ausgabe=urlencode($Beispiel);

Mittels perl kann eine Datei 'Beispiel.svg' wie folgt mit base64 kodiert werden, wobei dann die Ausgabe 'Beispiel.svg.base64' ist:

perl -MMIME::Base64 -0777 -ne "print encode_base64($_)" <Beispiel.svg >Beispiel.svg.base64

Das Ergebnis Beispiel.svg.base64 kann dann in die direkt in die IRI eingefügt werden.

Eine weitere Möglichkeit bei Unix/Linux-Betriebssystemen besteht darin, einfach in der Konsole einzugeben:

base64 Beispiel.svg >Beispiel.svg.base64

SVG mit per data eingebettetem PNG mit base64-Kodierung

Eine weitere einfache Möglichkeit besteht darin, dass email-Programme ebenfalls die base64-Kodierung beherrschen. Es reicht also, sich selbst ein Dokument zuzuschicken und vom email-Programm zuvor solch eine Kodierung vornehmen zu lassen und dann das Ergebnis aus dem Quelltext der email zu kopieren.

Anhand des Quelltextes des Beispieles rechts neben diesem Abschnitt wird deutlich, warum das Einbetten von Pixelgraphik in SVG nur von eingeschränktem Nutzen ist. Einmal abgesehen davon, dass Pixelgraphik meist ein Problem aufwirft, wenn die Graphik skaliert wird, wird auch der Quelltext recht unübersichtlich und die Dateigröße schnell recht umfangreich, auch weil eine mit base64 kodierte Datei im Schnitt etwas größer ist als die unkodierte Datei.

Attribute von XLink

Für jene Elemente, welche eine Funktionalität mit XLink verfügbar machen, sind eine Reihe von Attributen aus dem Namensraum XLink verwendbar. Teilweise sind die Attributwerte in SVG festgelegt, eine explizite Angabe ist daher in bei einigen Attributen nicht notwendig oder gar komplett überflüssig. Um die Funktionalität von XLink zu gewährleisten, sind diese Attribute aber explizit in SVG, gegebenenfalls samt Wertvorgaben festgelegt.

Attribut type

Das Attribut type legt den Typ des Verweises fest. SVG verwendet nur den einfachen Typ von Verweisen im Sinne von XLink, insofern ist auch nur die einfache Funktionalität von XLink verfügbar. Der Wert von type ist folglich festgelegt auf 'simple'. Eine explizite Angabe ist nicht notwendig.

Das Attribut ist nicht animierbar.

Attribut role

Der Wert des Attributes ist eine IRI zu einem Dokument, welches die Rolle oder Funktion des Dokumentes oder Fragmentes beschreibt, auf welches verwiesen wird. Die Angabe ist optional. Hinsichtlich der Maschinenlesbarkeit siehe auch die Anmerkung zu Attribut arcrole.

Das Attribut ist nicht animierbar.

Attribut arcrole

Der Wert des Attributes ist eine IRI zu einem Dokument, welches die Rolle oder Funktion des Verweises zum Dokument oder Fragment beschreibt, auf welches verwiesen wird. Die Angabe ist optional.

Das Attribut ist nicht animierbar.

Die Funktion des Verweises ist in SVG vielfach durch die Definition des Elementes impliziert, in welchem das Attribut steht. Bei Animationselementen hat der Verweis offenbar die Funktion, das Animationsziel zu identifizieren. Dies muss nicht explizit angegeben werden. Es mag allerdings Fälle geben, wo Details relevant sind, etwa die Unterscheidung bei einem Verweis mit dem Element a, welche eine Relation (Attribut rel) zum Ausdruck bringen soll - Werte wie Person, Mutter, Tochter hängen davon ab, was auf wen zu welchem Zwecke verweist. In solchen Fällen kann sich eine entsprechende Angabe der IRI eines definierenden Dokumentes lohnen. Die IRI einer bekannten Definition kann selbst ähnlich wie IRIs bei RDFa als maschinenlesbare Definition aufgefasst werden. Sofern die Definition im per arcrole (oder auch role) angegebenen Dokument also den interpretierenden Programm bekannt ist, kann dies gegebenenfalls auch Funktionalitäten und Hilfen bereitstellen, um mit der definierten Rolle umzugehen. Es kann sich aber auch nur um eine Definition der Bedeutung im semantischen Sinne handeln.

Attribut title

Das Attribut gibt dem Verweis einen Titel, ähnlich dem gleichnamigen Attribut in (X)HTML. Der Wert des Attributes ist eine Zeichenkette, die den Titel oder auch eine Nutzerhilfe zum Verweis repräsentiert. Titel und Nutzerhilfe beziehen sich also auf den Verweis selbst, nicht direkt auf das Verweisziel. Die Angabe ist optional.

Das Attribut ist nicht animierbar.

Attribut show

Das Attribut gibt an, wie das Verweisziel angezeigt werden soll. Bei verschiedenen Elementen ist der Wert impliziert, zum Beispiel wird das Verweisziel mit image, audio, video, animation und foreignObject eingebunden. Bei Animationselementen liegt eine andere, in XLink nicht diskutierte Funktionalität vor, welche in SVG definiert ist. Entsprechend kann ein Darstellungsprogramm eine explizite Angabe ignorieren, falls diese im gegebenen Zusammenhang keinen Sinn ergibt. Sofern sie Sinn ergibt, soll die Angabe aber beachtet werden. Die Angabe ist optional.

Folgende Werte sind gemäß XLink möglich:

new: Das Verweisziel soll in einem neuen Anzeigebereich präsentiert werden
replace: Das Verweisziel soll im gerade aktuellen Anzeigebereich präsentiert werden (bei verschachtelten Dokumenten etwa XHTML in foreignObject in SVG in XHTML (frameset) etc ist das nicht eindeutig, welcher davon aktuell ist).
embed: Das Verweisziel soll in einem eigenen Anzeigebereich in das aktuelle Dokument eingebettet werden, wie etwa beim Element image
other: Die Funktion des Elementes bestimmt die Art der Anzeige, dies ist bei SVG das typische Verhalten.
none: Keine Angabe oder direkte Anzeige des Verweiszieles.

In SVG 1.1 sind als Möglichkeiten nur 'new' und 'replace' angegeben, bezogen auf die Verwendung mit dem Element a.

Das Attribut ist nicht animierbar.

Attribut actuate

Das Attribut legt den gewünschten Zeitablauf fest, in dem das Verweisziel darzustellen ist. Effektiv wird dies bei SVG impliziert. Formal wird der Wert 'onLoad' für Element wie image oder foreignObject impliziert, bei denen der Inhalt direkt angezeigt wird. Bei Elementen wie audio, video oder animation trifft 'other' zu, weil das Verhalten in SMIL und SVG tiny festgelegt ist.

Das Wert für a ist 'onRequest'.

Das Attribut ist nicht animierbar.

Attribut href

Mit href wird die IRI des Verweiszieles, der Resource angegeben.

Das Attribut ist zumeist animierbar. Sofern das nicht zutrifft, wie etwa bei mpath, ist dies bei der Elementdefinition vermerkt.

Element a


SVG
1.1	1.7	8	3	3.2	4	?	?	?

Entsprechend dem Element a in (X)HTML definiert SVG das Element a für Verweise auf Dokumentfragmente und insbesondere auf andere Dokumente. Um die Funktionalität eines Verweises bereitzustellen, werden Attribute von XLink verwendet. Die von historischen Varianten von HTML bekannte Funktionalität eines Ankers stellt das Element a nicht speziell bereit, das wird wie auch in moderneren Varianten von (X)HTML mit einem Fragmentidentifizierer und dem Attribut id beziehungsweise xml:id bei jedem Element bereitgestellt.

Ansonsten ist das Element a in SVG ein Gruppierungselement wie das Element g auch. Die darin darzustellenden Elemente werden dazu verwendet, um den Verweis auszulösen (zum Beispiel durch Anklickern mit einem Zeigergerät).

In SVG 1.1 ist es (anders als in (X)HTML) erlaubt, a-Elemente in anderen a-Elementen zu verschachteln. Gewinnen tut dann gemäß Malermodell jenes Element, welches am weitesten innen in der Verschachtelung liegt. In SVG tiny 1.2 kann das Element a alle Elemente enthalten, die auch sein Elternelement enthalten darf, mit Ausnahme des Elementes a selbst. Eine Verschachtelung ist also nicht korrekt und sollte allerdings auch bei SVG 1.1 verbleiben, um Komplikationen zu vermeiden.

Es gibt durch das Darstellungsprogramm meist keine besonderen Hinweise darauf, dass ein Verweis verfügbar ist. Insofern sollte der Autor durch Dekoration und Beschreibung selbst dafür sorgen, dass dem Nutzer klar ist, wo Verweise zu finden sind (etwa mit einem dünnen blauen Strich um die betroffenen Elemente und einer eindeutigen Beschreibung in der Textalternative).

SVG tiny 1.2 legt genauer fest, dass Darstellungsprogramme erst auf eine Verweisfunktionalität mit einem visuellen Indikator hinweisen sollen, wenn das entsprechende Element im Bereich etwas eines Zeigergerätes ist oder im Fokus ist. Oft ändert sich etwa die Darstellung des Zeigers zu einer zeigenden Hand über einem Verweis.

Sofern CSS verwendet wird, ergibt sich natürlich auch mit den Pseudoklassen :link und :visited eine Möglichkeit für Autoren, auf die Erscheinung der Indikation eines Verweises Einfluss zu nehmen.

Attribute von XLink

Für das Element a sind die beschriebenen Attribute von XLink verfügbar. Die für a besonders relevanten Attribute von XLink sind href, role, title und show.

Mit href wird das Verweisziel angegeben. Der Wert ist eine IRI. href ist animierbar.

Mit title kann ein Titel oder eine Nutzerhilfe für den Verweis als einfacher Text als Attributwert angegeben werden.

Mit role kann ein Verweis zu einem Dokument bereitgestellt werden, welches die Rolle oder Funktion des Verweiszieles beschreibt. Dies kann insbesondere relevant sein, wenn das Verweisziel in einem Format ohne Textalternative ist. Eine weitere Relevanz ergibt sich, wenn die Funktion des Verweiszieles eine andere ist, als der Inhalt des Verweiszieles selbst vermuten lässt.

Mit show mit den möglichen Werten 'new' oder 'replace' kann angegeben werden, ob das Verweisziel in einem neuen Anzeigebereich dargestellt werden soll ('new') oder ob das verweisende Dokument ersetzt werden soll ('replace'). Da bei komplizierteren Verschachtelungen von Dokumente mehr als diese Möglichkeiten gibt, bietet das Attribut target eine bessere Alternative.

Attribut target

Das Attribut target gibt an, in welchem Anzeigebereich der referenzierte Inhalt angezeigt werden soll. Sofern sowohl show von XLink als auch target angegeben sind, hat target Vorrang. Das Element ist analog zum gleichnamigen von (X)HTML definiert.

Mögliche Werte sind zum einen die in (X)HTML reservierten Schlüsselwörter, zum andere Namen eines Rahmens, (englisch: frame) im Sinne von (X)HTML oder einer ähnlichen Konstruktion. Die reservierten Schlüsselwörter sind:

_replace: Das aktuelle SVG-Bild wird durch den referenzierten Inhalt im selben rechteckigen Bereich desselben Rahmens ersetzt
_self: Das aktuelle SVG-Bild wird durch den referenzierten Inhalt im selben Rahmen ersetzt. Es ersetzt also den gesamten Inhalt des Rahmens, nicht unbedingt nur das SVG-Bild (Voreinstellung)
_parent: Der direkte Elternrahmen wird ersetzt. Sofern es den nicht gibt, ist das Verhalten das gleiche wie für _self
_top: Der komplette Fensterbereich oder Bereich des Reiters (englisch: tab) wird ersetzt, samt aller Rahmen
_blank: Der Inhalt wird in einem neuen Fenster oder Rahmen dargestellt, soweit dies technisch möglich ist, wenn nicht, erfolgt das Verhalten von _top

Der alternativ angebbare Name richtet sich nach den vorhandenen Namen von Rahmen und ähnlichen Konstruktionen. Diese beginnen in der (X)HTML Konvention mit einem Buchstaben. Jedenfalls ist das '_' als erstes Zeichen reserviert, '_new' ist also kein erlaubter Wert.

SVG selbst stellt keine Rahmen bereit. Im Sinne von SVG stellen aber object oder img von (X)HTML rechteckige Bereiche innerhalb eines Rahmens dar, wie für '_replace' anwendbar. Wird das SVG-Dokument also so in ein (X)HTML-Dokument eingebettet, so wird mit '_replace' nur das SVG-Dokument ersetzt, mit '_self' auch das (X)HTML-Dokument. Der Wert '_replace' ist neu in SVG tiny 1.2 und schließt eine Lücke der HTML4-Definition, bei der noch nicht davon ausgegangen wurde, dass Bilder auch Verweise enthalten können.

Das Attribut target ist animierbar.

Beispiele Element a

Ein Verweis, welcher eine Ellipse, beschreibenden Text und einen Kreis umschließt, sieht zum Beispiel wie folgt aus:

<a xlink:href="http://de.wikibooks.org/wiki/SVG#Inhalt"
   xlink:title="Verweis auf externes Fragment, neues Fenster mit target"
   target="_blank">
<ellipse cx="300" cy="400" rx="300" ry="30" fill="#afa" stroke="blue" />
<text x="300" y="410">wikibook: Inhaltsverzeichnis zu SVG</text>
<circle cx="650" cy="400" r="10" fill="#0a0" stroke="blue" />
</a>

Alle drei Kindelemente sind zum Aktivieren des Verweises geeignet, egal wo sie auf der Zeichenfläche positioniert sind. Das geht, sofern sie nicht durch andere Elemente verdeckt werden, die ein Aktivieren oder Anklickern selbst registrieren. Auch wenn die Elemente nicht dargestellt sind, ist der Verweis nicht aktivierbar, wenn sie nur unsichtbar oder transparent sind, dann schon. Auch pointer-events kann die Aktivierbarkeit beeinflussen.

Element a

Element a
Einige Beispiele zur Verwendung von Verweisen auf externe Dokumente und Dokumentfragmente, solche, welche per Pseudoprotokoll data: eingebettet wurden, und interne Fragmente.

Die blau umrandeten Objekte stellen jeweils eine Verweisfunktionalität bereit.

Verweise auf Inhalte in SVG-Dokumenten


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

In SVG ist es möglich, auf bestimmte Teile von SVG-Dokumenten zu verweisen.

Da der referenzierte Teil ein Bereich einer graphischen Darstellung ist, ist es erforderlich, einen gewissen Ausschnitt festzulegen, der dargestellt werden soll. Dies kann zum einen durch eine spezielle Konstruktion in der IRI erfolgen als in SVG 1.1 auch durch eine Vorgabe mit einem Element view. Zudem kann ein einfacher Fragmentidentifizierer angegeben werden. Das entsprechende Element soll dann zentriert werden.

Die Darstellung in einem gewissen Ausschnitt erfolgt durch Angabe eines '#svgView', mit dem analog zur Angabe eines Fragmentidentifizierers ein darzustellender Bereich oder Ausschnitt angegeben werden kann.

Sei 'Bild.svg' das Dokument, von dem ein Ausschnitt dargestellt werden sollte. Der entsprechende Fragmentidentifizierer sieht wie folgt aus:

http://Bild.svg#svgView(*)

Dabei steht * für eine weitere Zeichenfolge. In SVG tiny 1.2 entspricht dies einer Liste mit dem Attribut transform mit einer Liste von Transformationen in Klammern. Die Wirkung entspricht der einer Transformation eines Elementes g.

Zwei Listenelemente der Attributliste werden jeweils mit einem Semikolon getrennt. Die im jeweiligen Attribut notierten Transformationen dürfen anders als in der Notation im Dokument keine (unmaskierten) Leerzeichen enthalten, entsprechend wird immer ein Komma als Trennzeichen verwendet.

Einfaches tiny 1.2 Beispiel also etwa:

http://Bild.svg#svgView(transform(scale(2),skewX(13),rotate(60,30,-70)))

Auch möglich:

http://Bild.svg#svgView(transform(scale(2));transform(skewX(13),rotate(60,30,-70)))

Bei der Vollversion von SVG 1.1 sind weitere Angaben möglich. Neben transform(...) können dann auch die Parameter viewBox(...), preserveAspectRatio(...), zoomAndPan(...) und viewTarget(...) verwendet werden, mit entsprechenden Werten wie die korrespondierenden Attribute. Die Wirkung entspricht dabei der Anwendung derselben Attribute auf das Element view.

Beispiel (mit einem Fragmentidentifizierer ID):

http://Bild.svg#svgView(viewBox(-100,-200,500,600);preserveAspectRatio(none);viewTarget(ID))

Wird einfach ein Fragmentidentifizierer verwendet, so ergibt sich ein besonderes Verhalten, bei dem das identifizierte Element im Anzeigebereich zentriert wird. Passt die umgebende Box nicht in den Anzeigebereich des nächstgelegenen Elementes svg, wird eine entsprechende Skalierung vorgenommen. Ist die umgebende Box kleiner als der Anzeigebereich, wird nur zentriert und nicht skaliert.

Ist das Ziel des Verweises ein Animationselement oder allgemeiner ein zeitabhängiges Element, so löst dies eine Beginnzeit aus. Das ist näher beschrieben im Kapitel über Animation, im Abschnitt über den begin-Wert 'indefinite'.

In SVG 1.1 ist eine weitere Möglichkeit angegeben, einen Fragmentidentifizierer anzugeben. Dies ist eine Syntax gemäß XPOINTER. Da die Notation in SVG tiny 1.2 nicht mehr vorgesehen ist, empfiehlt es sich, darauf zu verzichten. Die Notation sieht wie folgt aus:

http://Bild.svg#xpointer(id('ID'))

und ist äquivalent zu:

http://Bild.svg#ID

Beispiel #svgView

Element a und #svgView

Element a und #svgView
Einige Beispiele zur Verwendung von #svgView, um verschiedene Darstellungen des Dokumentes zu erreichen. Die Konstruktionen können in der URI auch variiert werden. Auch bei Dokumenten, die der Betrachter nicht selbst verändern kann, kann er die Darstellung ändern, indem er einen #svgView an die URI des Dokumentes anhängt.

Die blau umrandeten Objekte stellen jeweils eine Verweisfunktionalität bereit.

Element view


SVG
1.1	1.7	9	-	-	4	9	?	?

Mit dem Element view kann in der Vollversion von SVG 1.1 eine (alternative) Darstellung des Dokumentes vordefiniert werden.

Wird in einem Verweis auf ein Element view verwiesen, so überschreibt dieses mit seinen die Anzeige betreffenden Attributen die entsprechenden des nächstgelegenen svg-Elternelement. Der entsprechend definierte Bereich wird angezeigt.

Da das Element selbst nicht angezeigt wird, wird es idealerweise im defs-Element jenes svg-Elementes notiert, für welches die Darstellung definiert werden soll.

Neben den allgemein verfügbaren Attributen können folgende Attribute notiert werden:

viewBox
preserveAspectRatio
zoomAndPan
viewTarget

Die Bedeutung und Wirkung der Attribute viewBox, preserveAspectRatio und zoomAndPan ist bereits für das Element svg im Kapitel Dokumentstruktur beschrieben. Dies ist entsprechend anwendbar.

Attribut viewTarget

Mit dem Attribut viewTarget kann ein Fragmentidentifizierer angegeben werden. Der Wert ist der Fragmentidentifizierer jenes Elementes, welches bei der Darstellung zentriert dargestellt werden soll.

Das Attribut ist nicht animierbar.

Beispiele für view

Eine einfache Anwendung, mit der verschiedene Bereiche einer Graphik dargestellt werden können. Die Objekte in den Bereichen bilden einen Navigationsring, es ist also möglich, per Verweis von einem Bereich zum nächsten zu springen. Alternativ kann der jeweilige Bereich natürlich auch mit einem externen Verweis ausgewählt werden.

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="-100 -100 1200 1200"
     xml:lang="de">

<title>Beispiel Element view</title>
<desc>
Variante A: blauer Kreis
Variante B: rotes Rechteck
Variante C: grüne Ellipse
Variante D: gelbe gekreuzte Linien, eine hervorgehoben
</desc>

<defs>
<view id="A" viewBox="-200 -200 400 400" />
<view id="B" viewBox="800 -200 400 400" zoomAndPan="disable" />
<view id="C" viewBox="-200 800 400 400" preserveAspectRatio="none" />
<view id="D" viewBox="800 800 400 400" viewTarget="L" />
</defs>

<a xlink:href="#B">
<circle r="50" fill="blue" />
</a>
<a xlink:href="#C">
<rect  x="950" y="-50" width="100" height="100" fill="red" />
</a>
<a xlink:href="#D">
<ellipse cy="1000" rx="60" ry="40" fill="green" />
</a>
<a xlink:href="#A">
<line id="L" x1="950" x2="1050" y1="950" y2="1050"
      fill="none"
      stroke="yellow" stroke-width="10" stroke-linecap="round" />
<line x2="950" x1="1050" y1="950" y2="1050"
      fill="none"
      stroke="yellow" stroke-width="10" stroke-linecap="round" />
</a>
</svg>

Element view

Entsprechend zum Angucken mit ein paar mehr Alternativen: Element view
Variante A: blauer Kreis
Variante B: rotes Rechteck
Variante C: grüne Ellipse
Variante D: gelbe gekreuzte Linien, eine hervorgehoben

Variante E: A+B
Variante F: A+C
Variante G: C+D
Variante H: B+D

Variante Z: Eingangsausschnitt

Im Bereich der Dekoration oder des Designs von internet-Seiten mit CSS-Hintergrundbildern ist in letzter Zeit mehr und mehr die Idee aufgekommen, lieber wenige archivartige Bilder zu verwenden, statt viele Einzelbilder, weil die Ladezeiten und die Effektivität des Seitenaufbaus auch von der Anzahl der zu ladenden Dateien abhängt, nicht nur von der Dateigröße. Für solche Anwendungen eignen sich #svgView und view natürlich ideal. Dies funktioniert dann prinzipiell auch bereits mit den Möglichkeiten von CSS2 und nicht erst mit ähnlichen Funktionalitäten von CSS3.

SVG: