4 septembre 2001

6 Le style


Contenu

 

6.1 Les propriétés de style de SVG

SVG utilise des propriétés de style pour décrire de nombreux paramètres de document. Les propriétés de style définissent comment les élémens graphiques du contenu SVG doivent être rendus. SVG utilise des propriétés de style pour ce qui suit :

SVG partage de nombreuses propriétés de style avec CSS [CSS2 vf.] et XSL [XSL vf.]. À l'exception des règles spécifiques supplémentaires de SVG, mentionnées explicitement dans cette spécification, la définition normative des propriétés partagées avec CSS et XSL est celle issue de la spécification CSS2 [CSS2 vf.].

Les propriétés suivantes sont communes à CSS2 et SVG. La plupart d'entre elles sont aussi définies en XSL :

Les propriétés SVG suivantes ne sont pas définies dans [CSS2 vf.]. Leurs définitions normatives complètes se trouvent dans cette spécification ::

On peut trouver un tableau qui liste et récapitule les propriétés de style dans l'Index des propriétés.


6.2 Les scénarios d'utilisation pour le style

SVG propose plusieurs scénarios d'utilisation, chacun pour des besoins différents. Voici les trois scénarios d'utilisation communs :

  1. Un contenu SVG employé comme format d'échange (indépendant du langage de feuille de style) :

    Pour certains scénarios, le but principal est l'interopérabilité fiable d'un contenu SVG entre outils logiciels. La gestion d'un langage de feuille de style donné n'étant pas garantie pour toutes les implémentations, il est requis qu'on puisse spécifier le contenu SVG sans avoir à faire appel à un langage de feuille de style ;

  2. Un contenu SVG généré à partir de XSLT [XSLT] :

    XSLT offre la possibilité de recevoir en entrée un flux de contenu XML arbitraire, de lui appliquer des transformations pouvant être complexes et de générer un contenu SVG en sortie. On peut utiliser XSLT pour transformer des données XML extraites de bases de données en leur représentation graphique SVG. Il est requis qu'un contenu SVG entièrement spécifié puisse être généré à partir de XSLT ;

  3. Un contenu SVG stylé avec CSS [CSS2 vf.] :

    CSS est un langage déclaratif largement répandu pour l'assignation de propriétés de style à un contenu XML, dont SVG. Ce langage représente une combinaison de fonctionnalités, de simplicité et de compacité qui en rend l'emploi souhaitable pour de nombreuses applications de SVG. Il est requis qu'un style CSS puisse être appliqué puisse être appliqué à un contenu SVG.


6.3 Les autres manières de spécifier des propriétés de style

On peut assigner des propriétés de style aux éléments SVG des deux manières suivantes :


6.4 La spécification des propriétés avec les attributs de présentation

Pour chaque propriété de style définie dans cette spécification (voir l'Index des propriétés), il y a un attribut XML correspondant (un attribut de présentation) de même nom qui est disponible pour tous les éléments SVG concernés. Par exemple, SVG possède une propriété 'fill' qui définit comment peindre l'intérieur d'une forme. Il lui correspond un attribut de présentation de même nom (i.e. fill) qui peut être utilisé pour spécifier une valeur à la propriété 'fill' d'un élément donné.

L'exemple suivant montre comment on peut assigner les propriétés 'fill' et 'stroke' à un rectangle en utilisant les attributs de présentation fill et stroke. Le rectangle sera rempli en rouge et son contour sera en bleu :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="200" y="100" width="600" height="300" 
        fill="red" stroke="blue" stroke-width="3"/>
</svg>

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

Les attributs de présentation offrent les avantages suivants :

Dans certaines situations, un contenu SVG qui utilise les attributs de présentation peut avoir des limitations, comparé à un contenu SVG stylé avec un langage de feuille de style comme CSS (voir Le style avec CSS). Dans d'autres situations, comme quand une feuille de style XSLT génère un contenu SVG à partir d'une source XML sémantiquement riche, ces limitations ne sont pas de mise. Selon la situation, certaines des limitations potentielles suivantes peuvent, ou non, s'appliquer aux attributs de présentation :

Pour les agents utilisateurs qui gèrent CSS, les attributs de présentation doivent être traduits en leurs règles de style CSS correspondantes, en fonction des règles décrites dans la section 6.4.4 de la spécification CSS2 L'ordre de priorité des indications de présentation en dehors de CSS vf., avec l'éclairage supplémentaire, que les attributs de présentation soient insérés conceptuellement dans une nouvelle feuille de style de l'auteur, la première dans la collection des feuilles de style de l'auteur. Les attributs de présentation vont ainsi participer à la cascade CSS2 vf., comme s'ils étaient remplacés par une feuille de style CSS correspondante, placée au début de la feuille de style de l'auteur, avec une spécificité de zéro. En général, cela signifie que les attributs de présentation ont une priorité plus basse que les autres règles de style CSS spécifiées dans les feuilles de style de l'auteur ou dans les attributs style.

Les agents utilisateurs qui ne gèrent pas CSS doivent ignorer toutes les règles de style CSS définies dans les feuilles de style CSS et les attributs style. Dans ce cas, la cascade CSS ne s'applique pas. (Par contre, l'héritage de propriété s'applique. Voir le chapitre L'héritage de propriété).

Une déclaration !important vf. dans la définition d'un attribut de présentation représente une erreur.

L'animation d'un attribut de présentation équivaut à l'animation de la propriété correspondante. Ainsi, le même effet est obtenu pour l'animation de l'attribut de présentation avec attributeType = "XML" que pour l'animation de la propriété correspondante attributeType = "CSS".


6.5 Les définitions des entités pour les attributs de présentation

Les entités suivantes sont définies dans la DTD, pour tous les attributs de présentation en SVG :

<!-- Les attributs de présentation suivants ont trait à la spécification des couleurs. -->
<!ENTITY % PresentationAttributes-Color
  "color %Color; #IMPLIED
   color-interpolation (auto | sRGB | linearRGB | inherit) #IMPLIED
   color-rendering (auto | optimizeSpeed | optimizeQuality | inherit) #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments conteneurs. -->
<!ENTITY % PresentationAttributes-Containers
  "enable-background %EnableBackgroundValue; #IMPLIED " >

<!-- Les attributs de présentation concernent les éléments 'feFlood'. -->
<!ENTITY % PresentationAttributes-feFlood
  "flood-color %SVGColor; #IMPLIED
   flood-opacity %OpacityValue; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les opérations de remplissage et de tracé. -->
<!ENTITY % PresentationAttributes-FillStroke
  "fill %Paint; #IMPLIED
   fill-opacity %OpacityValue; #IMPLIED
   fill-rule %ClipFillRule; #IMPLIED
   stroke %Paint; #IMPLIED
   stroke-dasharray %StrokeDashArrayValue; #IMPLIED
   stroke-dashoffset %StrokeDashOffsetValue; #IMPLIED
   stroke-linecap (butt | round | square | inherit) #IMPLIED
   stroke-linejoin (miter | round | bevel | inherit) #IMPLIED
   stroke-miterlimit %StrokeMiterLimitValue; #IMPLIED
   stroke-opacity %OpacityValue; #IMPLIED
   stroke-width %StrokeWidthValue; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les primitives de filtre. -->
<!ENTITY % PresentationAttributes-FilterPrimitives
  "color-interpolation-filters (auto | sRGB | linearRGB | inherit) #IMPLIED " >

<!-- Les attributs de présentation suivants concernent la sélection de la police à utiliser. -->
<!ENTITY % PresentationAttributes-FontSpecification
  "font-family %FontFamilyValue; #IMPLIED
   font-size %FontSizeValue; #IMPLIED
   font-size-adjust %FontSizeAdjustValue; #IMPLIED
   font-stretch (normal | wider | narrower | ultra-condensed | extra-condensed |
                 condensed | semi-condensed | semi-expanded | expanded |
                 extra-expanded | ultra-expanded | inherit) #IMPLIED
   font-style (normal | italic | oblique | inherit) #IMPLIED
   font-variant (normal | small-caps | inherit) #IMPLIED
   font-weight (normal | bold | bolder | lighter | 100 | 200 | 300 |
               400 | 500 | 600 | 700 | 800 | 900 | inherit) #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments de dégradé 'stop'. -->
<!ENTITY % PresentationAttributes-Gradients
  "stop-color %SVGColor; #IMPLIED
   stop-opacity %OpacityValue; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments graphiques. -->
<!ENTITY % PresentationAttributes-Graphics
  "clip-path %ClipPathValue; #IMPLIED
   clip-rule %ClipFillRule; #IMPLIED
   cursor %CursorValue; #IMPLIED
   display (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 | inherit) #IMPLIED
   filter %FilterValue; #IMPLIED
   image-rendering (auto | optimizeSpeed | optimizeQuality | inherit) #IMPLIED
   mask %MaskValue; #IMPLIED
   opacity %OpacityValue; #IMPLIED
   pointer-events (visiblePainted | visibleFill | visibleStroke | visible |
                   painted | fill | stroke | all | none | inherit) #IMPLIED
   shape-rendering (auto | optimizeSpeed | crispEdges | geometricPrecision | inherit) #IMPLIED
   text-rendering (auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit) #IMPLIED
   visibility (visible | hidden | inherit) #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments 'image'. -->
<!ENTITY % PresentationAttributes-Images
  "color-profile CDATA #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments 'feDiffuseLighting'
        et 'feSpecularLighting'. -->
<!ENTITY % PresentationAttributes-LightingEffects
  "lighting-color %SVGColor; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les opérations de marqueur. -->
<!ENTITY % PresentationAttributes-Markers
  "marker-start %MarkerValue; #IMPLIED
   marker-mid %MarkerValue; #IMPLIED
   marker-end %MarkerValue; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments de contenu textuel. -->
<!ENTITY % PresentationAttributes-TextContentElements
  "alignment-baseline (baseline | top | before-edge | text-top | text-before-edge |
                        middle | bottom | after-edge | text-bottom | text-after-edge |
                        ideographic | lower | hanging | mathematical | inherit) #IMPLIED
   baseline-shift %BaselineShiftValue; #IMPLIED
   direction (ltr | rtl | inherit) #IMPLIED
   dominant-baseline (auto | autosense-script | no-change | reset|
                      ideographic | lower | hanging | mathematical | inherit ) #IMPLIED
   glyph-orientation-horizontal %GlyphOrientationHorizontalValue; #IMPLIED
   glyph-orientation-vertical %GlyphOrientationVerticalValue; #IMPLIED
   kerning %KerningValue; #IMPLIED
   letter-spacing %SpacingValue; #IMPLIED
   text-anchor (start | middle | end | inherit) #IMPLIED
   text-decoration %TextDecorationValue; #IMPLIED
   unicode-bidi (normal | embed | bidi-override | inherit) #IMPLIED
   word-spacing %SpacingValue; #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments 'text'. -->
<!ENTITY % PresentationAttributes-TextElements
  "writing-mode (lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit) #IMPLIED " >

<!-- Les attributs de présentation suivants concernent les éléments établissant une zone de visualisation. -->
<!ENTITY % PresentationAttributes-Viewports
  "clip %ClipValue; #IMPLIED
   overflow (visible | hidden | scroll | auto | inherit) #IMPLIED " >

<!-- Ce qui suit est la liste complète des attributs de présentation. -->
<!ENTITY % PresentationAttributes-All
  "%PresentationAttributes-Color;
   %PresentationAttributes-Containers;
   %PresentationAttributes-feFlood;
   %PresentationAttributes-FillStroke;
   %PresentationAttributes-FilterPrimitives;
   %PresentationAttributes-FontSpecification;
   %PresentationAttributes-Gradients;
   %PresentationAttributes-Graphics;
   %PresentationAttributes-Images;
   %PresentationAttributes-LightingEffects;
   %PresentationAttributes-Markers;
   %PresentationAttributes-TextContentElements;
   %PresentationAttributes-TextElements;
   %PresentationAttributes-Viewports;" >

6.6 Le style avec XSL

Les feuilles de style XSL (voir [XSLT]) définissent comment transformer un contenu XML en quelque chose d'autre, habituellement un autre contenu XML. Quand XSLT est utilisé en conjonction avec SVG, le contenu SVG, parfois, servira à la fois d'entrée et de sortie pour les feuilles de style XSL. D'autres fois, les feuilles de style XSL prendront un contenu non-SVG comme entrée et généreront un contenu SVG en sortie.

L'exemple suivant utilise une feuille de style XSL externe pour transformer un contenu SVG en un autre contenu SVG (voir le chapitre Le référencement des feuilles de style externes). La feuille de style donne aux propriétés 'fill' et 'stroke' de tous les rectangles les valeurs respectives "red" et "blue" :

monstyle.xsl

<?xml version="1.0" standalone="no"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <!-- Add DOCTYPE -->
  <xsl:template match="/">
    <xsl:text disable-output-escaping="yes"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
</xsl:text>
    <xsl:apply-templates/>
  </xsl:template>

  <!-- Ajoute un style à tous les éléments 'rect' -->
  <xsl:template match="rect">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">red</xsl:attribute>
      <xsl:attribute name="stroke">blue</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
    </xsl:copy>
  </xsl:template>

  <!-- Par défaut, la copie de l'élément en entrée -->
  <xsl:template match="*|@*|text()">
    <xsl:copy>
      <xsl:apply-templates select="*|@*|text()"/>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

Le fichier SVG devant être transformé par monstyle.xsl

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="5cm"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="2cm" y="1cm" width="6cm" height="3cm"/>
</svg>

Le contenu SVG après l'action de monstyle.xsl

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10cm" height="5cm"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
</svg>

6.7 Le style avec CSS

Les implémentation SVG qui gèrent CSS doivent reconnaître ce qui suit :

L'exemple suivant montre l'utilisation d'une feuille de style CSS externe pour donner aux propriétés 'fill' et 'stroke', de tous les rectangles, les valeurs respectives "red" et "blue" :

monstyle.css

rect {
  fill: red;
  stroke: blue;
  stroke-width: 3
}

Le fichier SVG qui référence monstyle.css

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="monstyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

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

On peut incorporer une feuille de style CSS dans un contenu SVG avec un élément 'style'. L'exemple suivant utilise une feuille de style CSS interne pour obtenir le même résultat que dans l'exemple précédent :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css"><![CDATA[
      rect {
        fill: red;
        stroke: blue;
        stroke-width: 3
      }
    ]]></style>
  </defs>
  <rect x="200" y="100" width="600" height="300"/>
</svg>

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

Remarquer comme la feuille de style CSS se place dans une construction CDATA vf. (i.e., <![CDATA[ ... ]]>). Il est parfois nécessaire de placer les feuilles de style CSS externes dans des blocs CDATA parce que celles-ci peuvent contenir certains caractères, comme « > », qui perturbent les interpréteurs XML. Même si une feuille de style donnée n'utilise pas ces caractères, on recommande fortement l'incorporation des feuilles de style internes dans des blocs CDATA.

Les implémentations qui gèrent CSS doivent aussi reconnaître le style CSS en ligne. De la même façon que l'attribut style vf. en HTML, on peut déclarer un style CSS en ligne avec un attribut SVG style, en spécifiant une liste des déclarations des propriétés, séparées par des points-virgules, chaque déclaration étant de la forme « nom: valeur ».

L'exemple suivant montre comment on peut assigner les propriétés 'fill' et 'stroke' à un rectangle à l'aide d'un attribut style. Tout comme dans l'exemple précédent, le rectange sera rouge et son contour bleu :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="200" y="100" width="600" height="300" 
        style="fill:red; stroke:blue; stroke-width:3"/>
</svg>

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

Un agent utilisateur SVG qui gère les feuilles de style CSS doit reconnaître les facilités de [CSS2 vf.] suivantes :

SVG définit @color-profile, une règle-at [CSS2-ATRULES vf.], pour la définition de profils de couleur, ce qui autorise l'application de profils de couleur ICC sur un contenu SVG stylé avec CSS.

Au sujet des URIs relatifs et des feuilles de style CSS externes, remarquer que la spécification CSS2 [CSS-URI vf.] dit que les URIs relatifs (définis dans [RFC2396]), dans la feuille de style, se résolvent tel que l'URI de base est celui de la feuille de style, et non celui du document appelant.


6.8 La sensibilité à la casse des noms et valeurs de propriété

Les déclarations de propriété via des attributs de présentation s'expriment en XML [XML10 vf.], qui est sensible à la casse. À linverse, les déclaration des propriétés CSS, spécifiées soit dans les feuilles de style CSS, soit dans un attribut style, sont en général insensibles à la casse avec quelques exceptions (voir la section 4.1.3 Les caractères et la casse vf. dans la spécification CSS2).

Les attributs de présentation étant exprimés comme attributs XML, ils sont sensibles à la casse et doivent correspondre exactement avec le nom comme dans la liste plus haut dans Les définitions des entités pour les attributs de présentation. Quand on utilise un attribut de présentation pour spécifier une valeur pour la propriété 'fill', la graphie de l'attribut doit être 'fill', et non 'FILL' ou 'Fill'. Les valeurs des mots-clés, telles que "italic" dans font-style = "italic", sont également sensibles à la casse et leur graphie doit être exactement la même que celle utilisée dans la spécification qui les définit. Par exemple, le mot-clé "sRGB" doit comporter le « s » en minuscule et les lettres « RGB » en majuscule.

Les déclarations de propriété dans des feuilles de style de CSS ou dans un attribut style doivent seulement se conformer aux règles CSS, qui sont généralement plus laxistes en matière de sensibilité à la casse. Cependant, pour favoriser la cohérence entre les diverses manières d'exprimer des propriétés de style, on recommande fortement aux auteurs d'utiliser les noms de propriété exacts (habituellement, avec des lettres minuscules et des tirets), comme définis dans les spécifications concernées, d'exprimer tous les mots-clés dans la même casse que celle requise pour les attributs de présentations et ne pas tirer avantage de la caractéristique de CSS d'ignorer la casse.


6.9 L'utilisation des facilités de CSS et XSL par SVG

SVG partage diverses propriétés et approches ayant un rapport commun entre CSS et XSL, ainsi que la sémantique de nombreuses règles de traitement.

SVG partage les facilités suivantes avec CSS et XSL :


6.10 Le référencement des feuilles de style externes

Les feuilles de style externes sont appelées à l'aide du mécanisme décrit dans « L'association des feuilles de style aux documents XML » [XML-SS].


6.11 L'élément 'style'

L'élément 'style' permet l'incorporation des feuilles de styles directement dans un contenu SVG. L'élément 'style' de SVG a le même attribut que celui de l'élément correspondant en HTML (voir l' élément HTML 'style' vf.).

<!ELEMENT style (#PCDATA) >
<!ATTLIST style 
  %stdAttrs;
  xml:space (preserve) #FIXED "preserve"
  type %ContentType; #REQUIRED
  media %MediaDesc; #IMPLIED
  title %Text; #IMPLIED >

Définitions de l'attribut :

type = type de contenu
Cet attribut spécifie le langage de la feuille de style du contenu de l'élément. On spécifie le langage de feuille de style avec un type de contenu (par exemple, "text/css"), comme dans [RFC2045]. Les auteurs doivent fournir une valeur pour cet attribut ; il n'y a aucune valeur par défaut.
Animable : non.
media = descripteurs de média
Cet attribut spécifie le média voulu de destination pour l'information de style. La valeur par défaut de l'attribut est "all". Le jeu des descripteurs de média reconnus correspond à la liste des types de média reconnus par CSS2 [Les types de média reconnus par CSS2 vf.].
Animable : non.
title = titre descriptif
(Pour compatibilité avec [HTML4 vf.]). Cet attribut spécifie un titre descriptif pour l'élément 'style'.
Animable : non.

Attributs définis ailleurs :
%stdAttrs;, xml:space.

La syntaxe des donnés de style dépend du langage de feuille de style considéré.

Certains langages de feuille de style peuvent admettre une plus grande diversité de règles pour l'élément 'style' que pour l'attribut style. Par exemple, avec CSS, on peut déclarer des règles dans un élément 'style' qui ne peuvent l'être dans un attribut style attribute.

Un exemple illustrant l'utilisation de l'élément 'style' est donné plus haut (voir cet exemple).


6.12 L'attribut class

Définitions de l'attribut :

class = liste
Cet attribut assigne un nom de classe, ou un jeu de noms de classe, à un élément. Un nombre quelconque d'éléments peuvent avoir le même nom, ou les mêmes noms. Les noms de classes multiples doivent être séparés par des caractères blancs.
Animable : oui.

L'attribut class assigne un ou plusieurs noms à un élément. On peut dire que l'élément appartient à ces classes. Un nom de class peut être partagé par plusieurs instances d'éléments. L'attribut class tient plusieurs rôles :

Dans l'exemple suivant, on utilise l'élément 'text' en conjonction avec l'attribut class pour le balisage des messages du document. Ces messages apparaissent à la fois dans leur version anglaise et française.

<!-- Messages en anglais -->
<text class="info" lang="en">Variable declared twice</text>
<text class="warning" lang="en">Undeclared variable</text>
<text class="error" lang="en">Bad syntax for variable name</text>

<!-- Messages en français -->
<text class="info" lang="fr">Variable déclarée deux fois</text>
<text class="warning" lang="fr">Variable indéfinie</text>
<text class="error" lang="fr">Erreur de syntaxe pour variable</text>

Dans un agent utilisateur SVG qui gère le style CSS, les règles de style CSS suivantes indiqueraient à un agent utilisateur visuel d'afficher les messages d'information en vert, ceux d'avertissement en jaune et ceux d'erreur en rouge :

text.info    { color: green }
text.warning { color: yellow }
text.error   { color: red }

6.13 L'attribut style

L'attribut style permet la spécification directe, par élément, de règles de style sur un élément donné. Quand on emploie le style par CSS, on spécifie le style CSS en ligne dans l'attribut style avec des déclarations de propriété de la forme « nom: valeur », séparées par des points-virgules.

Définitions de l'attribut :

style = style
Cet attribut spécifie l'information de style pour l'élément courant. L'attribut style spécifie le style d'un seul élément. Le langage de feuille de style des règles de style en ligne est désigné par la valeur de l'attribut contentStyleType sur l'élément 'svg'. La syntaxe des données de style dépend du langage de feuille de style.
Animable : non.

On peut utiliser l'attribut style pour appliquer un style donné à un élément SVG individuel. Si le style doit être réutilisé pour plusieurs éléments, les auteurs devraient employer l'élément 'style' pour le regroupement de cette information. Pour la plus grande souplesse d'utilisation, les auteurs devraient définir les styles dans des feuilles de style externes.

Un exemple illustrant l'utilisation de l'attribut style est donné plus haut (voir cet exemple).


6.14 La spécification du langage de feuille de style par défaut

L'attribut contentStyleType de l'élément 'svg' spécifie le langage de feuille de style par défaut pour le fragment de document considéré.

contentStyleType = "%ContentType;"
Identifie le langage de feuille de style par défaut pour le document considéré. Cet attribut indique le langage de feuille de style des attributs style disponibles sur plusieurs éléments. Le type de valeur %ContentType; spécifie un type de média, selon [RFC2045]. La valeur par défaut est "text/css".
Animable : non.

6.15 L'héritage de propriété

Que l'agent utilisateur gère CSS ou non, l'héritage de propriété dans SVG permet les règles d'héritage de propriété définies dans la spécification CSS2. La définition normative pour l'héritage de propriété est la section 6.2 de la spécification CSS2 (voir L'héritage vf.).

La définition de chaque propriété indique si celle-ci hérite, ou non, de la valeur de son parent.

Dans SVG, comme dans CSS2, la plupart des éléments héritent de valeurs calculées [CSS2-COMPUTED vf.]. Pour les cas où d'autres valeurs que celles calculées sont héritées, la définition de la propriété précise les règles d'héritage. Pour les valeurs spécifiées [CSS2-SPECIFIED vf.] qui sont exprimées en unité utilisateur, en pixels (par exemple, "20px") ou en valeurs absolues [CSS2-COMPUTED vf.], la valeur calculée équivaut à la valeur spécifiée. Pour les valeurs spécifiées utilisant certaines unités relatives (i.e., em, ex et les pourcentages), la valeur calculée prendra la même unité que celle à laquelle elle se rapporte. Ainsi, si l'élément parent a une spécification 'font-size' de "10pt" et l'élément considéré 'font-size' de "120%", alors la valeur calculée pour la propriété 'font-size' de l'élément considéré sera de "12pt". Dans les cas, pour les unités relatives, où la valeur appelée est exprimée dans aucune des unités standards de SVG (i.e., unités CSS ou unités utilisateur), comme quand on utilise un pourcentage relatif à la zone de visualisation courante ou à la boîte englobante d'un objet, alors la valeur calculée sera en unités utilisateur.

Remarquer que SVG offrent certaines facilités, où une propriété spécifiée sur un élément ancêtre peut influer sur son élément descendant, même si celui-ci a une valeur assignée différente pour cette propriété. Par exemple, si on spécifie une propriété 'clip-path' sur un élément ancêtre et que l'élément courant a une valeur de 'none' pour une même propriété 'clip-path', le tracé de rognage de l'ancêtre s'applique toujours à cet élément parce que la sémantique de SVG déclare que le tracé de rognage employé sur un élément donné correspond à l'intersection de tous les tracés de rognage spécifié sur celui-ci et tous les éléments ancêtres. Le concept clé étant que l'assignation d'une propriété (avec un éventuel héritage de propriété) survient en premier. Après que les valeurs de propriété aient été assignées aux divers éléments, l'agent utilisateur applique alors les instructions de chacune des propriétés assignées, ce qui peut entraîner l'influence d'une propriété de l'élément ancêtre sur le rendu de ses descendants.


6.16 La portée/champs d'action des styles

Ce qui suit définit la portée/champs d'action des feuilles de style :

Un document SVG autonome
Il y a un seul arbre d'interprétation. Toutes les feuilles de style définies dans le document SVG (dans des éléments ou des attributs style, ou dans des feuilles de style externes appelées par l'instruction de traitement de feuille de style) s'appliquent au document SVG en entier.
Un document SVG autonome incorporé dans un document HTML ou XML avec les éléments 'img' et 'obj', en HTML, ou 'image', en SVG
Il y a deux arbres d'interprétation complètement distincts ; l'un pour le document appelant (peut-être HTML ou XHTML) et l'autre pour le document SVG. Toutes les feuilles de style définies dans le document appelant (dans des éléments ou des attributs style, ou dans des feuilles de style appelées par l'instruction de traitement de feuille de style) s'appliquent dans le document appelant en entier mais n'a aucune influence sur le document SVG appelé. Toutes les feuilles de styles définies dans le document SVG appelé (dans des éléments ou des attributs style, ou dans des feuilles de style appelées par l'instruction de traitement de feuille de style) s'appliquent au document SVG en entier mais n'exerce aucune influence sur le document appelant (peut-être HTML ou XHTML). Pour obtenir le même style sur le document (X)HTML et le document SVG, les relier à la même feuille de style.
Un contenu SVG autonome inclus textuellement dans un document XML
Il y a un seul arbre d'interprétation, utilisant plusieurs espaces de nommage ; un ou plusieurs sous-arbres sont dans l'espace de nommage SVG. Toutes les feuilles de style définies dans le document XML (dans des éléments ou des attributs style, ou dans des feuilles de style appelées par l'instruction de traitement de feuille de style) s'appliquent au document en entier, y compris aux parties de celui-ci dans l'espace de nommage SVG. Pour obtenir un style différent pour la partie SVG, utiliser l'attribut style, ou donner une ID à l'élément 'svg' et utiliser des sélecteurs CSS contextuels, ou encore utiliser des sélecteurs XSL.

6.17 La feuille de style de l'agent utilisateur

L'agent utilisateur devra maintenir une feuille de style de l'agent utilisateur [CSS2-CASCADE-RULES vf.] des éléments dans l'espace de nommage SVG pour les médias visuels [CSS2-VISUAL vf.]. La feuille de style de l'agent utilisateur ci-dessous est exprimée dans une syntaxe CSS ; néanmoins, les agents utilisateurs doivent reproduire le comportement qui correspond à cette feuille de style par défaut, même si ceux-ci ne gèrent pas les feuilles de style CSS :

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }

La première ligne de la feuille de style de l'agent utilisateur ci-dessus va entraîner l'établissement du tracé de rognage initial sur les limites de la zone de visualisation initiale. Par voie de conséquence, elle va entraîner l'établissement des nouveaux tracés de rognage sur les limites des éléments listés, ceux-ci étant tous des éléments qui établissent de nouvelles zones de visualisation. (Se reporter à la description de l'utilisation de la propriété 'overflow' par SVG pour plus d'information).

La seconde ligne de la feuille de style ci-dessus va entraîner l'utilisation des valeurs des attributs width et height de l'élément 'svg' comme valeur par défaut pour les propriétés 'width' vf. et 'height' vf. lors de la disposition [CSS2-LAYOUT vf.].

6.18 Les feuilles de style auditives

Pour les visées des médias auditifs, SVG représente une grammaire XML stylisable. Les propriétés de style auditives [CSS2-AURAL vf.] peuvent s'appliquer aux agents utilisateurs qui gèrent les feuilles de style auditives CSS, comme défini dans [CSS2 vf.].

Les propriétés de style auditives peuvent s'appliquer à tous les éléments SVG qui peuvent avoir un contenu de données textuelles, dont les éléments 'desc', 'title, 'tspan'. 'tref'. 'altGlyph' et 'textPath'. Les propriétés [CSS2 vf.] suivantes peuvent s'appliquer aux agents utilisateurs qui gèrent les feuilles de style auditives :

    'azimuth'     [CSS2-azimuth vf.]
    'cue'     [CSS2-cue vf.]
    'cue-after'     [CSS2-cue-after vf.]
    'cue-before'     [CSS2-cue-before vf.]
    'elevation'     [CSS2-elevation vf.]
    'pause'     [CSS2-pause vf.]
    'pause-after'     [CSS2-pause-after vf.]
    'pause-before'     [CSS2-pause-before vf.]
    'pitch'     [CSS2-pitch vf.]
    'pitch-range'     [CSS2-pitch-range vf.]
    'play-during'     [CSS2-play-during vf.]
    'richness'     [CSS2-richness vf.]
    'speak'     [CSS2-speak vf.]
    'speak-header'     [CSS2-speak-header vf.]
    'speak-numeral'     [CSS2-speak-numeral vf.]
    'speak-punctuation'     [CSS2-speak-punctuation vf.]
    'speech-rate'     [CSS2-speech-rate vf.]
    'stress'     [CSS2-stress vf.]
    'voice-family'     [CSS2-voice-family vf.]
    'volume'     [CSS2-volume vf.]

Pour ceux des agents utilisateurs qui gèrent à la fois les feuilles de styles auditives et [DOM2], l'agent utilisateur doit reconnaître les interfaces du DOM, définies dans [DOM2-CSS], qui correspondent aux propriétés auditives [CSS2-AURAL vf.]. (Voir le chapitre Les relations avec le modèle objet CSS de DOM2).


6.19 Les interfaces du DOM

L'interface suivante est définie ci-dessous : SVGStyleElement.


L'interface SVGStyleElement

L'interface SVGStyleElement correspond à l'élément 'style'.


Définition IDL
interface SVGStyleElement : SVGElement { 
           attribute DOMString xmlspace;
                       // déclenche une DOMException à l'initialisation
           attribute DOMString type;
                       // déclenche une DOMException à l'initialisation
           attribute DOMString media;
                       // déclenche une DOMException à l'initialisation
           attribute DOMString title;
                       // déclenche une DOMException à l'initialisation
};

attributs
DOMString xmlspace
Correspond à l'attribut xml:space de l'élément en question.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
DOMString type
Corresponds à l'attribut type de l'élément 'style' en question.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
DOMString media
Correspond à l'attribut media de l'élément 'style' en question.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
DOMString title
Correspond à l'attribut title de l'élément 'style' en question.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.