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