SVG fournit un élément 'a', analogue à l'élément 'a' vf. de HTML, pour l'indication de liens (appelés également hyperliens ou liens Web). SVG s'appuie sur XLink ([XLink]) pour toutes les définitions de lien.
SVG 1.0 ne requiert des agents utilisateurs que la gestion de la notion des liens simples de XLink. Chaque lien simple associe exactement deux ressources, l'une locale l'autre distante, avec une relation allant de la première vers la dernière.
On définit un lien simple pour chaque élément rendu séparé qui est contenu dans l'élément 'a' ; ainsi quand l'élément 'a' contient trois éléments 'circle', un lien est créé pour chaque cercle. Pour chaque élément rendu dans un élément 'a', l'élément rendu donné est la ressource locale (l'ancre source pour le lien).
La ressource distante (la destination du lien) est définie par un URI spécifié par l'attribut XLink href sur l'élément 'a'. La ressource distante peut être toute ressource Web (par exemple, une image, un clip vidéo, un son, un programme, un autre document SVG, un document HTML, un élément du document courant, un élément dans un document différent, etc.). Lors de l'activation de ces liens (en cliquant avec la souris, au travers d'une entrée au clavier, par commande vocale, etc.), les utilisateurs peuvent visiter ces ressources.
L'exemple link01 assigne un lieu à une ellipse.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 5 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple link01 - un lien sur une ellipse </desc> <rect x=".01" y=".01" width="4.98" height="2.98" fill="none" stroke="blue" stroke-width=".03"/> <a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Si on visionne le fichier SVG ci-dessus avec un agent utilisateur qui gère SVG et HTML, alors un clic sur l'ellipse
entraînera le remplacement de la fenêtre ou du cadre courants par la page d'accueil du W3C.
<!ENTITY % aExt "" > <!ELEMENT a (#PCDATA|desc|title|metadata|defs| path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|view|switch|a|altGlyphDef| script|style|symbol|marker|clipPath|mask| linearGradient|radialGradient|pattern|filter|cursor|font| animate|set|animateMotion|animateColor|animateTransform| color-profile|font-face %ceExt;%aExt;)* > <!ATTLIST a %stdAttrs; xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink" xlink:type (simple) #FIXED "simple" xlink:role %URI; #IMPLIED xlink:arcrole %URI; #IMPLIED xlink:title CDATA #IMPLIED xlink:show (new|replace) 'replace' xlink:actuate (onRequest) #FIXED 'onRequest' xlink:href %URI; #REQUIRED %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; target %LinkTarget; #IMPLIED > |
Définitions des attributs :
Sur Internet, les ressources sont identifiées par des URI (Uniform Resource Identifiers) [URI]. Par exemple, un fichier SVG nommé MonDessin.svg, situé à http://exemple.org, pourrait avoir l'URI suivant :
http://exemple.org/MonDessin.svg
Un URI peut également s'adresser à un élément particulier dans un document XML si on lui rajoute un identifiant de fragment d'URI. Un URI qui comprend un identifiant de fragment d'URI, consiste en un URI de base optionnel, suivi par un caractère « # », suivi par l'identifiant de fragment d'URI. Par exemple, on peut utiliser l'URI suivant pour spécifier l'élément dont l'ID est "Reverbere" dans le fichier MonDessin.svg :
http://exemple.org/MonDessin.svg#Reverbere
Comme un contenu SVG représente souvent une image ou un dessin de quelque chose, un besoin courant consiste à produire un lien dans une vue particulière du document, où la vue indique les transformations initiales, de manière à présenter un gros-plan sur une section particulière du document.
Pour le lien à une vue particulière d'un document SVG, l'identifiant de fragment d'URI doit être un identifiant de fragment SVG correctement formé. Un identifiant de fragment SVG définit le sens de la partie « sélecteur », ou « identifiant de fragment », des URI qui localisent les ressources de type MIME "image/svg+xml".
Un identifiant de fragment SVG peut prendre trois formes :
On définit un identifiant de fragment SVG comme suit :
SVGFragmentIdentifier ::= BareName | XPointerIDRef | SVGViewSpec BareName ::= XML_Name SVGViewSpec ::= 'svgView(' SVGViewAttributes ')' SVGViewAttributes ::= SVGViewAttribute | SVGViewAttribute ';' SVGViewAttributes SVGViewAttribute ::= viewBoxSpec | preserveAspectRatioSpec | transformSpec | zoomAndPanSpec | viewTargetSpec viewBoxSpec ::= 'viewBox(' ViewBoxParams ')' preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')' transformSpec ::= 'transform(' TransformParams ')' zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')' viewTargetSpec ::= 'viewTarget(' ViewTargetParams ')'
dans laquelle définition :
xpointer(id('MaVue'))
;Les espaces ne sont pas admis dans les spécifications de fragment ; c'est pourquoi on utilise des virgules pour séparer les valeurs numériques dans une spécification de vue SVG (par exemple, #svgView(viewBox(0,0,200,200))) comme on utilise des points-virgules pour séparer les attributs (par exemple, #svgView(viewBox(0,0,200,200);preserveAspectRatio(none))).
Quand un document source effectue un lien vers un document SVG via un élé ancre (i.e., un élément <a href=...>) en HTML [HTML4 vf.] ou via une spécification XLink [XLINK], alors l'identifiant de fragment SVG spécifie la vue initiale dans le document SVG comme suit :
L'élément 'view' est défini comme suit :
<!ENTITY % viewExt "" > <!ELEMENT view (%descTitleMetadata;%viewExt;) > <!ATTLIST view %stdAttrs; externalResourcesRequired %Boolean; #IMPLIED viewBox %ViewBoxSpec; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' zoomAndPan (disable | magnify) 'magnify' viewTarget CDATA #IMPLIED > |
Définitions des attributs :
Les interfaces suivantes sont définies ci-dessous : SVGAElement, SVGViewElement.
L'interface SVGAElement correspond à l'élément 'a'.
interface SVGAElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedString target; };
L'interface SVGViewElement correspond à l'élément 'view'.
interface SVGViewElement : SVGElement, SVGExternalResourcesRequired, SVGFitToViewBox, SVGZoomAndPan { readonly attribute SVGStringList viewTarget; };