Voir la source de Optimiser un fichier SVG/Style

{{Chapitre
  | idfaculté = infographie
  | précédent = [[../Chemin/]]
  | suivant   = 
  | numéro    = 7
  | niveau    = 7
}}

Un dessin est composé de formes et de couleurs. Le format SVG opère la même distinction. Les couleurs et quelques autres mise en forme sont appelé le ''style''. Hormis quelques points particuliers, les propriétés et le fonctionnement du style sont identiques à celle du CSS (''{{lang|en|Cascading Style Sheet}}'').

Ces propriétés peuvent être définies :
* directement par éléments du dessin,
* avec un élément ''style'' en début de document contenant une feuille de style CSS
* avec une feuille de style CSS externe au document SVG.

{{Note|Pour ce chapitre, des notions de [[Cascading Style Sheet]] peuvent être utiles.}}

== Exemples ==

Pour les exemples, prenons un simple rectangle on que l’on veut colorer en vert avec une bordure noire. Ici on utilisera la couleur nommé ''green'' mais on peut aussi indiquer la notation hexadécimale à six ou trois chiffres (<code>#008000</code> ou <code>#080</code> pour ce vert) ou toute autre notation reconnue en SVG : <code>rgb(0,128,0)</code>, <code>rgb(0%,50.2%,0%)</code>, etc.

=== Style directement sur un élément  ===

La méthode la plus courante et la plus brute est de redéfinir une style spécifique sur chacun des éléments.

On peut soit préciser les propriétés une par une :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
	<rect x="100" y="100" width="200" height="800" fill="green" stroke="black" stroke-width="10"/>
</svg>
</syntaxhighlight>

Soit les regrouper dans un paramètre ''style'' :
<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
	<rect x="100" y="100" width="200" height="800" style="fill:green; stroke:black; stroke-width:10"/>
</svg>
</syntaxhighlight>

Cette méthode montre rapidement ses limites par exemple si un style identique est utilisé plusieurs fois ou si lors de la réédition d’un fichier on veut modifier rapidement le style dans un long fichier.

=== Style directement sur un groupe d’éléments  ===

Une méthode « améliorée » est d’imbriquer ensemble des éléments de même style ; typiquement, cela peut se faire dans un élément ''groupe'' <code><g></code>.

Plutôt que :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
	<rect x="100" y="100" width="200" height="800" style="fill:green; stroke:black; stroke-width:10"/>
	<rect x="400" y="100" width="200" height="800" style="fill:green; stroke:black; stroke-width:10"/>
	<rect x="700" y="100" width="200" height="800" style="fill:green; stroke:black; stroke-width:10"/>
</svg>
</syntaxhighlight>

On peut écrire :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
	<g style="fill:green; stroke:black; stroke-width:10">
		<rect x="100" y="100" width="200" height="800"/>
		<rect x="400" y="100" width="200" height="800"/>
		<rect x="700" y="100" width="200" height="800"/>
	</g>
</svg>
</syntaxhighlight>

On passe ainsi de 391 à 305 octets. Il est ainsi possible de changer la couleur des trois rectangles en une seule fois.

=== Style dans un élément style  ===

Le style est indiqué dans un bloc à part au début du document. Il est contenu dans une balise style donc on précise le type et une section CDATA (pour ''{{lang|en|character data}}'')<ref>Ces deux précisions ne sont pas formellement nécessaires mais peuvent éviter des problèmes pour une longueur de code assez faible.</ref>.

Le style peut s'appliquer à un type d'élément (ici les rectangles) :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
  <style type="text/css"><![CDATA[
      rect {
        fill:green;
        stroke:black;
        stroke-width:10
      }
    ]]></style>
  <rect x="100" y="100" width="200" height="800"/>
</svg>
</syntaxhighlight>

Il peut aussi s'appliquer à un élément précis si celui-ci possède un identifiant :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
  <style type="text/css"><![CDATA[
      #RectangleVert {
        fill:green;
        stroke:black;
        stroke-width:10
      }
    ]]></style>
  <rect id="RectangleVert" x="100" y="100" width="200" height="800"/>
</svg>
</syntaxhighlight>

Il peut également s'appliquer à plusieurs élément précis si ceux-ci possède une classe :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<svg version="1.1" width="1000" height="1000">
  <style type="text/css"><![CDATA[
      .RectangleVert {
        fill:green;
        stroke:black;
        stroke-width:10
      }
    ]]></style>
  <rect class="RectangleVert" x="100" y="100" width="200" height="800"/>
</svg>
</syntaxhighlight>

L'avantage est évident dans le premier et le dernier cas lorsque l’on veut appliquer un style similaire à des éléments distincts que ce soit des éléments identiques (par exemple, plusieurs rectangles verts) ou des éléments différents (par exemple un rectangle et un cercle possédant la même classe).

Dans le cas d’un style via un identifiant, on ne gagne pas en longueur du code mais on gagne en clarté.

=== Style externe  ===

Enfin, on peut utiliser une feuille de style CSS externe au document SVG. Il faut créer un fichier contenant cette feuille de style (dont le contenu est similaire à celui de l'élément ''style'' vue précédemment) et préciser dans l'entête où se trouve cette feuille de style :

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="StyleRouge.css" type="text/css"?>
<svg version="1.1" width="1000" height="1000">
  <rect class="RectangleRouge" x="100" y="100" width="200" height="800"/>
</svg>
</syntaxhighlight>

Le fichier StyleRouge.css contenant simplement : 
<syntaxhighlight lang="css">
      .RectangleRouge {
        fill:green;
        stroke:black;
        stroke-width:10
      }
</syntaxhighlight>

L'avantage principal est que cette feuille de style peut-être commune à plusieurs fichiers (et ainsi mettre à jour le style de de nombreux fichiers en modifiant une feuille de style unique). Il faut faire attention à ne pas supprimer ou renommer ce fichier CSS (à moins de modifier chacun des fichiers SVG qui y font appel). De même si on copie le fichier SVG, il ne faut pas oublier de copier le fichier CSS correspondant.

== Avertissements ==

{{...}}

{{rouge|À ajouter : l’héritage de styles et approfondir : le problème des bordures.}}

{{Avertissement|Au niveau des bordures, il arrive parfois des effets inattendus. Cela se produit notamment pour les chemins mal fermés ainsi que pour les angles abruptes.}}

{{Note|On peut créer des effets interactifs sur les styles avec des pseudo-classes dynamiques. Par exemple modifier la couleur d'une forme lors du survol par la souris. Voir [[Media:Roche-aux-Fees.svg|ce fichier simple]] pour avoir un aperçu (certains navigateurs comme Internet Explorer ne comprennent pas cette interactivité)}}

== Conclusions ==

{{...}}

Il vaut mieux toujours séparer les formes et leur style (voir notamment les arguments sur l’article [[:w:Séparation du fond et de la forme|Séparation du fond et de la forme]] sur la Wikipédia).

En règle général, et contrairement aux pages web, il vaut mieux utiliser l’élément style plutôt qu'une feuille externe.

== Références ==
<references/>

{{Bas de page
  | idfaculté = infographie
  | précédent = [[../Chemin/]]
  | suivant   = 
}}