4 septembre 2001

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


Contenu


 

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 :

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 :

<peinture>:       none |
currentColor |
<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] |
<uri> [ none | currentColor | <couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)]] |
inherit
vf.
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

'fill'
Valeur :   <peinture> (voir la section La spécification de la peinture)
Valeur initiale :   black
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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'.

.
'fill-rule'
Valeur :   nonzero | evenodd | inherit vf.
Valeur initiale :   nonzero
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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 :

Image montrant une r&eagrave;gle fill non nulle

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 :

Image montrant une r&eagrave;gle 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).

'fill-opacity'
Valeur :   <valeur-opacité> | inherit vf.
Valeur initiale :   1
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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.

'stroke'
Valeur :   <peinture> (Voir la section La spécification de peinture)
Valeur initiale :   none
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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.


'stroke-width'
Valeur :   <longueur> | inherit vf.
Valeur initiale :   1
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   oui
Médias :   visuel
Animable :   oui
<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).


'stroke-linecap'
Valeur :   butt | round | square | inherit vf.
Valeur initiale :   butt
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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.

Image montrant les alternatives stroke-linecap

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


'stroke-linejoin'
Valeur :   miter | round | bevel | inherit vf.
Valeur initiale :   miter
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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.

Image montrant les alternatives stroke-linejoin

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


'stroke-miterlimit'
Valeur :   <limite-onglet> | inherit vf.
Valeur initiale :   4
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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).


'stroke-dasharray'
Valeur :   none | <motif-tiret> | inherit vf.
Valeur initiale :   none
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   oui (voir ci-dessous)
Médias :   visuel
Animable :   oui (non cumulatif)

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.


'stroke-dashoffset'
Valeur :   <longueur> | inherit vf.
Valeur initiale :   0
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   voir explication
Médias :   visuel
Animable :   oui

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.


'stroke-opacity'
Valeur :   <valeur-opacité> | inherit vf.
Valeur initiale :   1
S'applique à :   toutes les formes et ceux des éléments à contenu textuel
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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 :

'display'
Valeur :   inline | block | list-item |
run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | vf.inherit
Valeur initiale :   inline
S'applique à :   ceux des éléments graphiques 'svg', 'g', 'switch', 'a', 'foreignObject', (y compris l'élément 'text') et aux sous-éléments de texte (i.e., 'tspan', 'tref', 'altGlyph', 'textPath')
Héritée :   non
Pourcentages :   sans objet
Médias :   tous
Animable :   oui

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..

'visibility'
Valeur :   visible | hidden | collapse | inherit vf.
Valeur initiale :   visible
S'applique à :   ceux des éléments graphiques (y compris l'élément 'text') et aux sous-éléments de texte (i.e., 'tspan', 'tref', 'altGlyph', 'textPath' et 'a')
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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
Exemple Marker - Marqueur triangulaire en fin de tracé

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 >

Définitions de l'attribut :

markerUnits = "strokeWidth | userSpaceOnUse"
Définit le système de coordonnées pour les attributs markerWidth et markerHeight ainsi que le contenu de l'élément 'marker'.
Pour markerUnits="strokeWidth", les attributs markerWidth et markerHeight et le contenu de l'élément 'marker' représentent des valeurs dans un système de coordonnées, qui a une seule unité égale à la taille en unités utilisateur de l'épaisseur du liseré courant (voir la propriété 'stroke-width'), en place pour l'objet graphique appelant le marqueur.
Pour markerUnits="userSpaceOnUse", les attributs markerWidth et markerHeight ainsi que le contenu de l'élément 'marker' représentent des valeurs dans le système de coordonnées utilisateur courant en place pour l'objet graphique appelant le marqueur (i.e., le système de coordonnées utilisateur de l'élément appelant l'élément 'marker' via les propriétés 'marker', 'marker-start', 'marker-mid' ou 'marker-end').
Si l'attribut markerUnits n'est pas spécifié, alors l'effet est comme si une valeur de strokeWidth était spécifiée.
Animable : oui.
refX = "<coordonnée>"
La coordonnée sur l'axe-x du point de référence qui doit s'aligner exactement sur la position du marqueur. La coordonnée est définie dans le système de coordonnées après l'application des attributs viewBox et preserveAspectRatio.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
refY = "<coordonnée>"
La coordonnée sur l'axe-y du point de référence qui doit s'aligner exactement sur la position du marqueur. La coordonnée est définie dans le système de coordonnées après l'application des attributs viewBox et preserveAspectRatio.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
markerWidth = "<longueur>"
Représente la largeur de la zone de visualisation dans laquelle le marqueur doit se logr pour son rendu.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "3" était spécifiée.
Animable : oui.
markerHeight = "<longueur>"
Représente la hauteur de la zone de visualisation dans laquelle le marqueur doit se loger pour son rendu.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "3" était spécifiée.
Animable : oui.
orient = "auto | <angle>"
Indique l'orientation du marqueur.

Une valeur de auto signifie que le marqueur est placé de telle façon que son axe-x positif soit orienté ainsi : (a) s'il y a un segment de tracé qui entre dans le sommet et un autre segment de tracé qui sort du sommet, l'axe-x positif du marqueur devrait pointer vers la bissectrice de l'angle du sommet donné, un côté de cet angle consistant du vecteur tangent au segment de tracé entrant dans le sommet et l'autre côté consistant du vecteur tangent au segment de tracé sortant du sommet (remarque : si les vecteurs tangents sont les mêmes, la bissectrice de l'angle est égale aux deux vecteurs tangents), (b) s'il n'y a qu'un seul segment de tracé qui entre dans le sommet (par exemple, le dernier sommet d'un tracé ouvert), l'axe-x positif du marqueur devrait pointer dans la même direction que le vecteur tangent du segment de tracé entrant, (c) s'il n'y a qu'un seul segment de tracé qui sort du sommet (par exemple, le premier somment d'un tracé ouvert), l'axe-x positif du marqueur devrait pointer dans la même direction que le vecteur tangent au segment de tracé sortant. (Se reporter aux Remarques pour l'implémentation de l'élément 'path' pour des explications plus complètes sur la directionnalité des segments de tracé).

Dans tous les cas, pour les sous-tracés fermés (par exemple, les sous-tracés qui s'achèvent par une commande 'closepath'), l'orientation du marqueur correspondant au point initial du sous-tracé est calculée en supposant que :
  • le segment de tracé allant vers le sommet est le segment correspondant à la commande "closepath" ;
  • le segment de tracé sortant du sommet est le premier segment dans le sous-tracé.

Quand une commande 'closepath' est suivie par une commande autre que 'moveto', alors l'orientation du marqueur correspondant à la commande 'closepath' est calculé en supposant que :
  • le segment de tracé allant vers le sommet est le segment correspondant à la commande "closepath" ;
  • le segment de tracé sortant du sommet est le premier segment du sous-tracé subséquent.

Une valeur <angle> représente une orientation particulière dans l'espace utilisateur de l'objet graphique qui appelle le marqueur. Par exemple, pour une valeur de "0", le marqueur sera dessiné de telle façon que son axe-x est aligné avec l'axe-x de l'espace utilisateur de l'objet graphique qui appelle le marqueur. Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui (non cumulatif, seulement les éléments 'set' et 'animate').

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, externalResourcesRequired, viewBox, preserveAspectRatio, style, %PresentationAttributes-All;.

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').

'marker-start', 'marker-end', marker-mid'
Valeur :   none |
inherit vf. |
<uri>
Valeur initiale :   none
S'applique à :   ceux des éléments 'path', 'line', 'polyline' et 'polygon'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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 :

'marker'
Valeur :   voir les propriétés individuelles
Valeur initiale :   voir les propriétés individuelles
S'applique à :   ceux des éléments 'path', 'line', 'polyline' et 'polygon'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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 :

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 :

Opération graphique Propriété correspondante
l'interpolation entre les valeurs limites d'un dégradé (voir la section Les dégradés) 'color-interpolation'
l'interpolation de couleur lors d'une animation de couleur (voir l'élément 'animateColor') 'color-interpolation'
la composition alpha des éléments graphiques avec l'arrière-plan courant 'color-interpolation'
les effets de filtre 'color-interpolation-filters'

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).

'color-interpolation'
Valeur :   auto | sRGB | linearRGB | inherit vf.
Valeur initiale :   sRGB
S'applique à :   ceux des éléments conteneurs, des éléments graphiques et l'élément 'animateColor'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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.

'color-interpolation-filters'
Valeur :   auto | sRGB | linearRGB | inherit vf.
Valeur initiale :   linearRGB
S'applique à :   primitives de filtre
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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'.

'color-rendering'
Valeur :   auto | optimizeSpeed | optimizeQuality | inherit vf.
Valeur initiale :   auto
S'applique à :   ceux des éléments conteneurs, des éléments graphiques et l'élément 'animateColor'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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é.

'shape-rendering'
Valeur :   auto | optimizeSpeed | crispEdges |
geometricPrecision | inherit vf.
Valeur initiale :   auto
S'applique à :   shapes
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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é.

'text-rendering'
Valeur :   auto | optimizeSpeed | optimizeLegibility |
geometricPrecision | inherit vf.
Valeur initiale :   auto
S'applique à :   ceux des éléments 'text'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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.

'image-rendering'
Valeur :   auto | optimizeSpeed | optimizeQuality | inherit vf.
Valeur initiale :   auto
S'applique à :   images
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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'élément conteneur (par exemple, un élément 'g'). Ainsi, dans le document SVG suivant, bien que le remplissage en dégradé soit spécifié sur l'élément 'g', le dégradé est simplement hérité, au travers de l'élément 'g', descendant dans chaque rectangle, chacun des rectangles étant rendu tel que son intérieur soit peint avec le dégradé.

L'exemple Héritage

<?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="7cm" height="2cm" viewBox="0 0 700 200"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Les dégradés s'appliquent aux nœuds enfants
  </desc>
  <g>
    <defs>
      <linearGradient id="MonDegrade" gradientUnits="objectBoundingBox">
        <stop offset="0%" stop-color="#F60" />
        <stop offset="100%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <rect x="1" y="1" width="698" height="198"
          fill="none" stroke="blue" stroke-width="2" />
    <g fill="url(#MonDegrade)" >
      <rect x="100" y="50" width="200" height="100"/>
      <rect x="400" y="50" width="200" height="100"/>
   </g>
  </g>
</svg>
Exemple Héritage
Exemple Héritage

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

Toutes les propriétés de peinture, définies par rapport à la boîte englobante d'un objet, utilisent la boîte de délimitation de l'élément graphique sur lequel l'opération s'applique. Remarquer que les éléments de texte sont définis de telle façon que toutes les opérations de peinture, définies par rapport à la boîte englobante d'un objet, utilisent la boîte de délimitation de l'élément 'text' entier. (Voir la discussion sur la boîte englobante d'un objet et les éléments de texte.)


11.9 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGPaint, SVGMarkerElement.


L'interface SVGPaint

L'interface SVGPaint correspond au type de base <peinture> et représente les valeurs des propriétés 'fill' et 'stroke'.


Définition IDL
interface SVGPaint : SVGColor { 
  // Paint Types
  const unsigned short SVG_PAINTTYPE_UNKNOWN               = 0;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR              = 1;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR     = 2;
  const unsigned short SVG_PAINTTYPE_NONE                  = 101;
  const unsigned short SVG_PAINTTYPE_CURRENTCOLOR          = 102;
  const unsigned short SVG_PAINTTYPE_URI_NONE              = 103;
  const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR      = 104;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR          = 105;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;
  const unsigned short SVG_PAINTTYPE_URI                   = 107;

  readonly attribute unsigned short paintType;
  readonly attribute DOMString      uri;

  void setUri ( in DOMString uri );
  void setPaint ( in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor )
                  raises( SVGException );
};

Groupe de définition des types de peinture
Constantes définies
SVG_PAINTTYPE_UNKNOWN Le type de peinture ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal.
SVG_PAINTTYPE_RGBCOLOR Une couleur sRGB a été spécifiée sans spécification de couleur ICC alternative.
SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR Une couleur sRGB a été spécifiée en même temps qu'une spécification de couleur ICC alternative.
SVG_PAINTTYPE_NONE Correspond à une valeur de "none" dans une spécification de <peinture>.
SVG_PAINTTYPE_CURRENTCOLOR Correspond à une valeur de "currentColor" dans une spécification de <peinture>.
SVG_PAINTTYPE_URI_NONE Un URI a été spécifié, en même temps qu'une valeur explicite "none" comme méthode de peinture de repli en cas d'indisponibilité ou d'invalidité de l'URI.
SVG_PAINTTYPE_URI_CURRENTCOLOR Un URI a été spécifié, en même temps qu'une valeur explicite "currentColor" comme méthode de peinture de repli en cas d'indisponibilité ou d'invalidité de l'URI.
SVG_PAINTTYPE_URI_RGBCOLOR Un URI a été spécifié, en même temps qu'une couleur sRGB comme méthode de peinture de repli en cas d'indisponibilité ou d'invalidité de l'URI.
SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR Un URI a été spécifié, en même temps qu'une couleur sRGB et une couleur ICC alternative comme méthode de peinture de repli en cas d'indisponibilité ou d'invalidité de l'URI.
SVG_PAINTTYPE_URI Seul un URI a été spécifié.
attributs
readonly unsigned short paintType
Le type de peinture, identifié par l'une des constantes ci-dessus.
readonly DOMString uri
Quand l'attribut paintType spécifie un URI, cet attribut reçoit la chaîne de l'URI. Quand paintType ne spécifie pas d'URI, cet attribut reçoit une valeur nulle.
Méthodes
setUri
Donne la valeur SVG_PAINTTYPE_URI_NONE à l'attribut paintType et donne à l'attribut uri la valeur spécifiée.
Paramètres
in DOMString uri L'URI du serveur de peinture voulu.
Aucune valeur retournée
Aucune exception
setPaint
Établit l'attribut paintType comme spécifiés par les paramètres. Si l'attribut paintType requiert un URI, alors l'attribut uri doit avoir une valeur non nulle et être une chaîne valide ; sinon, uri doit avoir une valeur nulle. Si paintType requiert un objet RGBColor, alors l'attribut rgbColor doit être un objet RGBColor valide ; sinon, rgbColor doit avoir une valeur nulle. Si paintType requiert un objet SVGICCColor, alors l'attribut iccColor doit être un objet SVGICCColor valide ; sinon, iccColor doit avoir une valeur nulle.
Paramètres
in unsigned short paintType L'une des constantes définies pour l'attribut paintType.
in DOMString uri L'URI du serveur de peinture voulu, ou nulle.
in DOMString rgbColor La spécification d'une couleur sRGB, ou nulle.
in DOMString iccColor La spécification d'une couleur ICC color, ou nulle.
Aucune valeur retournée
Exceptions
SVGException
SVG_INVALID_VALUE_ERR : déclenchée si l'un des paramètres a une valeur invalide.

L'interface SVGMarkerElement

L'interface SVGMarkerElement correspond à l'élément 'marker'.


Définition IDL
interface SVGMarkerElement : 
                SVGElement,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGFitToViewBox { 

  // Types d'unité de marqueur
  const unsigned short SVG_MARKERUNITS_UNKNOWN        = 0;
  const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
  const unsigned short SVG_MARKERUNITS_STROKEWIDTH    = 2;
  // Types d'orientation de marqueur
  const unsigned short SVG_MARKER_ORIENT_UNKNOWN      = 0;
  const unsigned short SVG_MARKER_ORIENT_AUTO         = 1;
  const unsigned short SVG_MARKER_ORIENT_ANGLE        = 2;

  readonly attribute SVGAnimatedLength      refX;
  readonly attribute SVGAnimatedLength      refY;
  readonly attribute SVGAnimatedEnumeration markerUnits;
  readonly attribute SVGAnimatedLength      markerWidth;
  readonly attribute SVGAnimatedLength      markerHeight;
  readonly attribute SVGAnimatedEnumeration orientType;
  readonly attribute SVGAnimatedAngle      orientAngle;

  void setOrientToAuto (  );
  void setOrientToAngle ( in SVGAngle angle );
};

Groupe de définition des types d'unité de marqueur
Constantes définies
SVG_MARKERUNITS_UNKNOWN Le type d'unité de marqueur ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal.
SVG_MARKERUNITS_USERSPACEONUSE La valeur de l'attribut markerUnits est "userSpaceOnUse".
SVG_MARKERUNITS_STROKEWIDTH La valeur de l'attribut markerUnits est "strokeWidth".
Groupe de définition des types d'orientation de marqueur
Constantes définies
SVG_MARKER_ORIENT_UNKNOWN Le type d'orientation du marqueur ne fait partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal.
SVG_MARKER_ORIENT_AUTO La valeur de l'attribut orient est "auto".
SVG_MARKER_ORIENT_ANGLE La valeur de l'attribut orient est une valeur d'angle.
attributs
readonly SVGAnimatedLength refX
Correspond à l'attribut refX de l'élément 'marker' en question.
readonly SVGAnimatedLength refY
Correspond à l'attribut refY de l'élément 'marker' en question.
readonly SVGAnimatedEnumeration markerUnits
Correspond à l'attribut markerUnits de l'élément 'marker' en question. L'un des types d'unité de marqueur définis ci-dessus.
readonly SVGAnimatedLength markerWidth
Correspond à l'attribut markerWidth de l'élément 'marker' en question.
readonly SVGAnimatedLength markerHeight
Correspond à l'attribut markerHeight de l'élément 'marker' en question.
readonly SVGAnimatedEnumeration orientType
Correspond à l'attribut orient de l'élément 'marker' en question. L'un des types d'orientation de marqueur définis ci-dessus.
readonly SVGAnimatedAngle orientAngle
Correspond à l'attribut orient de l'élément 'marker' en question. Si la valeur de markerUnits est SVG_MARKER_ORIENT_ANGLE, c'est la valeur d'angle pour l'attribut orient ; sinon, c'est zéro.
Méthodes
setOrientToAuto
Donne à l'attribut orient la valeur "auto".
Aucun paramètre
Aucune valeur retournée
Aucune exception
setOrientToAngle
L'attribut orient prend la valeur de l'angle donné.
Paramètres
in SVGAngle angle La valeur de l'angle à utiliser pour l'attribut orient.
Aucune valeur retournée
Aucune exception