11 La peinture : le remplissage, le liseré et les symboles marqueurs

Contenu

• 11.1 Introduction
• 11.2 La spécification de la peinture
• 11.3 Les propriétés de remplissage
• 11.4 Les propriétés de liseré
• 11.5 Le contrôle de la visibilité
• 11.6 Les marqueurs
  • 11.6.1 Introduction
  • 11.6.2 L'élément 'marker'
  • 11.6.3 Les propriétés de marqueur
  • 11.6.4 Le détail du rendu des marqueurs
• 11.7 Les propriétés de rendu
  • 11.7.1 Les propriétés d'interpolation de couleur : 'color-interpolation' et 'color-interpolation-filters'
  • 11.7.2 La propriété 'color-rendering'
  • 11.7.3 La propriété 'shape-rendering'
  • 11.7.4 La propriété 'text-rendering'
  • 11.7.5 La propriété 'image-rendering'
• 11.8 L'héritage des propriétés de peinture
• 11.9 Les interfaces DOM

11.1 Introduction

Les éléments 'path' et 'text' et les formes de base peuvent recevoir un remplissage (une peinture de l'intérieur de l'objet) et un liseré (une peinture du contour de l'objet). En termes plus généraux, on peut considérer le remplissage et le liseré comme des opération de peinture.

Certains éléments (i.e., 'path', 'polyline', 'polygon' et 'line') peuvent aussi avoir des symboles marqueurs dessinés à leurs arêtes.

Avec SVG, on peut peindre (i.e., remplir ou donner un liseré) avec :

• une seule couleur ;
• un dégradé (linéaire ou radial) ;
• un motif (vecteur ou image, éventuellement en mosaïque) ;
• des peintures personnalisées disponibles via extensibilité.

SVG emploie la notion générale de serveur de peinture. Les serveurs de peinture sont spécifiés en utilisant une référence d'URI sur les propriétés 'fill' ou 'stroke'. Les dégradés et les motifs ne sont que des types de serveur de peinture particuliers.

11.2 La spécification de la peinture

Les propriétés 'fill' et 'stroke' admettent une valeur de type <peinture>, spécifiée comme suit :

none

Aucune peinture n'est appliquée.

currentColor

La peinture est effectuée en utilisant la couleur spécifiée par la propriété 'color'. Ce mécanisme est fourni pour faciliter le partage des attributs de couleur entre grammaires parentes comme celles des autres XML (non-SVG). Il permet de définir un style dans un document HTML qui établit la valeur de la propriété 'color', puis de transmettre ce style à l'agent utilisateur SVG pour que celui-ci dessine le texte SVG dans la même couleur.

<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)]

Le type <couleur> représente la couleur explicite (dans l'espace de couleur sRGB [SRGB]) avec laquelle peindre l'objet courant. SVG reconnaît toutes les syntaxes alternatives pour le type <couleur> définies dans [CSS2-types de couleur vf.], excepté que SVG contient une liste développée de noms de mots-clés de couleur reconnus. Si on fournit une spécification de couleur ICC optionnelle, alors l'agent utilisateur effectue une recherche dans la base de données des descriptions de profil de couleur pour une entrée de description de profil de couleur, dont le descripteur de nom correspond avec la valeur de <nom>, et utilise la dernière entrée correspondante trouvée. (Si aucune correspondance n'est établie, alors la spécification de couleur ICC est ignorée). La liste des valeurs de <valeur-couleur-icc>, séparées par des virgules (avec des blancs optionnels) est un jeu de valeurs de couleur de profil ICC spécifiques, exprimimés comme valeurs de <nombre>. (Dans la plupart des cas, la valeur de <valeur-couleur-icc> se situera dans une fourchette de 0 à 1). Sur les plates-formes qui reconnaissent la gestion de couleur basée sur ICC, la fonction icc-color() est prioritaire sur la valeur de <couleur> (qui est dans l'espace de couleur sRGB). Remarquer qu'une interpolation de couleur intervient dans un espace de couleur RGB, même si on fournit une spécification de couleur basée sur ICC (voir les propriétés 'color-interpolation' et 'color-interpolation-filters'). Les pourcentages ne sont pas admis pour le type <valeur-couleur-icc>. Pour des informations supplémentaires sur les couleurs basées sur ICC, se reporter à la section Les descriptions des profils de couleur.

<uri>
   [ none |
      currentColor |
      <couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)]

La valeur <uri> représente le moyen d'identifier un serveur de peinture, comme un dégradé, un motif ou une peinture personnalisée définie par une extension (voir le chapitre L'extensibilité). La valeur <uri> donne l'ID du serveur de peinture (par exemple, un dégradé ou un motif) à utiliser pour peindre l'objet courant. Si la référence d'URI n'est pas valide (par exemple, elle pointe vers un objet qui n'existe pas ou qui n'est pas un serveur de peinture valide), alors c'est la méthode de peinture qui suit la valeur <uri> (i.e., none | currentColor | <couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)]| inherit vf.) qui est utilisée, si elle est fournie ; autrement, le document est en erreur (voir la section Le traitement des erreurs).

11.3 Les propriétés de remplissage

La propriété 'fill' peint l'intérieur de l'élément graphique donné. La surface à peindre consiste en toutes celles à l'intérieur du contour de la forme. Pour la détermination de cet intérieur, tous les sous-tracés sont considérés et l'intérieur se détermine en fonction des règles associées à la valeur courante de la propriété 'fill-rule'. Le contour géométrique sans épaisseur d'une forme est compris dans la surface à peindre.

L'opération de remplissage s'effectue sur les tracés ouverts comme si une commande "closepath" supplémentaire était ajoutée au tracé pour relier le dernier point et le premier point du sous-tracé. Ainsi, les opérations de remplissage s'appliquent aux sous-tracés ouverts des deux élément 'path' (i.e., les sous-tracés sans commande "closepath") et 'polyline'.

La propriété 'fill-rule' indique quel algorithme utiliser pour la détermination des parties du canevas devant être incluses dans la forme. Pour un tracé simple sans intersection, on a une intuition claire de la région « à l'intérieur » ; cependant, pour un tracé plus complexe, quand un tracé se recoupe lui-même ou quand un sous-tracé en englobe un autre, l'interprétation de cet « intérieur » n'est pas si évidente.

La propriété 'fill-rule' offre deux options pour déterminer l'intérieur d'une forme :

nonzero

Cette règle détermine « l'intériorité » d'un point du canevas en lançant un rayon dans une direction, à partir de ce point vers l'inifini, puis en examinant les intersections de ce rayon avec un segment du tracé. En commençant à zéro, ajouter un à chaque fois qu'un segment du tracé croise le rayon de gauche à droite et soustraire un à chaque fois qu'un segment du tracé croise le rayon de droite à gauche. Après le compte des croisements, si le résultat est zéro alors le point est en dehors du tracé. Sinon, il est en-dehors. Le schéma suivant illustre la règle nonzero :

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

evenodd

Cette règle détermine « l'intériorité » d'un point sur le canevas en lançant un rayon dans une direction et en comptant le nombre de segments de tracé de la forme donnée que le rayon croise. Si ce nombre est impair, le point est en-dedans ; s'il est pair, le point est en-dehors. Le schéma suivant illustre la règles evenodd :

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

(Remarque : les explications ci-dessus ne spécifient pas ce qu'il faut faire si un segment de tracé est coïncident ou tangent avec le rayon. Comme tout rayon peut faire l'affaire, on peut simplement choisir un rayon différent qui ne présente pas de tels inconvénients).

La propriété'fill-opacity' spécifie l'opacité de l'opération de peinture utilisée pour peindre l'intérieur de l'objet courant. (Voir la section La peinture des contours et du texte).

<valeur-opacité>

L'opacité de l'opération de peinture utilisée pour remplir l'objet courant. Toutes les valeurs en dehors d'une plage allant de 0.0 (complètement transparent) à 1.1 (complètement opaque) seront ramenées dans ces limites. (Voir la section Le rattachement de valeurs à une plage de valeurs restreinte.)

Les propriétés en relation : 'stroke-opacity' et 'opacity'.

11.4 Les propriétés de liseré

Les propriétés suivantes influent sur le liseré d'un élément.

Dans tous les cas, toutes les propriétés de liseré qui sont affectées par la bi-directionnalité, comme celles ayant trait aux motifs en pointillés, doivent être rendues de manière à ce que les opérations de liseré commencent au même point auquel l'élément graphique commence. Notamment, pour les éléments 'path', le début du tracé est le premier point de la commance "moveto" initiale.

Pour les propriétés de liseré, telle que les motifs en pointillés dont les calculs dépendent de la progression au long du contour de l'élément graphique, les calculs de distance doivent faire appel aux algorithmes standards de distance au long du tracé de l'agent utilisateur SVG.

Quand le liseré est effectué en utilisant un serveur de peinture complexe, tel qu'un dégradé ou un motif, l'opération de liseré doit donner un résultat identique à celui qui aurait été obtenu si la forme géométrique définie par la géométrie de l'élément graphique courant et les propriétés de liseré qui lui sont associées, avait été convertie en un élément 'path' équivalent puis rempli en utilisant le serveur de peinture en question.

La propriété 'stroke' peint suivant le contour de l'élément graphique donné.

Un sous-tracé (voir le chapitre Les tracés) composé d'une seule commande moveto ne reçoit pas de liseré. Un sous-tracé composé d'une commande moveto et d'une commande lineto allant exactement à la même position, ou composé d'une commande moveto et d'une commande closepath, recevront un liseré seulement si la valeur de la propriété 'stroke-linecap' est "round", ce qui produit un cercle ayant pour centre le point en question.

<longueur>

L'épaisseur du liseré sur l'objet courant. Si on utilise un pourcentage, la valeur représente un pourcentage de la zone de visualisation courante. (Voir la section Les unités).
Pour une valeur de zéro, aucun liseré n'est peint. Une valeur négative provoque une erreur (voir Le traitement des erreurs).

La propriété 'stroke-linecap' spécifie la forme des extrêmités des sous-tracés ouverts quand ils ont un liseré.

butt

Voir le dessin ci-dessous.

round

Voir le dessin ci-dessous.

square

Voir le dessin ci-dessous.

Voir cet exemple en SVG (navigateur gérant SVG et CSS seulement)
 

La propriété 'stroke-linejoin' spécifie la forme des sommets des tracés ou des formes de base quand ils ont un liseré.

miter

Voir le dessin ci-dessous.

round

Voir le dessin ci-dessous.

bevel

Voir le dessin ci-dessous.

Voir cet exemple en SVG (navigateur gérant SVG et CSS seulement)
 

Quand deux segments de droites se rencontre formant un angle aigu et qu'une jointure de valeur miter a été spécifiée pour la propriété 'stroke-linejoin', la jointure peut s'étendre bien au-delà de l'épaisseur du liseré du tracé. La propriété 'stroke-miterlimit' impose une limite pour le ratio de la longueur de jointure sur la propriété 'stroke-linewidth'. « errata 2002-06-06 »

<limite-onglet>

La limite pour le ratio de la longueur d'onglet sur la propriété 'stroke-linewidth'. La valeur de <limite-onglet> doit être un nombre supérieur ou égal à 1. Toute autre valeur provoque une erreur (voir Le traitement des erreurs).

La propriété 'stroke-dasharray' contrôle le motif de tirets et de blancs utilisé pour le liseré des tracés. La valeur <motif-tiret> contient un liste de valeurs de <longueur>, séparées par des virgules, qui spécifie les longueurs des tirets et des blancs en alternance. Si on fournit un nombre impair de valeurs, alors la liste des valeurs est répétée jusqu'à produire un nombre pair de valeurs. Ainsi, la valeur stroke-dasharray: 5,3,2 équivaut à stroke-dasharray: 5,3,2,5,3,2.

none

Aucune ligne en tirets n'est utilisée. Si la ligne est liserée, elle est dessinée en trait plein.

<motif-tiret>

Une liste de valeur <longueur>, séparées par des virgules (avec des blancs optionnels), chacune d'elles pouvant avoir un identifiant d'unité, y compris les pourcentages. Un pourcentage représente une distance en pourcentage par rapport à la zone de visualisation courante. (Voir la section Les unités). Une valeur négative pour <longueur> provoque une erreur (voir Le traitement des erreurs). Si la somme des valeurs de <longueur> est nulle, alors le liseré est rendu comme pour une valeur spécifiée de none.

La propriété 'stroke-dashoffset' spécifie à partir de quelle distance dans le motif de tirets commencer les tirets.

<longueur>

Si c'est un pourcentage, la valeur représente un pourcentage de la zone de visualisation courante.
(Voir la section Les unités.)
Les valeurs peuvent être négatives.

La propriété 'stroke-opacity' spécifie l'opacité de l'opération de peinture pour le liseré de l'objet courant. (Voir la section La peinture des contours et du texte.)

<valeur-opacité>

L'opacité de l'opération de peinture utilisée pour liserer l'objet courant. Toute valeur en dehors d'une plage allant de 0.0 (complètement transparent) à 1.0 (complètement opaque) sera ramenée dans ces limites. (Voir Le rattachement de valeurs à une plage de valeurs restreinte)

Les propriétés en relation : 'fill-opacity' et 'opacity'.

11.5 Le contrôle de la visibilité

SVG dispose de deux propriétés, 'display' et 'visibility', pour le contrôle de la visibilité des éléments graphiques ou (dans le cas de 'display') des éléments conteneurs.

Les différences entre ces deux propriétés sont les suivantes :

• Quand elle s'applique à un élément conteneur, la propriété 'display' avec une valeur de none entr&aicirc;ne l'invisibilité de celui-ci et de tous ses enfants ; ainsi, elle agit sur des groupes d'éléments globalement. Par contre, la propriété 'visibility' ne s'applique qu'à des éléments graphiques individuels. Un paramètre hidden pour 'visibility' sur un élément 'g' rendra ses enfants invisibles tant que ceux-ci n'aient pas une valeur de visible pour leur propriété 'visibility'. Remarquer que la propriété 'visibility' n'est pas héritable ;
• Quand la propriété 'display' a une valeur de none, alors l'élément donné ne fait pas partie de l'arbre de rendu. Inversement, pour la propriété 'visibility' avec une valeur de hidden, le traitement a lieu comme si l'élément faisait partie de l'arbre de rendu et occupait toujours un espace, mais sans être effectivement rendu sur le canevas. Cette distinction a une implication sur les éléments 'tspan', 'tref' et 'altGlyph', sur le traitement des événements, sur le calcul de la boîte englobante et sur les for calculation of tracés de rognage. Si 'display' a une valeur de none sur un élément 'tspan', 'tref' ou 'altGlyph', alors la chaîne textuelle est ignorée dans la disposition du texte ; inversement, 'visibility' a une valeur de hidden, la chaîne textuelle est prise en compte pour la disposition du texte (i.e., elle occupe un espace bien que n'étant pas rendue sur le canevas). Pour ce qui est des événements, si 'display' a une valeur de none, l'élément ne reçoit aucun événement ; inversement, si 'visibility' a une valeur de hidden, l'élément peut toujours recevoir des événements, en fonction de la valeur de la propriété 'pointer-events'. La géométrie d'un élément graphique, avec la propriété 'display' et une valeur de none, n'est pas prise en compte dans les calculs de la boîte englobante et ceux des tracés de rognage ; par contre, même ayant une valeur de hidden pour la propriété 'visibility', la géométrie d'un élément graphique intervient toujours dans les calculs de boîte englobante et de tracé de rognage.

Une valeur display: none indique que l'élément donné et ses enfants ne seront pas rendus directement(i.e., ceux-ci ne sont pas présents dans l'arbre de rendu). Toute autre valeur que none ou inherit indique que l'élément donné sera rendu par l'agent utilisateur SVG.

La propriété 'display' n'agit que sur le rendu direct d'un élément donné, alors qu'elle n'empêche pas les éléments d'être appelés par d'autres éléments. Par exemple, une valeur display: none sur un élément 'path' empêchera le rendu direct de celui-ci sur le canevas, mais l'élément 'path' peut toujours être appelés par un élément 'textPath' ; en outre, sa géométrie sera utilisée dans un traitement du texte sur un tracé, même si l'élément 'path' a une valeur display: none.

La propriété 'display' affecte également le rendu direct sur des canevas hors-écran, comme cela arrive avec le modèle d'implémentation des masques. Ainsi, un paramétrage display: none sur un enfant d'un élément 'mask' empêchera l'élément enfant en question d'être rendu comme partie du masque. De la même façon; un paramétrage display: none sur un enfant d'un élément 'clipPath' empêchera l'élément enfant en question de contribuer au tracé de rognage.

Les éléments avec display: none n'occupe aucun espace lors des opérations de disposition de texte, ne reçoivent aucun événement et ne contribuent pas aux calculs des boîtes de délimitation et des tracés de rognage.

Exceptés les compléments apportés dans cette spécification, la définition normative se trouve dans la définition CSS2 de la propriété 'display' vf..

visible

L'élément graphique courant est visible.

hidden ou collapse

L'élément graphique courant est invisible (i.e., rien n'est peint sur le canevas).

Remarquer que si la valeur de la propriété 'visibility' est hidden pour un élément 'tspan', 'tref' ou 'altGlyph', alors le texte est invisible mais occupe toujours un espace pour les calculs de disposition du texte.

En fonction de la valeur de la propriété 'pointer-events', les éléments graphiques dont la propriété 'visibility' est hidden sont susceptibles de recevoir des événements.

Exceptés les compléments apportés dans cette spécification, la définition normative se trouve dans la définition CSS2 de la propriété 'visibility' vf..

11.6 Les marqueurs

11.6.1 Introduction

Un marqueur est un symbole qui est attaché à un ou plusieurs sommets d'un élément 'path', 'line', 'polyline' et 'polygon'. On utilise typiquement les marqueurs pour faire des flèches ou des marqueurs multiples. On peut définir une flêche en attachant un marqueur au début ou à la fin des sommets des éléments 'path', 'line' ou 'polyline'. On peut définir des marqueurs multiples en attachant un marqueur à tous les sommets d'un élément 'path', 'line', 'polyline' ou 'polygon'.

On définit le graphique pour un marqueur avec un élément 'marker'. Pour indiquer qu'un élément 'marker' doit être rendu sur les sommets d'un élément 'path', 'line', 'polyline' ou 'polygon', on paramètre une ou plusieurs propriétés de marqueur ('marker', 'marker-start', 'marker-mid' ou 'marker-end') qui appellent l'élément 'marker' en question.

L'exemple Marker dessine un symbole de marqueur triangulaire comme une flêche à la fin d'un tracé.

<?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="2in" 
     viewBox="0 0 4000 2000" 
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>Mettre une flèche à la fin d'un tracé.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100" 
        marker-end="url(#Triangle)"  />
</svg>

Exemple Marker

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

Les marqueurs peuvent être animés. Les effets animés apparaîtront sur tous les marqueurs courants employés dans le document.

11.6.2 L'élément 'marker'

L'élément 'marker' définit le graphique qui doit être utilisé pour le dessin de flèches ou de marqueurs multiples sur un élément 'path', 'line', 'polyline' ou 'polygon' donné.
 

<!ENTITY % markerExt "" >
<!ELEMENT marker (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;%markerExt;)* >
<!ATTLIST marker
  %stdAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  viewBox %ViewBoxSpec; #IMPLIED
  preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
  refX %Coordinate; #IMPLIED
  refY %Coordinate; #IMPLIED
  markerUnits (strokeWidth | userSpaceOnUse) #IMPLIED
  markerWidth  %Length; #IMPLIED
  markerHeight %Length; #IMPLIED
  orient CDATA #IMPLIED >

Les marqueurs sont dessinés de manière à ce que leur point de référence (i.e., les attributs refX et refY) soit positionné au sommet donné. En d'autres termes, l'agent utilisateur construit une transformation en translation pour faire que le point (refX et refY) dans le système de coordonnées du contenu du marqueur (après les éventuelles transformations dues aux attributs viewBox et preserveAspectRatio) s'aligne exactement sur le sommet donné.

La feuille de style de l'agent utilisateur établit la valeur de la propriété 'overflow' des éléments 'marker' à hidden, ce qui entraîne la création d'un tracé de rognage rectangulaire sur les limites du carreau du marqueur. À moins que la propriété 'overflow' ne soit surclassée, tous les graphiques dans le marqueur qui dépassent du rectangle du marqueur seront rognés.

Le contenu de l'élément 'marker' est relatif à un nouveau système de coordonnées. L'attribut markerUnits détermine un facteur d'échelle initial pour la transformation des graphiques du marqueur dans le système de coordonnées utilisateur de l'élément appelant. Un jeu supplémentaire de transformations peut intervenir s'il y a un attribut viewBox, auquel cas le système de coordonnées pour le contenu de l'élément 'marker' sera transformé du fait du traitement des attributs viewBox et preserveAspectRatio. S'il n'y a pas d'attribut viewBox, alors la valeur par défaut supposée de l'attribut viewBox prend une origine qui coïncide avec celle de la zone de visualisation et les mêmes largeur et hauteur que celle-ci.

Les propriétés dans l'élément 'marker' héritent des ancêtres de celui-ci ; les propriétés n'héritent pas de l'élément qui appelle l'élément 'marker'.

Les éléments 'marker' ne sont jamais rendus directement ; leur seul usage est d'être appelés en utilisant les propriétés 'marker', 'marker-start', 'marker-end' et 'marker-mid'. La propriété 'display' ne s'applique pas à l'élément 'marker' ; ainsi, les éléments 'marker' ne sont pas rendus directement, même si la propriété 'display' a une valeur autre que none, et sont disponibles au référencement, même si la propriété 'display' de l'élément 'marker' ou l'un de ses ancêtres a une valeur de none.

Les attributs d'événement et les guetteurs d'événement attachés au contenu d'un élément 'marker' ne sont pas traités ; seuls les aspects de rendu des éléments 'marker' sont traités.

11.6.3 Les propriétés de marqueur

La propriété 'marker-start' définit la flèche ou les marqueurs multiples qui seront dessinés au premier sommet de l'élément 'path' ou de la forme de base donnés. La propriété 'marker-end' définit la flèche ou les marqueurs multiples qui seront dessinés au dernier sommet. La propriété 'marker-mid' définit la flèche ou les marqueurs multiples qui seront dessinés à tous les autres sommets (i.e., tous les sommets sauf le premier et le dernier). Remarquer que pour un élément 'path' qui se termine par un sous-tracé fermé, le dernier sommet correspond au sommet initial du sous-tracé en question. Dans ce cas, si la valeur de la propriété 'marker-end' n'est pas none, alors il est possible que deux marqueurs soient rendus à ce sommet. Pour empêcher ceci, on peut spécifier une valeur none pour la propriété 'marker-end'. (Remarquer que les mêmes commentaires s'appliquent aux éléments 'polygon').

none

Aucun symbole de marqueur ne sera dessiné au(x) sommet(s) donné(s).

<uri>

La valeur <uri> est une référence d'URI vers l'élément 'marker' qui sera utilisé comme symbole de flèche ou marqueur multiple au sommet ou aux sommets donnés. Si la référence d'URI n'est pas valide (par exemple, elle désigne un objet qui n'est pas défini ou qui n'est pas un élément 'marker'), alors le ou les marqueurs ne seront pas dessinés.

La propriété 'marker' spécifie le symbole de marqueur qui sera utilisé pour tous les points sur les jeux, la valeur pour tous les sommets de l'élément 'path' ou de la forme de base donnés. C'est un raccourci pour les trois propriétés de marqueur individuelles :

11.6.4 Le détail du rendu des marqueurs

Les marqueurs sont dessinés après que l'objet donné est rempli et liseré.

Pour chaque marqueur dessiné, un nouveau système de coordonnées utilisateur temporaire est établi pour que le marqueur soit correctement positionné et dimensionné, comme suit :

• Les axes du nouveau système de coordonnées utilisateur temporaire sont alignés en fonction de l'attribut orient sur l'élément 'marker' et de la pente de la courbe au sommet donné. (Remarque : s'il y a une discontinuité à un sommet, la pente correspond alors à la moyenne des pentes des deux segments de la courbe qui se rejoignent au sommet donné. Si on ne peut déterminer une pente, alors elle est sensée être de zéro) ;
• Un nouveau système de coordonnés temporaire est établi par l'attribut markerUnits. Si la valeur de markerUnits est égale à strokeWidth, alors le nouveau système de coordonnées utilisateur temporaire est le produit de la mise à l'échelle du système de coordonnées utilisateur courant par la valeur courante de la propriété 'stroke-width'. Si la valeur de markerUnits est égale à userSpaceOnUse, alors aucune transformation d'échelle supplémentaire n'est appliquée ;
• Un jeu de transformations supplémentaire peut survenir si l'élément 'marker' inclut un attribut viewBox, auquel cas des transformations supplémentaires sont mises en œuvre pour produire le résultat nécessaire dû aux attributs viewBox et preserveAspectRatio ;
• Si la propriété 'overflow' sur l'élément 'marker' spécifie que le marqueur doit être rogné par sa zone de visualisation, alors un tracé de rognage implicite est établi aux limites de la zone de visualisation.

L'effet de rendu d'un marqueur est comme si le contenu de l'élément 'marker' appelé était cloné en profondeur sur un arbre du DOM séparé non exposé, pour chaque instance du marqueur. L'arbre du DOM cloné n'étant pas exposé, le DOM SVG ne montre pas l'instance clonée du marqueur.

Pour les agents utilisateurs qui gèrent le style avec CSS, le clonage en profondeur conceptuel de l'élément 'marker' appelé, en un arbre du DOM non exposé, copie également toutes les valeurs de propriété issues de la cascade CSS [CSS2-CASCADE vf.] ainsi que l'héritage de propriété de l'élément appelé et son contenu. Les sélecteurs CSS2 peuvent s'appliquer aux éléments originaux (i.e., appelés), parce que ceux-ci font partie de la structure formelle du document. Les sélecteurs CSS2 ne peuvent pas s'appliquer (conceptuellement) à l'arbre du DOM cloné, parce que son contenu ne fait pas partie de la structure formelle du document.

Pour illustrer le propos, on répète l'exemple de marqueur montré précédemment :

<?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="2in" 
     viewBox="0 0 4000 2000" 
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>Mettre une flèche à la fin d'un tracé.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100" 
        marker-end="url(#Triangle)"  />
</svg>

L'effet de rendu du fichier ci-dessus sera visuellement identique à celui qui suit :

<?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="2in" 
     viewBox="0 0 4000 2000" 
     xmlns="http://www.w3.org/2000/svg">

  <desc>Fichier qui produit le même effet 
      que pour le fichier exemple de marqueur, mais sans
      utiliser de marqueur.
  </desc>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <!-- Le tracé comme précédemment mais sans les propriétés de marqueur. -->
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"  />

  <!-- La logique suivante simule le dessin d'un marqueur
       au sommet final du tracé. -->

  <!-- Tout d'abord, bouger l'origine du système de coordonnées utilisateur
          pour que celle-ci s'aligne maintenant sur le point final du tracé. -->
  <g transform="translate(2500,1250)" >

    <!-- Pivoter le système de coordonnées de 45 degrés
            car le marqueur indiquait orient="auto" et car le segment final du tracé
            va dans une direction de 45 degrés. -->
    <g transform="rotate(45)" >

      <!-- Changer l'échelle du système de coordonnées pour qu'il corresponde
              avec celui indiqué par l'attribut 'markerUnits', qui ici a une valeur
              de "strokeWidth". Ainsi, on adapte l'échelle du système de coordonnées
              par la valeur courante de la propriété 'stroke-width', qui est 100. -->
      <g transform="scale(100)" >

        <!-- Effectuer une translation du système de coordonnées de
             (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
             pour que le point (refX,refY) dans le marqueur s'aligne avec le sommet.
             Dans ce cas, on utilise la valeur par défaut de l'attribut 'preserveAspectRatio'
             ('xMidYMid meet'), ce qui signifie trouver un facteur d'échelle uniforme
             (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY), de façon à
             ce que la boîte loge entièrement dans la zone de visualisation ('meet')
             et soit centrée ('xMidYMid'). Dans ce cas, le facteur d'échelle uniforme
             est markerHeight/viewBoxHeight=3/10=.3. Ainsi la translation est de
             (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
        <g transform="translate(0,-1.5)" >

          <!-- Il y a un tracé de rognage implicite parce que la feuille de
              style de l'agent utilisateur indique une valeur de "hidden" pour la
              propriété 'overflow' sur les marqueurs. Pour ceci, créer
              un tracé de rognage aux limites de la zone de visualisation.
              Remarquer qu'ici, la zone de visualisation s'étend de 0.5 unités
              à gauche et à droite de la boîte du fait d'un facteur
              d'échelle uniforme, de ratios différents pour
              markerWidth/viewBoxWidth et markerHeight/viewBoxHeight et de l'alignement
              'xMidYMid' -->
          <clipPath id="cp1" >
            <rect x="-0.5" y="0" width="4" height="3" />
          </clipPath>
          <g clip-path="url(#cp1)" >

            <!-- Adapter l'échelle du système de coordonnées
               par le facteur d'échelle uniforme markerHeight/viewBoxHeight=3/10=.3
               pour établir un systè de coordonnées en unités
               de boîte. -->
            <g transform="scale(.3)" >

              <!-- Cet élément 'g' porte toutes les valeurs
               de propriété issues de la cascade et de l'héritage de
               propriété de l'élément 'marker' original.
               Dans cet exemple, ni remplissage ni liseré ne sont spécifiés
               sur l'élément 'marker' ou l'un de ses ancêtres, ainsi les
               valeurs initiale "black" et "none" sont utilisées, respectivement. -->
              <g fill="black" stroke="none" >

                <!-- Expansion du contenu de l'élément 'marker'. -->
                <path d="M 0 0 L 10 5 L 0 10 z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

11.7 Les propriétés de rendu

11.7.1 Les propriétés d'interpolation de couleur : 'color-interpolation' et 'color-interpolation-filters'

L'agent utilisateur SVG effectue des interpolations et des compositions de couleur à diverses étapes du traitement du contenu SVG. Deux propriétés contrôlent l'espace de couleur utilisée pour des catégories particulières d'opérations graphiques : 'color-interpolation' et 'color-interpolation-filters'. Le tableau suivant montre quelle propriété s'applique à une opération graphique donnée :

Les deux propriétés se répartissent en opérations de couleur qui surviennent dans l'espace de couleur sRGB ou dans un espace de couleur RGB linéarisé (linéaire dans les faibles énergies).

Les formules de conversion entre l'espace de couleur sRGB (i.e., non linéaire avec une courbe gamma 2.2) et l'espace de couleur RGB linéarisé (i.e., valeurs de couleur exprimées comme valeurs sRGB tri-stimulées sans courbe gamma) peuvent être trouvées dans [SRGB]. Pour illustrer le propos, la formule suivante montre la conversion de l'espace sRGB vers un espace RGB linéarisé :

  R[sRGB] = R[sRGB-8bit] / 255
  G[sRGB] = G[sRGB-8bit] / 255
  B[sRGB] = B[sRGB-8bit] / 255

If R[sRGB], G[sRGB], B[sRGB] <= 0.04045

  R[linearRGB] = R[sRGB] / 12.92
  G[linearRGB] = G[sRGB] / 12.92
  B[linearRGB] = B[sRGB] / 12.92

else if R[sRGB], G[sRGB], B[sRGB] > 0.04045

  R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4
  G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4
  B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4

  R[linearRGB-8bit] = R[linearRGB] * 255
  G[linearRGB-8bit] = G[linearRGB] * 255
  B[linearRGB-8bit] = B[linearRGB] * 255

Les valeurs de couleur hors-espace, si l'agent utilisateur le gère, sont également converties à l'aide de ces formules. (Voir Le rattachement de valeurs à une plage de valeurs restreinte).

auto

Indique que l'agent utilisateur peut choisir entre l'un ou l'autre des espaces correspondants aux valeurs sRGB et linearRGB pour une interpolation de couleur. Avec cette option, l'auteur ne demande pas que l'interpolation de couleur survienne dans un espace particulier.

sRGB

Indique que l'interpolation de couleur devrait survenir dans l'espace de couleur sRGB.

linearRGB

Indique que l'interpolation de couleur devrait survenir dans l'espace de couleur RGB linéarisé, décrit ci-dessus.

La propriété 'color-interpolation' spécifie l'espace de couleur pour les interpolations de dégradé, les animations de couleur et la composition alpha.

Quand un élément enfant est mélangé dans un arrière-plan, la valeur de la propriété 'color-interpolation' sur l'enfant détermine le type du mélange, et non celle de la propriété 'color-interpolation' sur le parent. Quant aux dégradés, qui utilisent l'attribut xlink:href pour référencer un autre dégradé, ils utilisent la valeur de la propriété 'color-interpolation' de l'élément dégradé qui est directement appelé par les propriétés 'fill' ou 'stroke'. Lors d'une animation de couleurs, l'interpolation de couleur s'effectue en fonction de la valeur de la propriété 'color-interpolation' sur l'élément qui est en cours d'animation.

auto

Indique que l'agent utilisateur peut choisir entre l'un ou l'autre des espaces correspondants aux valeurs sRGB ou linearRGB pour les opérations de couleur sur les effets de filtre. Cette option indique que l'auteur ne demande pas à ce que les opérations de couleur interviennent dans un espace de couleur particulier.

sRGB

Indique que les opérations de couleur sur les effets de filtre devraient survenir dans l'espace de couleur sRGB.

linearRGB

Indique que les opérations de couleur sur les effets de filtre devraient survenir dans l'espace de couleur RGB linéarisé.

La propriété 'color-interpolation-filters' spécifie l'espace de couleur pour les opérations d'imagerie effectuées via des effets de filtre.

Remarquer que la propriété 'color-interpolation-filters' a une valeur initiale qui diffère de celle de la propriété 'color-interpolation'. La propriété 'color-interpolation-filters' a pour valeur initiale linearRGB, alors que 'color-interpolation' a pour valeur initiale sRGB. Ainsi, par défaut, les opérations d'effets de filtre surviennent dans l'espace de couleur RGB linéarisé, alors que toutes les autres interpolations de couleur surviennent dans l'espace de couleur sRGB.

11.7.2 La propriété 'color-rendering'

Le créateur de contenu SVG peut vouloir signifier à l'implémentation comment arriver à des compromis entre vitesse de rendu et qualité lors d'une interpolation de couleur et d'une composition. La propriété 'color-rendering' indique à l'agent utilisateur SVG comment optimiser ses opérations d'interpolation de couleur et de composition.

La propriété 'color-rendering' a préséance sur la propriété 'color-interpolation-filters'. Par exemple, supposons les spécifications 'color-rendering:optimizeSpeed' et 'color-interpolation-filters:linearRGB'. Dans ce cas, l'agent utilisateur SVG devrait effectuer les opérations de couleur en favorisant la performance, ce qui peut vouloir dire sacrifier la précision de l'interpolation de couleur telle que spécifiée par 'color-interpolation-filters:linearRGB'.

auto

Indique que l'agent utilisateur devra faire les compromis appropriés entre vitesse et qualité, la qualité ayant plus de poids que la vitesse.

optimizeSpeed

Indique que l'agent utilisateur devra favoriser la vitesse du rendu sur la qualité. Pour les appareils d'affichage RGB, cette option amènera parfois l'agent utisateur à effectuer une interpolation de couleur et une composition dans l'espace de couleur RGB de l'appareil.

optimizeQuality

Indique que l'agent utilisateur devra favoriser la qualité sur la vitesse de rendu.

11.7.3 La propriété 'shape-rendering'

Le créateur de contenu SVG peut vouloir signifier à l'implémentation les compromis à faire quand elle rend des éléments graphiques vectoriels, tels que les éléments 'path', et desformes de base, tels que les cercles et les rectangles. La propriété 'shape-rendering' offre cette possibilité.

auto

Indique que l'agent utilisateur devra faire les compromis appropriés entre vitesse, netteté des contours et précision géométrique, cette dernière étant plus importante que les deux autres.

optimizeSpeed

Indique que l'agent utilisateur devra favoriser la vitesse de rendu sur la précision géométrique et la netteté des contours. Cette option amènera parfois l'agent utilisateur à désactiver l'anti-crénelage des contours.

crispEdges

Indique que l'agent utilisateur devra essayer de favoriser le contraste entre bords francs d'une image sur la vitesse de rendu et la précision géométrique. Pour obtenir des bords nets, l'agent utilisateur peut être amené à désactiver l'anti-crénelage de toutes les lignes et les courbes ou éventuellement juste pour les lignes droites proches de la verticale ou de l'horizontale. Il peut également ajuster la position et l'épaisseur des lignes pour en aligner les bords aux pixels de l'appareil.

geometricPrecision

Indique que l'agent utilisateur devra favoriser la précision géométrique sur la vitesse et la netteté des bords.

11.7.4 La propriété 'text-rendering'

Le créateur de contenu SVG peut vouloir signifier à l'implémentation les compromis à faire pour le rendu du texte. La propriété 'text-rendering' offre cette possibilité.

auto

Indique que l'agent utilisateur devra faire les compromis appropriés entre vitesse, lisibilité et précision géométrique, cette dernière ayant plus d'importance que les deux autres.

optimizeSpeed

Indique que l'agent utilisateur devra favoriser la vitesse de rendu sur la lisibilité et la précision géométrique. Cette option amènera parfois l'agent utilisateur à désactiver l'anti-crénelage du texte.

optimizeLegibility

Indique que l'agent utilisateur devra favoriser la lisibilité sur la vitesse de rendu et la précision géométrique. L'agent utilisateur sera souvent amené à choisir entre l'application de techniques d'anti-crénelage, d'un mécanisme interne pour l'approche de la police ou des deux pour la production du texte le plus lisible.

geometricPrecision

Indique que l'agent utilisateur devra favoriser la précision géométrique sur la lisibilité et la vitesse de rendu. Cette option entraînera habituellement l'agent utilisateur à interrompre l'emploi d'approches de façon à ce que les contours de glyphe soient dessinés avec une précision géométrique comparable à celle des données de tracé.

11.7.5 La propriété 'image-rendering'

Le créateur de contenu SVG peut vouloir signifier à l'implémentation de faire des compromis entre vitesse et qualité lors du traitement d'une image. La propriété 'image-rendering' donne à l'agent utilisateur SVG des indications pour l'optimisation du rendu d'une image.

auto

Indique que l'agent utilisateur devra faire les compromis appropriés entre vitesse et qualité, la qualité ayant plus d'importance que la vitesse. L'agent utilisateur emploiera un algorithme de re-échantillonnage au moins équivalent au re-échantillonnage au plus proche voisin, mais un re-échantillonnage bi-linéaire est préféré. Pour ceux des visionneurs SVG conformes en haute qualité, L'agent utilisateur devra employer un algorithme de re-échantillonnage au moins équivalent au re-échantillonnage bi-linéaire.

optimizeQuality

Indique que l'agent utilisateur devra favoriser la qualité sur la vitesse de rendu. L'agent utilisateur devra employer un algorithme au moins équivalent au re-échantillonnage bi-linéaire.

optimizeSpeed

Indique que l'agent utilisateur devra favoriser la vitesse de rendu sur la qualité. L'agent utilisateur devrait employer un algorithme de re-échantillonnage qui vise un rendu rapide, tout en étant au moins équivalent à un re-échantillonnage au plus proche voisin. Si les objectifs de vitesse peuvent être atteints avec des algorithmes plus performants en terme de qualité, alors l'agent utilisateur devrait employer ceux-ci au lieu d'un re-échantillonnage au plus proche voisin.

Dans tous les cas, le re-échantillonnage doit avoir lieu dans un espace de couleur en couleurs véritables (par exemple, 24-bit), même si les données originales et/ou l'appareil cible sont en couleurs indexées.

11.8 L'héritage des propriétés de peinture

Les valeurs de toutes les propriétés de peintures décrites dans ce chapitre peuvent s'hériter du parent d'un objet donné. Cependant, une peinture intervient toujours individuellement sur chacun des éléments graphiques, jamais au niveau de l'