Un fragment de document SVG consiste en un nombre quelconque d'éléments SVG contenu dans un élément 'svg'.
Un fragment de document SVG peut consister en un fragment vide (i.e., l'élément 'svg' n'a pas de contenu), ou encore en un fragment de document SVG très simple, avec un seul élément graphique SVG, tel un élément 'rect', et aller jusqu'à une collection complexe et profondément imbriquée d'éléments conteneurs et d'éléments graphiques.
Un fragment de document SVG peut exister de lui-même comme fichier auto-contenu ou ressource, auquel cas le fragment de document SVG est un document SVG, ou peut être incorporé en ligne comme fragment dans un document XML parent. Remarquer l'emploi des espaces de nommage XML pour indiquer l'appartenance des éléments 'svg' et 'ellipse' à l'espace de nommage SVG :
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
xmlns:svg="http://www.w3.org/2000/svg">
<!-- le contenu du parent ici -->
<svg:svg width="4cm" height="8cm">
<svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
</svg:svg>
<!-- ... -->
</parent>
L'illustration ci-dessous montre un exemple légèrement plus complexe (celui-ci contenant plusieurs rectangles) de document auto-contenu autonome :
<?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="4cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Quatre rectangles séparés
</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<!-- Montre le contour du canevas en utilisant un élément 'rect' -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Des éléments 'svg' peuvent survenir au milieu d'un contenu SVG. C'est grâce à cette faculté que les fragments de document SVG peuvent être incorporés dans d'autres fragments de document SVG.
Une autre vocation des éléments 'svg' au milieu d'un contenu SVG, c'est d'établir une nouvelle zone de visualisation (voir le chapitre L'établissement d'une nouvelle zone de visualisation.)
Dans tous les cas, pour complaire à la recommandation « Les espaces de nommage dans XML » [XML-NS vf.], on doit fournir une déclaration d'espace de nommage pour SVG, ainsi tous les éléments SVG sont identifiés comme appartenant à l'espace de nommage SVG. La fourniture de la déclaration de l'espace de nommage peut être effectuée des manières suivantes. Un attribut xmlns, sans préfixe d'espace de nommage, pourrait être spécifié pour un élément 'svg', ceci signifie que SVG est l'espace de nommage par défaut pour tous les éléments dans le rayon d'action de l'élément avec l'attribut xmlns :
<svg xmlns="http://www.w3.org/2000/svg"...> <rect .../> </svg>
Si on spécifie un préfixe d'espace de nommage sur l'attribut xmlns (par exemple,
xmlns:svg="http://www.w3.org/2000/svg"), alors l'espace de nommage correspondant n'est pas celui par défaut,
c'est pourquoi on doit assigner un préfixe d'espace de nommage explicite aux éléments :
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"...> <svg:rect .../> </svg:svg>
On peut spécifier les préfixes des espaces de nommage sur les éléments ancêtres (illustré dans l'exemple précédent). Pour plus d'information, se reporter à la recommandation « Les espaces de nommage dans XML » [XML-NS vf.].
Définition des attributs :
Quand un document SVG doit selon toute vraisemblance être appelé comme composant d'un autre document, l'auteur joindra volontiers un attribut viewBox à l'élément 'svg' le plus externe du document appelé. Cet attribut offre un moyen commode pour concevoir des documents SVG qui s'adaptent et tiennent dans une zone de visualisation arbitraire.
L'élément 'g' est un élément conteneur pour le regroupement d'éléments graphiques reliés.
Le regroupement des constructions, quand il est utilisé conjointement avec les éléments 'desc' et 'title', fournit une information au sujet de la structure et de la sémantique du document. Les documents de structure riche peuvent être rendus visuellement, en parole ou en braille, favorisant ainsi l'accessibilité.
Un groupe d'éléments, tout comme des objets individuels, peuvent recevoir une identité au moyen de l'attribut id. Les groupes nommés sont nécessaires pour plusieurs finalités telles que l'animation et les objets ré-utilisables.
Un exemple :
<?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="5cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Deux groupes, chacun avec deux rectangles
</desc>
<g id="group1" fill="red" >
<rect x="1cm" y="1cm" width="1cm" height="1cm" />
<rect x="3cm" y="1cm" width="1cm" height="1cm" />
</g>
<g id="group2" fill="blue" >
<rect x="1cm" y="3cm" width="1cm" height="1cm" />
<rect x="3cm" y="3cm" width="1cm" height="1cm" />
</g>
<!-- Montre le contour du canevas en utilisant un élément 'rect' -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Un élément 'g' peut contenir d'autres éléments 'g' imbriqués dans celui-ci, à une profondeur arbitraire. Ainsi, il est possible d'avoir ceci :
<?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="4in" height="3in"
xmlns="http://www.w3.org/2000/svg">
<desc>Les groupes peuvent s'imbriquer
</desc>
<g>
<g>
<g>
</g>
</g>
</g>
</svg>
Tout élément, qui n'est pas contenu dans un élément 'g', est traité (au moins conceptuellement) comme s'il était dans son propre groupe.
<!ENTITY % gExt "" > <!ELEMENT g (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;%gExt;)* > <!ATTLIST g %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; > |
SVG fait un usage étendu des références d'URI [URI] vers d'autres objets. Par exemple, pour remplir un rectangle avec un dégradé linéaire, vous définissez d'abord un élément 'linearGradient' et vous lui donnez une ID, comme dans :
<linearGradient id="MonDegrade">...</linearGradient>
Ensuite vous appelez le dégradé linéaire au travers de la valeur de la propriété 'fill' pour le rectangle, comme dans :
<rect style="fill:url(#MonDegrade)"/>
En SVG, les facilités suivantes autorise les références d'URI :
On définit les références d'URI selon l'une ou l'autre forme suivantes :
<URI-référence> = [ <URI-absolu> | <URI-relatif> ] [ "#" <ID-élément> ] -or-
<URI-référence> = [ <URI-absolu> | <URI-relatif> ] [ "#xpointer(id(" <ID-élément> "))" ]
dans lesquelles <ID-élément> représente l'ID de l'élément appelé.
(Remarquer que les deux formes ci-dessus (i.e., #<ID-élément> et #xpointer(id(<ID-élément>))) sont formulées dans une syntaxe compatible avec le « Langage de Pointeur XML (XPointer) » [XPTR]. Ces deux formulations de référence d'URI sont les seules formulations XPointer requises pour les agents utilisateurs SVG 1.0).
SVG reconnaît deux types de référence d'URI :
Les règles suivantes s'appliquent au traitement des références d'URI :
À l'exception de l'attribut xlink:href d'un élément 'a', certaines propriétés autoriseront des valeurs de repli au cas où la référence d'URI était invalide (voir les propriétés 'fill' et 'stroke') :
On recommande que les éléments appelés soient, autant que possible, définis dans un élément 'defs'. Parmi les éléments qui sont toujours référencés : 'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask', 'pattern', 'radialGradient' and 'symbol'. La définition de ces éléments dans un élément 'defs' favorise la compréhension du contenu SVG et ainsi favorise l'accessibilité.
On spécifie une référence d'URI dans un attribut href dans l'espace de nommage XLink [XLINK]. Si on utilise le préfixe par défaut 'xlink:' pour les attributs de l'espace de nommage XLink, alors l'attribut sera spécifié par xlink:href. La valeur de cet attribut est une référence d'URI vers la ressource désirée (ou le fragment de ressource).
La valeur de l'attribut href doit être une référence d'URI, comme défini dans [RFC2396], ou doit aboutir à une référence d'URI après que la procédure d'échappement décrite ci-dessous ait été appliquée. La procédure s'applique lors de la transmission de la référence d'URI à un module de résolution d'URI.
Certains caractères ne sont pas admis pour les références d'URI, même s'ils le sont en XML ; ces caractères non admis comprennent tous les caractères non-ASCII ainsi que les caractères exclus dans la section 2.4 de [RFC2396], sauf les caractères dièse « # » et pour-cent « % » ainsi que les crochets « [ ] », ré-introduits dans [RFC2732]. On doit échapper les caractères non admis comme suit :
Chaque caractère non admis est converti vers UTF-8 [RFC2279] sur un ou deux octets ;
Chaque octet correspondant à un caractère non admis est échappé selon le mécanisme
d'échappement d'URI (i.e., converti en %HH, où HH représente la
notation hexadécimale de la valeur de l'octet) ;
Le caractère original est remplacé par la séquence de caractères obtenue.
Comme il est contraignant pour une application de vérifier si une valeur est une référence d'URI, cette spécification suit la voie tracée par [RFC2396] sur ce point et n'impose aucun test de conformité aux applications SVG.
Si la référence d'URI est relative, sa version absolue doit être calculée par la méthode de [XML-Base vf.] avant usage.
Pour les localisations dans les ressources XML, le format de l'identifiant de fragment (s'il y en a un) utilisé dans la référence d'URI est spécifié par la spécification XPointer [XPTR].
On peut spécifier des attributs XLink supplémentaires pour fournir une information complémentaire sur la ressource appelée. Ces attributs supplémentaires sont inclus dans la DTD pour les entités suivantes. Les deux définitions d'entité diffèrent seulement par la valeur de l'attribut xlink:show, celle-ci étant other pour la première entité et embed pour la seconde. On emploie la première définition dans la plupart des définitions des éléments qui référencent des ressources. On utilise la seconde pour les éléments 'use', 'image' et 'feImage'.
<!ENTITY % xlinkRefAttrs "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 (other) 'other' xlink:actuate (onLoad) #FIXED 'onLoad'" > <!ENTITY % xlinkRefAttrsEmbed "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 (embed) 'embed' xlink:actuate (onLoad) #FIXED 'onLoad'" > |
Dans tous les cas, pour une conformité avec la recommandation « Les espaces de nommage dans XML » [XML-NS vf.], on doit fournir une déclaration d'espace de nommage XLink explicite toutes les fois que l'un des attributs ci-dessus est employé dans un contenu SVG. Une façon simple de réaliser cette déclaration est d'inclure la déclaration d'espace de nommage XLink dans l'attribut xmlns de l'élément 'svg' le plus externe pour le contenu utilisant des attributs XLink. Par exemple :
<svg xmlns:xlink="http://www.w3.org/1999/xlink"...> <image xlink:href="foo.png" .../> </svg>
L'élément 'defs' est un conteneur pour des éléments référencés. Pour des raisons de compréhension et d'accessibilité, on recommande, autant que possible, que les éléments référencés soient définis dans un élément 'defs'.
Le modèle de contenu pour 'defs' est le même que pour l'élément 'g' ; ainsi, tout élément qui peut être l'enfant d'un élément 'g' peut aussi être l'enfant d'un élément 'defs' et vice versa.
Les éléments descendants d'un élément 'defs' ne sont pas rendus directement ; ils sont empêchés de faire partie de l'arbre de rendu comme si l'élément 'defs' était un élément 'g' et la valeur de la propriété 'display' était none. Remarquer, cependant, que les descendants d'un élément 'defs' restent toujours présents dans l'arbre source et peuvent donc être appelés par d'autres éléments ; ainsi, cette valeur de la propriété 'display' de l'élément 'defs', ou l'un ou l'autre de ses descendants, n'empêche pas ces éléments d'être appelés par d'autres éléments.
<!ENTITY % defsExt "" > <!ELEMENT defs (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;%defsExt;)* > <!ATTLIST defs %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; > |
Pour offrir à certains agents utilisateurs l'opportunité d'une implémentation efficace dans des environnements de flux, on encourage les créateurs de contenu SVG à placer tous les éléments cibles de références d'URI locales dans l'élément 'defs' qui est un enfant direct de l'un des ancêtres de l'élément appelant. Par exemple :
<?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="8cm" height="3cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Des références d'URI locales dans l'ancêtre de l'élément 'defs'.</desc>
<defs>
<degradeLineaire id="Degrade01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</degradeLineaire>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm"
fill="url(#Degrade01)" />
<!-- Montre le contour du canevas en utilisant un élément 'rect' -->
<rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Dans l'exemple précédent, le dégradé linéaire est défini dans un élément 'defs' qui est l'enfant direct de l'élément 'svg', ce dernier étant un ancêtre de l'élément 'rect' qui appelle le dégradé linéaire. Ainsi, ce document se conforme aux directives.
Chaque élément conteneur ou élément graphique dans un dessin SVG peut fournir une chaîne de description 'desc' et/ou 'title', cettre description n'étant que textuelle. Lors du rendu du fragment de document courant en tant que document SVG sur un média visuel, les éléments 'desc' et 'title' ne sont pas rendus comme faisant partie du graphique. Cependant, les agents utilisateurs peuvent, par exemple, afficher l'élément 'title' comme une infobulle, quand le dispositif de pointage se déplace au-dessus d'éléments donnés. Des présentations alternatives, à la fois visuelles et auditives, sont possibles, pouvant afficher les éléments 'desc' et 'title' mais sans afficher les éléments 'path' ou d'autres éléments graphiques. On peut déjà obtenir ceci en utilisant une feuille de style différente (éventuellement une feuille de style utilisateur). Pour des documents fortement hiérarchisés et pour rechercher les références d'un élément 'use', il est parfois souhaitable de permettre à l'utilisateur de contrôler la profondeur de recherche vers un texte descriptif.
<!ENTITY % descExt "" > <!ELEMENT desc (#PCDATA %descExt;)* > <!ATTLIST desc %stdAttrs; %langSpaceAttrs; class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %StructuredText; > |
<!ENTITY % titleExt "" > <!ELEMENT title (#PCDATA %titleExt;)* > <!ATTLIST title %stdAttrs; %langSpaceAttrs; class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %StructuredText; > |
Voici un exemple. Dans une opération typique, l'agent utilisateur SVG ne rendrait pas les éléments 'desc' et 'title' mais rendrait le contenu restant dans l'élément 'g'.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4in" height="3in"
xmlns="http://www.w3.org/2000/svg">
<g>
<title>
Les ventes de la compagnie par région
</title>
<desc>
Voici un diagramme en barre qui montre les ventes par région
de la compagnie.
</desc>
<!-- Un diagramme en barre défini en tant que données vectorielles -->
</g>
</svg>
Les éléments de description et de titrage peuvent contenir un texte balisé d'autres espaces de nommage. Voici un autre exemple :
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
xmlns="http://www.w3.org/2000/svg">
<desc xmlns:mondoc="http://example.org/mondoc">
<mondoc:title>Voici un exemple de fichier SVG</mondoc:title>
<mondoc:para>La description globale emploie un balisage issu
de l'espace de nommage <mondoc:emph>mondoc</mondoc:emph>.</mondoc:para>
</desc>
<g>
<!-- L'image se place ici -->
</g>
</svg>
Les auteurs devraient toujours fournir un élément 'title' enfant de l'élément 'svg' le plus externe dans un document SVG. L'élément 'title' enfant d'un élément 'svg' sert à l'identification du contenu du fragment de document SVG en question. Comme les utilisateurs consultent souvent des documents hors-contexte, les auteurs devraient fournir des titres en rapport avec le contexte. Ainsi, au lieu d'un titre comme « Introduction », les auteurs devraient plutôt prodiguer un titre comme « Introduction à l'élevage des abeilles au Moyen-Âge ». Par souci d'accessibilité, les agents utilisateurs devraient toujours permettre au contenu d'un élément 'title', enfant de l'élément 'svg' le plus externe, d'être disponible pour les utilisateurs. Le mécanisme qui rélise ceci dépend de l'agent utilisateur (par exemple, comme une légende, un message parlé).
Les définitions de DTD de nombreux éléments de SVG (notamment, les éléments conteneurs et textuels) ne présentent aucune restriction sur l'emplacement et le nombre de sous-éléments 'desc' et 'title'. Cette souplesse n'est donnée que pour offrir un modèle de contenu cohérent pour les éléments conteneurs, parce que certains d'entre eux en SVG admettent un contenu mixte et parce que les règles de contenu mixte en XML [XML-MIXED vf.] ne permettent pas les restrictions voulues. Les versions ultérieures du langage SVG pourraient faire usage de représentations plus expressives que les DTDs, représentations qui permettront des règles de contenu mixte plus restrictives. On recommande fortement que les éléments 'desc' et 'title' n'apparaissent au plus qu'une fois comme enfant d'un élément donné et que ceux-ci apparaissent avant tous les autres éléments enfants (à l'exception, peut-être, des éléments 'metadata') ou d'un contenu textuel. Si les agents utilisateurs doivent choisir un traitement entre plusieurs éléments 'desc' ou 'title' (par exemple, quelle chaîne utiliser pour une infobulle), ils choisiront la premier d'entre eux.
L'élément 'symbol' est utilisé pour définir des objets gabarits graphiques qui peuvent être instanciés par un élément 'use'.
L'emploi d'éléments 'symbol' pour des graphiques, ré-utilisés plusieurs fois dans le même document, ajoute de la structure et du sens. Les documents de structure riche peuvent se rendre visuellement, en parole ou en braille et, ainsi, favoriser l'accessibilité.
Les distinctions clés entre les éléments 'symbol' et 'g' sont :
Les éléments 'marker' et
'pattern' sont apparentés à cet élément.
<!ENTITY % symbolExt "" > <!ELEMENT symbol (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;%symbolExt;)* > <!ATTLIST symbol %stdAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; viewBox %ViewBoxSpec; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' %graphicsElementEvents; > |
L'élément 'symbol' n'est jamais rendu directement ; son seul usage consiste à être appelé par un élément 'use'. La propriété 'display' ne s'applique pas à l'élément 'symbol' ; ainsi, l'élément 'symbol' n'est jamais rendu directement, même si la propriété 'display' est paramétrée à une autre valeur que none et il peut toujours être appelé, même si la valeur de la propriété 'display' de l'élément 'symbol', ou de l'un de ses ancêtres, est none.
Tout 'svg', 'symbol', 'g', éléments graphiques ou autre 'use' est un objet gabarit potentiel qui peut être ré-utilisé, ou « instancé », dans le document SVG via un élément 'use'. L'élément 'use' appelle un autre élément et indique, à un point donné dans le document, où le contenu graphique de cet élément doit être inclus/dessiné.
À la différence de l'élément 'image', l'élément 'use' ne peut appeler de fichiers entiers.
L'élément 'use' dispose des attributs optionnels x, y, width et height, qui sont utilisés pour la disposition du contenu graphique de l'élément appelé dans une région rectangulaire dans le système de coordonnées courant.
L'élément 'use' produit le même effet que si le contenu de l'élément appelé était complètement cloné dans un arbre DOM non exposé distinct, qui aurait l'élément 'use' pour parent et tous les éléments ancêtres de celui-ci comme ancêtres de plus haut niveau. Comme l'arbre DOM cloné n'est pas exposé, le Modèle Objet du Document (DOM) de SVG ne contient que l'élément 'use' et ses attributs. Le DOM de SVG ne montre pas le contenu de l'élément appelé comme étant les enfants de l'élément 'use'.
Pour les agents utilisateurs qui reconnaissent le style avec CSS, le clonage conceptuel en profondeur de l'élément référencé dans un arbre DOM non exposé recopie également les valeurs des propriétés, qui résultent de la cascade CSS [CSS2-CASCADE vf.], sur l'élément appelé et son contenu. Les sélecteurs CSS2 peuvent s'appliquer à l'élément original (celui appelé) parce qu'ils font partie de la structure formelle du document. Les sélecteurs CSS2 ne peuvent s'appliquer (conceptuellement) à l'arbre DOM cloné parce que son contenu ne fait pas partie de la structure formelle du document.
L'héritage de propriété, cependant, fonctionne comme si l'élément appelé avait été incorporé textuellement comme enfant cloné en profondeur des ancêtres de l'élément 'use'. Une instance d'un élément appelé n'hérite pas des propriétés des parents originaux de l'élément appelé.
Si des attributs événementiels sont assignés à un élément appelé, alors la
cible effective pour l'événement sera l'objet
SVGElementInstance dans
« l'arbre d'instance » correspondant à l'élément appelé en question.
« errata 2002-11-15 »
Le comportement de la propriété 'visibility' se conforme à ce modèle d'héritage de propriété. Ainsi, un paramétrage 'visibility:hidden' sur un élément 'use' ne garantit pas que le contenu appelé ne sera pas rendu. Si l'élément 'use' spécifie 'visibility:hidden' et si l'élément appelé spécifie 'visibility:hidden' ou 'visibility:inherit', alors cet élément sera caché. Cependant, si, par contre, l'élément appelé spécifie 'visibility:visible', alors cet élément sera visible, même si l'élément 'use' spécifie 'visibility:hidden'.
Une animation sur un élément appelé va aussi provoquer l'animation de son instance.
Un élément 'use' produit le même effet visuel que si celui-ci avait été remplacé par le contenu généré suivant :
Pour les agents utilisateurs qui reconnaissent le style avec CSS, l'élément 'g' généré emporte avec lui les valeurs « de cascade » des propriétés de l'élément 'use', celles-ci résultant de la cascade CSS [CSS2-CASCADE vf.]. De plus, la copie (le clone en profondeur) de la ressource appelée emporte avec elle les valeurs « de cascade » des propriétés qui sont issues de la cascade CSS des éléments originaux (appelés). Ainsi, la totalité des divers sélecteurs, en combinaison avec les attributs class et style, est remplacée par l'équivalent fonctionnel d'un attribut style, dans le contenu généré, qui véhicule les valeurs des propriétés « issues de la cascade ».
L'exemple Use01, ci-dessous, montre l'action simple d'un élément 'use' sur un élément 'rect'.
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Exemple Use01 - Cas simple d'un 'use' sur un 'rect'</desc>
<defs>
<rect id="MonRect" width="60" height="10"/>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use x="20" y="10" xlink:href="#MonRect" />
</svg>
|
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'effet visuel équivaudrait à celui du document suivant :
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple Use01-ContenuGénéré - Cas simple d'un 'use' sur un 'rect'</desc>
<!-- la section 'defs' est laissée de côté -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Début du contenu généré. Remplacement de 'use' -->
<g transform="translate(20,10)">
<rect width="60" height="10"/>
</g>
<!-- Fin du contenu généré -->
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'exemple Use02, ci-dessous, montre l'action d'un élément 'use' sur un élément 'symbol'.
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Exemple Use02 - un 'use' sur un 'symbol'</desc>
<defs>
<symbol id="MonSymbole" viewBox="0 0 20 20">
<desc>MonSymbole - quatre rectangles sur une grille</desc>
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8" height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</symbol>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use x="45" y="10" width="10" height="10"
xlink:href="#MonSymbole" />
</svg>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'effet visuel équivaudrait à celui du document suivant :
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple Use02-ContenuGénéré - un 'use' sur un 'symbol'</desc>
<!-- la section 'defs' est laissée de côté -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Début du contenu généré. Remplacement de 'use' -->
<g transform="translate(45, 10)" >
<!-- Dé du 'symbol' appelé. Le 'symbol' est remplacé par un 'svg',
avec x, y, width, height = 0, 0, 100%, 100% -->
<svg width="10" height="10"
viewBox="0 0 20 20">
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8" height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</svg>
<!-- Fin du 'symbol' appelé -->
</g>
<!-- Fin du contenu généré -->
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'exemple Use03 montre ce qui se produit quand l'élément 'use' a un attribut transform.
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Exemple Use03 - un 'use' avec un attribut 'transform'</desc>
<defs>
<rect id="MonRect" x="0" y="0" width="60" height="10"/>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use xlink:href="#MonRect"
transform="translate(20,2.5) rotate(10)" />
</svg>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'effet visuel équivaudrait à celui du document suivant :
<?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="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple Use03-ContenuGénéré - un 'use' avec un attribut 'transform'</desc>
<!-- la section 'defs' est laissée de côté -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Début du contenu généré. Remplacement de 'use' -->
<g transform="translate(20,2.5) rotate(10)">
<rect x="0" y="0" width="60" height="10"/>
</g>
<!-- Fin du contenu généré -->
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'exemple Use04 montre un élément 'use' et diverses méthodes d'application d'un style CSS.
<?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="12cm" height="3cm" viewBox="0 0 1200 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Exemple Use04 - un 'use' avec un style CSS</desc>
<defs style=" /* règle 9 */ stroke-miterlimit: 10" >
<path id="MonPath" d="M300 50 L900 50 L900 250 L300 250"
class="MaClassePath"
style=" /* règle 10 */ stroke-dasharray:300,100" />
</defs>
<style type="text/css">
<![CDATA[
/* règle 1 */ #MonUse { fill: blue }
/* règle 2 */ #MonPath { stroke: red }
/* règle 3 */ use { fill-opacity: .5 }
/* règle 4 */ path { stroke-opacity: .5 }
/* règle 5 */ .MaClasseUse { stroke-linecap: round }
/* règle 6 */ .MaClassePath { stroke-linejoin: bevel }
/* règle 7 */ use > path { shape-rendering: optimizeQuality }
/* règle 8 */ g > path { visibility: hidden }
]]>
</style>
<rect x="0" y="0" width="1200" height="300"
style="fill:none; stroke:blue; stroke-width:3"/>
<g style=" /* règle 11 */ stroke-width:40">
<use id="MonUse" xlink:href="#MonPath"
class="MaClasseUse"
style="/* règle 12 */ stroke-dashoffset:50" />
</g>
</svg>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'effet visuel équivaudrait à celui du document suivant. Remarquer que certaines des règles de style ci-dessus s'appliquent au contenu généré (i.e., les règles 1 à 6 et 10 à 12), alors que d'autres pas (i.e., les règles 7 à 9). Les règles qui n'affectent pas le contenu généré sont :
Dans le contenu généré ci-dessous, les sélecteurs qui trouvent une correspondance ont été déplacés dans des attributs 'style' en ligne pour illustrer le propos.
<?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="12cm" height="3cm" viewBox="0 0 1200 300"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple Use04-ContenuGénéré - un 'use' avec un attribut 'transform'</desc>
<!-- les sections 'style' et 'defs' sont laissées de côté -->
<rect x="0" y="0" width="1200" height="300"
style="fill:none; stroke:blue; stroke-width:3"/>
<g style="/* règle 11 */ stroke-width:40">
<!-- Début du contenu généré. Remplacement de 'use' -->
<g style="/* règle 1 */ fill:blue;
/* règle 3 */ fill-opacity:.5;
/* règle 5 */ stroke-linecap:round;
/* règle 12 */ stroke-dashoffset:50" >
<path d="M300 50 L900 50 L900 250 L300 250"
style="/* règle 2 */ stroke:red;
/* règle 4 */ stroke-opacity:.5;
/* règle 6 */ stroke-linejoin: bevel;
/* règle 10 */ stroke-dasharray:300,100" />
</g>
<!-- Fin du contenu généré -->
</g>
</svg>
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Quand un élément 'use' appelle un autre élément, qui est un autre 'use', ou dont le contenu comprend un élément 'use', alors l'approche par clonage en profondeur, décrite plus haut, est récursive.
<!ENTITY % useExt "" > <!ELEMENT use (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%useExt;)*) > <!ATTLIST use %stdAttrs; %xlinkRefAttrsEmbed; xlink:href %URI; #REQUIRED %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #IMPLIED height %Length; #IMPLIED > |
Définition des attributs :
L'élément 'image' indique que le contenu d'un fichier entier doit être rendu dans un rectangle donné dans le système de coordonnées utilisateur courant. L'élément 'image' peut se rapporter à des fichiers d'image pixélisée, tel que PNG ou JPEG, ou à des fichiers avec un type MIME de "image/svg+xml". Les visionneurs SVG conformes doivent au moins reconnaître les fichiers de format PNG, JPEG et SVG.
Le produit du traitement d'un élément 'image' est toujours un résultat RGBA en quatre canaux. Quand un élément 'image' appelle un fichier d'image pixélisée, tel que des fichiers PNG ou JPEG, qui ne contiennent que trois canaux (RGB), alors l'effet est comme si l'objet avait été converti en une image RGBA en quatre canaux, avec le canal alpha fixé uniformément à 1. Pour une image pixélisée mono-canal, l'effet est comme si l'objet avait été converti en une image RGBA en quatre canaux, où le seul canal de l'objet appelé est utilisé pour le calcul des trois canaux de couleur et le canal alpha fixé uniformément à 1.
Quand un élément 'image' appelle le fichier d'une image pixélisée, tel qu'un fichier
PNG ou JPEG, alors l'image pixélisée est enchâssée dans la région spécifié par les
attributs x,
y,
width et
height. L'attribut
preserveAspectRatio détermine à la
fois la taille et le ratio d'aspect de l'image, quand elle est enchâssée dans la région
spécifiée par les attributs x,
y,
width et
height. Par exemple, pour
preserveAspectRatio = "xMinYMin meet", alors le ratio d'aspect de l'image serait
conservé (ce qui signifie que le facteur d'échelle, entre les coordonnées de l'image et l'espace
de coordonnées utilisateur courant, serait le même pour à la fois X et Y) et l'image serait
dimensionnée aussi grande que possible, tout en garantissant que l'image entière tienne dans la zone de
visualisation et que le haut/gauche de l'image soit aligné avec le haut/gauche de la zone de visualisation.
Pour preserveAspectRatio = "none", alors le ratio d'aspect de l'image ne serait pas
conservé. L'image serait enchâssée de telle manière que le coin haut/gauche de l'image s'aligne
exactement sur les coordonnées (x,y)
et le coin bas/droit exactement sur les coordonnées
(x + width, y + height).
« errata 2002-11-15 »
Quand un élément 'image' appelle un fichier SVG, alors l'éléemnt 'image' établit une nouvelle zone de visualisation pour le fichier SVG, comme décrit au chapitre L'établissement d'une nouvelle zone de visualisation. Les limites de la nouvelle zone de visualisation sont définies par les attributs x, y, width et height. Sauf pour l'adaptation implicite du système de coordonnées qui peut survenir lors du traitement des attributs x et y (voir chapitre L'établissement d'une nouvelle zone de visualisation), l'élément 'image' par lui-même ne provoque pas de changements de système de coordonnées. Ainsi, le système de coordonnées initial du fichier SVG appelé sera identique à celui de la nouvelle zone de visualisation. S'il est nécessaire que le fichier SVG appelé soit adapté pour tenir dans la zone de visualisation établie par l'élément 'image', alors l'élément 'svg' le plus externe du fichier SVG appelé aura besoin d'un attribut viewBox ou le fichier appelant devra comporter les transformations adéquates, peut-être en incluant un attribut transform approprié à l'élément 'image', ou l'un de ses ancêtres, ou en plaçant l'élément 'image' dans un élément 'svg' avec un attribut viewBox approprié.
La ressource appelée par l'élément 'image' représente un document distinct qui génère son propre arbre d'analyse et son propre modèle objet de document (si c'est une ressource XML). Ainsi, aucun héritage de propriété n'intervient dans une image.
À la différence de 'use', l'élément
'image' ne peut appeler d'éléments dans un fichier SVG.
<!ENTITY % imageExt "" > <!ELEMENT image (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%imageExt;)*) > <!ATTLIST image %stdAttrs; %xlinkRefAttrsEmbed; xlink:href %URI; #REQUIRED %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-Graphics; %PresentationAttributes-Images; %PresentationAttributes-Viewports; transform %TransformList; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' %graphicsElementEvents; x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #REQUIRED height %Length; #REQUIRED > |
Définition des attributs :
Un exemple :
<?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="4in" height="3in"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Ce graphique est relié à une image externe
</desc>
<image x="200" y="200" width="100px" height="100px"
xlink:href="monimage.png">
<title>Mon image</title>
</image>
</svg>
SVG propose un élément 'switch', accompagné des attributs requiredFeatures, requiredExtensions et systemLanguage pour offrir la possibilité de spécifier une autre vue en fonction des capacités d'un agent utilisateur donné ou du langage de l'utilisateur.
<!ENTITY % testAttrs "requiredFeatures %FeatureList; #IMPLIED requiredExtensions %ExtensionList; #IMPLIED systemLanguage %LanguageCodes; #IMPLIED" > |
Les attributs requiredFeatures, requiredExtensions et systemLanguage opèrent comme une batterie de tests et retournent un résultat vrai ou faux. L'élément 'switch' rend le premier de ses enfants pour lequel les conditions sont vérifiées pour tous ces attributs. Si un attribut donné n'est pas spécifié, alors il est censé être vrai. « errata 2002-06-06 »
L'élément 'switch' effectue une évaluation des attributs requiredFeatures, requiredExtensions et systemLanguage par rapport à ses éléments enfants directs, dans l'ordre, puis traite et rend le premier enfant pour lequel ces attributs sont vérifiés. Aucun des autres enfants ne sera interprété et ainsi ne sera pas rendu. Si l'enfant est un élément conteneur, comme un élément 'g', alors le sous-arbre entier est ou bien traité/rendu, ou bien non interprété/non rendu.
Remarquer que les valeurs des propriétés 'display' et 'visibility' n'interviennent pas dans le traitement de l'élément 'switch'. Notamment, donner une valeur de none pour la propriété 'display' d'un enfant d'un élément 'switch' est sans effet sur le test vrai/faux occasionné par l'action d'un élément 'switch'.
<!ENTITY % switchExt "" > <!ELEMENT switch (%descTitleMetadata;, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|switch|a|foreignObject| animate|set|animateMotion|animateColor|animateTransform %ceExt;%switchExt;)*) > <!ATTLIST switch %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; > |
Pour plus d'information et pour un exemple, voir le chapitre L'incorporation des types d'objet étranger.
Définition de requiredFeatures :
Toutes les chaînes de caractéristique se rapportant aux capacités du langage commencent par "org.w3c.svg". Toutes les chaînes de caractéristique se rapportant aux capacités du DOM de SVG commencent par "org.w3c.dom.svg".
Les chaînes de caractéristique pour l'attribut requiredFeatures suivent. Ces mêmes chaînes de caractéristique s'appliquent pour l'appel de la méthode hasFeature, qui fait partie de la gestion du DOM de SVG de l'interface DOMImplementation, définie dans [DOM2-CORE] (voir le chapitre Les chaînes de fonctionnalité pour l'appel de la méthode hasFeature).
Si l'attribut est absent, alors sa valeur retournée implicite est "true". Si on fournit une chaîne nulle ou vide à l'attribut requiredFeatures, la valeur retournée est "false".
L'attribut requiredFeatures est souvent employé en conjonction avec l'élément 'switch'. Quand on utilise l'attribut requiredFeatures dans d'autres occasions, alors il représente une simple bascule pour le rendu, ou non, de l'élément en question.
L'attribut requiredExtensions définit la liste des extensions de langage requises. Les extensions de langage représentent les capacités d'un agent utilisateur qui dépassent le jeu des caractéristiques définies dans cette spécification. Chaque extension est identifiée par une référence d'URI.
Définition de l'attribut requiredExtensions :
Si une référence d'URI donnée contient des blancs, ceux-ci doivent être échappés.
Si l'attribut est absent, alors sa valeur retournée implicite est "true". Si on fournit une chaîne nulle ou vide à l'attribut requiredExtensions, alors l'attribut retourne la valeur "false".
L'attribut requiredExtensions est souvent employé en conjonction avec l'élément 'switch'. Quand on utilise l'attribut requiredExtensions dans d'autres occasions, alors il représente une simple bascule pour le rendu, ou non, de l'élément en question.
Les noms d'URI des extensions devraient comporter une indication de la version, telle que "http://example.org/SVGExtensionXYZ/1.0", de façon à ce que les auteurs de scripts puissent distinguer les différentes versions d'une extension donnée.
La valeur de l'attribut est une liste de codes de langue, séparés par des virgules, ainsi que défini dans [RFC3066].
Prend la valeur "true", si l'un des codes de langue, indiqué par les préférence de l'utilisateur, correspond exactement avec l'un des codes de langues contenus dans la valeur de ce paramètre ou exactement avec le préfixe de l'un des codes de langue donnés en valeur de ce paramètre, tel que le premier caractère de balise suivant le préfixe soit « - ».
Sinon prend la valeur "false".
Remarque : L'emploi de cette règle de correspondance, basée sur un préfixe, n'implique pas que les codes soient équivalents aux langues, ainsi il n'est pas toujours vrai que, si un utilisateur comprend une langue avec un certain code, alors cet utilisateur va forcément comprendre toutes les langues pour lesquelles ce code est un préfixe.
La règle du préfixe permet simplement l'utilisation de codes de préfixes, si c'est le cas.
Remarque pour l'implémentation : Au moment de donner le choix d'une préférence linguistique à l'utilisateur, les implémenteurs devraient prendre en compte le fait que celui-ci peut ne pas être familier avec le détail du processus de correspondance de langue, décrit ci-dessus, et donc devraient offrir un guidage adéquat. En exemple, les utilisateurs pourraient supposer que, par la sélection du code « en-gb », ils recevront toutes sortes de documents en anglais au cas où l'anglais britannique n'était pas disponible. L'interface utilisateur pour le paramétrage des préférences devrait guider l'utilisateur et lui indiquer l'ajout de « en » pour obtenir une meilleure correspondance.
Plusieurs langues PEUVENT être listées pour un contenu destiné à plusieurs publics. Par exemple, un contenu qui est présenté simultanément dans des versions maorie et française serait appelé par :
<text systemLanguage="mi, fr"><!-- le contenu se place ici --></text>
Cependant, la simple présence de plusieurs langues dans un objet sur lequel un attribut de test systemLanguage est placé ne signifie pas forcément que cet objet soit destiné à plusieurs audiences linguistiques. Un exemple en serait une introduction à une langue pour un débutant, tel que « Une première leçon de latin », clairement destiné à être utilisé par un public francophone. Dans ce cas, l'attribut de test systemLanguage ne devrait contenir que « fr ».
Remarque pour les auteurs : Les auteurs devraient tenir compte du fait que, si plusieurs objets dans des langues alternatives sont contenus dans un élément 'switch', et qu'aucun d'eux ne corresponde, ceci pourrait aboutir à une situation où aucun contenu n'est affiché. Ainsi, on recommande d'inclure un choix « fourre-tout » en fin d'un tel élément 'switch', qui soit acceptables dans toutes les situations.
Pour l'attribut systemLanguage : Animable : non.
Si l'attribut est absent, alors sa valeur retournée implicite est "true". Si on fournit une chaîne nulle ou vide à l'attribut systemLanguage, l'attribut retourne la valeur "false".
L'attribut systemLanguage est souvent employé en conjonction avec l'élément 'switch'. Si l'attribut systemLanguage est utilisé dans d'autres occasions, alors il représente une simple bascule pour le rendu, ou non, de l'élément en question.
Les documents font souvent appel et utilisent le contenu d'autres fichiers (et d'autres ressources Web) en tant qu'éléments de leur rendu. Dans certains cas, les auteurs veulent spécifier que des ressources particulières sont requises pour qu'un document soit considéré correct.
L'attribut externalResourcesRequired est utilisable sur tous les éléments conteneurs et sur tous les éléments susceptibles d'appeler des ressources externes. Cet attribut spécifie si des ressources appelées, qui ne font pas partie du document courant, sont nécessaires pour le rendu convenable de l'élément conteneur ou de l'élément graphique en question.
Définition de l'attribut :
Cet attribut s'applique à tous les types de référence de ressource, y compris les feuilles de styles, les profils de couleur (voir Les descriptions des profils de couleur) et les polices spécifiées par une référence d'URI, en utilisant un élément 'font-face' ou une spécification CSS @font-face. En particulier, si un élément établit externalResourcesRequired = "true", alors toutes les feuilles de style doivent être disponibles, comme toute feuille de style pourrait influer sur le rendu de cet élément.
L'attribut externalResourcesRequired ne s'hérite pas (au sens de l'héritage d'une valeur d'attribut), mais s'il est établi sur un élément conteneur, sa valeur s'appliquera à tous les éléments qui y sont contenus.
Parce qu'un paramétrage externalResourcesRequired = "true" sur un élément conteneur peut désactiver l'affichage progressif de son contenu, on met en garde, de façon généale, sur l'emploi d'outils générateurs de contenu SVG pour simplement paramétrer externalResourcesRequired = "true" sur l'élément 'svg' le plus externe. Plutôt, il est préférable de spécifier externalResourcesRequired = "true" pour ceux des éléments graphiques et conteneurs qui nécessitent l'apport de ressources externes pour leur rendu convenable.
Pour l'attribut externalResourcesRequired : Animable : non.
Les attributs id et xml:base sont disponibles pour tous les éléments SVG :
<!ENTITY % stdAttrs "id ID #IMPLIED xml:base %URI; #IMPLIED" > |
Définition des attributs :
<!ENTITY % langSpaceAttrs "xml:lang NMTOKEN #IMPLIED xml:space (default|preserve) #IMPLIED" > |
Définition des attributs :
Les interfaces suivantes sont définies ci-dessous : SVGDocument, SVGSVGElement, SVGGElement, SVGDefsElement, SVGDescElement, SVGTitleElement, SVGSymbolElement, SVGUseElement, SVGElementInstance,SVGElementInstanceList, SVGImageElement, SVGSwitchElement, GetSVGDocument.
Quand un élément 'svg' est incorporé en ligne comme composant d'un document issu d'un autre espace de nommage, comme un élément 'svg' incorporé dans un document XHTML [XHTML], alors il n'existera pas d'objet SVGDocument ; à la place, l'objet racine, dans la hiérarchie objet du document, sera un objet Document d'un type différent, comme un objet HTMLDocument.
Cependant, un objet SVGDocument va en effet exister quand l'élément racine de la hiérarchie du document XML est un élément 'svg', comme lors du visionnage d'un fichier SVG autonome (i.e., un fichier avec un type MIME "image/svg+xml"). Dans ce cas, l'objet SVGDocument sera l'objet racine de la hiérarchie du modèle objet du document.
Dans le cas où un document SVG est incorporé par référence, comme quand un document XHTML a un élément 'object' dont l'attribut href appelle un document SVG (i.e., un document dont le type MIME est "image/svg+xml" et dont l'élément racine est ainsi un élément 'svg'), il existera deux hiérarchies DOM distinctes. La première hiérarchie sera pour le document appelant (par exemple, un document XHTML). La deuxième sera pour le document SVG appelé. Dans cette seconde hiérarchie, l'objet racine de la hiérarchie du modèle objet du document est un objet SVGDocument.
L'interface SVGDocument contient une liste d'attributs et de méthodes similaire à celle de l'interface HTMLDocument décrite au chapitre Modèle Objet du Document (HTML), niveau 1 vf. de la spécification [DOM1].
interface SVGDocument :
Document,
events::DocumentEvent {
readonly attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
readonly attribute SVGSVGElement rootElement;
};
Une définition d'interface capitale est celle de SVGSVGElement, qui est l'interface qui correspond à l'élément 'svg'. Cette interface contient des méthodes utilitaires variées diverses couramment employées, telle que des opérations matricielles et la capacité de contrôler le moment du ré-affichage sur les appareils de rendu visuel.
L'interface SVGSVGElement augmente ViewCSS et DocumentCSS pour donner un accès aux valeurs calculées des propriétés et à la feuille de style de surclassement, comme décrit dans DOM2.
interface SVGSVGElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGLocatable,
SVGFitToViewBox,
SVGZoomAndPan,
events::EventTarget,
events::DocumentEvent,
css::ViewCSS,
css::DocumentCSS {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
attribute DOMString contentScriptType;
// déclenche DOMException à l'initialisation
attribute DOMString contentStyleType;
// déclenche DOMException à l'initialisation
readonly attribute SVGRect viewport;
readonly attribute float pixelUnitToMillimeterX;
readonly attribute float pixelUnitToMillimeterY;
readonly attribute float screenPixelToMillimeterX;
readonly attribute float screenPixelToMillimeterY;
attribute boolean useCurrentView;
// déclenche DOMException à l'initialisation
readonly attribute SVGViewSpec currentView;
attribute float currentScale;
// déclenche DOMException à l'initialisation
readonly attribute SVGPoint currentTranslate;
unsigned long suspendRedraw ( in unsigned long max_wait_milliseconds );
void unsuspendRedraw ( in unsigned long suspend_handle_id )
raises( DOMException );
void unsuspendRedrawAll ( );
void forceRedraw ( );
void pauseAnimations ( );
void unpauseAnimations ( );
boolean animationsPaused ( );
float getCurrentTime ( );
void setCurrentTime ( in float seconds );
NodeList getIntersectionList ( in SVGRect rect, in SVGElement referenceElement );
NodeList getEnclosureList ( in SVGRect rect, in SVGElement referenceElement );
boolean checkIntersection ( in SVGElement element, in SVGRect rect );
boolean checkEnclosure ( in SVGElement element, in SVGRect rect );
void deselectAll ( );
SVGNumber createSVGNumber ( );
SVGLength createSVGLength ( );
SVGAngle createSVGAngle ( );
SVGPoint createSVGPoint ( );
SVGMatrix createSVGMatrix ( );
SVGRect createSVGRect ( );
SVGTransform createSVGTransform ( );
SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
Element getElementById ( in DOMString elementId );
};
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative pour changer la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative pour changer la valeur d'un attribut en lecture seule.
|
La position et la taille de la zone de visualisation (implicite ou explicite) qui correspond à cet élément 'svg'. Quand l'agent utilisateur rend effectivement le contenu, alors les valeurs de position et de taille représentent les valeurs effectives au moment du rendu. Les valeurs de position et de taille sont des valeurs sans unité dans le système de coordonnées de l'élément parent. S'il n'existe pas délément parent (i.e., l'élément 'svg' représente la racine de l'arbre du document), si ce document SVG est incorporé comme partie d'un autre document (par exemple, via l'élément HTML 'object', alors les valeurs de position et de taille n'ont pas d'unité dans le système de coordonnées du document parent. (Si le parent utilise une disposition par CSS ou XSL, alors les valeurs sans unité représentent les unités en pixel pour la zone de visualisation CSS ou XSL courantes, comme décrit dans la spécification CSS2). Si l'élément parent ne possède pas de système de coordonnées, alors l'agent utilisateur devrait fournir des valeurs par défaut raisonnables pour cet attribut.
L'objet lui-même et son contenu sont tous deux en lecture seule.
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative pour changer la valeur d'un attribut en lecture seule.
|
L'objet lui-même et son contenu sont tous deux en lecture seule.
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative pour changer la valeur d'un attribut en lecture seule.
|
| in unsigned long max_wait_milliseconds | La duré de suspension en millisecondes avant le rafraîchissement du dessin sur l'appareil. Les valeurs supérieures à 60 secondes seront tronquées à 60 secondes. |
| unsigned long | Un nombre qui fait office d'identifiant unique pour l'appel de méthode suspendRedraw() en question. Cette valeur doit être passée comme paramètre pour l'appel de méthode unsuspendRedraw() correspondant. |
| in unsigned long suspend_handle_id | Un nombre qui fait office d'identifiant unique pour l'appel de méthode suspendRedraw() voulu. Le nombre fourni doit être une valeur retournée d'un appel précédent d'une méthode suspendRedraw(). |
| DOMException |
Cette méthode va provoquer une DOMException avec une valeur NOT_FOUND_ERR si on donne une valeur
invalide pour cette méthode suspend_handle_id (i.e., aucune méthode
suspend_handle_id avec cette identification n'est active).
|
| boolean | Un booléen qui indique si ce fragment de document SVG est dans un état d'interruption. |
| float | La durée courante en secondes. |
| in float seconds | Le nouveau temps courant en secondes par rapport à l'instant du départ du fragment de document SVG courant. |
| in SVGRect rect | Le rectangle de test. Les valeurs sont dans le système de coordonnées de l'élément 'svg' courant. | |
| in SVGElement referenceElement | Si non nulle, alors ne retourne que les éléments dont l'ordre de dessin fait que ceux-ci se trouvent en-dessous de l'élément de référence en question. |
| NodeList | Une liste des Elements dont le contenu recoupe le rectangle fourni. |
| in SVGRect rect | Le rectangle test. Les valeurs sont dans le système de coordonnées initial de l'élément 'svg' courant. | |
| in SVGElement referenceElement | Si non nul, alors ne retourne que les éléments dont l'ordre de dessin fait que ceux-ci se trouvent en-dessous de l'élément de référence en question. |
| NodeList | Une liste des Elements dont le contenu est circonscrit par le rectangle fourni. |
| in SVGElement element | L'élément sur lequel effectuer le test en question. | |
| in SVGRect rect | Le rectangle test. Les valeurs sont dans le système de coordonnées initial de l'élément 'svg' courant. |
| boolean | Vrai ou faux, selon que l'élément en question recoupe, ou non, le rectangle fourni. |
| in SVGElement element | L'élément sur lequel effectuer le test en question. | |
| in SVGRect rect | Le rectangle test. Les valeurs sont dans le système de coordonnées initial de l'élément 'svg' courant. |
| boolean | Vrai ou faux, selon que l'élément en question est circonscrit, ou non, dans le rectangle fourni. |
| SVGNumber | Un objet SVGNumber. |
| SVGLength | Un objet SVGLength. |
| SVGAngle | Un objet SVGAngle. |
| SVGPoint | Un objet SVGPoint. |
| SVGMatrix | Un objet SVGMatrix. |
| SVGRect | Un objet SVGRect. |
| SVGTransform | Un objet SVGTransform. |
| in SVGMatrix matrix | La matrice de transformation. |
| SVGTransform | Un objet SVGTransform. |
| in DOMString elementId |
La valeur unique d'id pour un élément. |
| Element | L'élément correspondant. |
L'interface SVGGElement correspond à l'élément 'g'.
interface SVGGElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
L'interface SVGDefsElement correspond à l'élément 'defs'.
interface SVGDefsElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
L'interface SVGDescElement correspond à l'élément 'desc'.
interface SVGDescElement :
SVGElement,
SVGLangSpace,
SVGStylable {};
L'interface SVGTitleElement correspond à l'élément 'title'.
interface SVGTitleElement :
SVGElement,
SVGLangSpace,
SVGStylable {};
L'interface SVGSymbolElement correspond à l'élément 'symbol'.
interface SVGSymbolElement :
SVGElement,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox,
events::EventTarget {};
L'interface SVGUseElement correspond à l'élément 'use'.
interface SVGUseElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGElementInstance instanceRoot;
readonly attribute SVGElementInstance animatedInstanceRoot;
};
Pour chaque élément 'use', le DOM de SVG maintient un arbre compagnon (l'« arbre des instances ») d'objets de type SVGElementInstance. Un objet SVGElementInstance représente un seul nœud dans l'arbre des instances. L'objet racine de cet arbre est désigné par l'attribut instanceRoot de l'objet SVGUseElement de l'élément 'use' correspondant.
Si l'élément 'use' référence un élément graphique simple, tel qu'un 'rect', alors il n'y a qu'un seul objet SVGElementInstance et l'attribut correspondingElement, de cet objet SVGElementInstance, est l'objet SVGRectElement qui correspond à l'élément 'rect' appelé.
Si l'élément 'use' référence un élément 'g' qui contient deux éléments 'rect', alors l'arbre des instances contient trois objets SVGElementInstance, un objet racine SVGElementInstance dont l'attribut correspondingElement est l'objet SVGGElement pour l'élément 'g', et deux objets enfants SVGElementInstance, chacun d'eux ayant un attribut correspondingElement qui est un objet SVGRectElement.
Si l'objet appelé est lui-même un élément 'use' ou s'il y a des sous-éléments 'use' dans l'objet appelé, l'arbre des instances va contenir un développement récursif des appels indirects pour former un arbre complet. Par exemple, si un élément 'use' référence un élément 'g', cet élément 'g' lui-même contenant un élément 'use' qui référence un élément 'rect', alors l'arbre des instances pour l'élément 'use' original (le plus externe) va consister en une hiérarchie d'objets SVGElementInstance, comme suit :
SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement est le 'g')
SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement est l'autre 'use')
SVGElementInstance #3 (parentNode=#2, firstChild=null, correspondingElement est le 'rect')
interface SVGElementInstance : events::EventTarget {
readonly attribute SVGElement correspondingElement;
readonly attribute SVGUseElement correspondingUseElement;
readonly attribute SVGElementInstance parentNode;
readonly attribute SVGElementInstanceList childNodes;
readonly attribute SVGElementInstance firstChild;
readonly attribute SVGElementInstance lastChild;
readonly attribute SVGElementInstance previousSibling;
readonly attribute SVGElementInstance nextSibling;
};
L'interface SVGElementInstanceList fournit une abstraction d'une collection ordonnée d'objets SVGElementInstance, sans définition ou contrainte sur l'implémentation de cette collection.
interface SVGElementInstanceList {
readonly attribute unsigned long length;
SVGElementInstance item ( in unsigned long index );
};
Retourne la valeur de index de l'neme item dans la collection. Si la valeur de index est supérieure ou égale au nombre de nœuds de la liste, la valeur retournée est nulle.
| in unsigned long index | L'index dans la collection. |
| SVGElementInstance | L'objet SVGElementInstance situé à la neme position indiquée par la valeur de index, dans l'objet SVGElementInstanceList, sinon la valeur nulle si la valeur d'index est invalide. |
L'interface SVGImageElement correspond à l'élément 'image'.
interface SVGImageElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
L'interface SVGSwitchElement correspond à l'élément 'switch'.
interface SVGSwitchElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
Dans le cas où un document SVG est incorporé par référence, comme quand un document XHTML possède un élément 'object' dont l'attribut href (ou un équivalent) référence un document SVG (i.e., un document dont le type MIME est "image/svg+xml" et dont l'élément racine est donc un élément 'svg'), l'agent utilisateur SVG doit implémenter l'interface GetSVGDocument pour l'élément qui référence le document SVG (par exemple, l'élément HTML 'object' ou d'autres éléments appelants comparables).
interface GetSVGDocument {
SVGDocument getSVGDocument ( )
raises( DOMException );
};
Retourne l'objet SVGDocument du document SVG appelé.
| SVGDocument | L'objet SVGDocument du document SVG appelé. |
| DOMException |
NOT_SUPPORTED_ERR : déclenchée quand aucun objet SVGDocument n'est disponible.
|