# Optimiser un fichier SVG/Style

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

## 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 (#008000 ou #080 pour ce vert) ou toute autre notation reconnue en SVG : rgb(0,128,0), rgb(0%,50.2%,0%), 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 :
Soit les regrouper dans un paramètre style :
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 <g>.
Plutôt que :
On peut écrire :
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 character data).
Le style peut s'appliquer à un type d'élément (ici les rectangles) :
Il peut aussi s'appliquer à un élément précis si celui-ci possède un identifiant :
Il peut également s'appliquer à plusieurs élément précis si ceux-ci possède une classe :
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 :
Le fichier StyleRouge.css contenant simplement :
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

À ajouter : l’héritage de styles et approfondir : le problème des bordures.
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.

## Conclusions

Il vaut mieux toujours séparer les formes et leur style (voir notamment les arguments sur l’article 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.