Optimiser un fichier SVG/Style

Début de la boite de navigation du chapitre

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

fin de la boite de navigation du chapitre

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.

Avertissement :

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 (#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 :

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

Soit les regrouper dans un paramètre style :

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

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 :

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

On peut écrire :

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

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

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

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

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

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

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

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 :

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

Le fichier StyleRouge.css contenant simplement :

      .RectangleRouge {
        fill:green;
        stroke:black;
        stroke-width:10
      }

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

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

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

Avertissement :

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 ce fichier simple pour avoir un aperçu (certains navigateurs comme Internet Explorer ne comprennent pas cette interactivité)

Conclusions

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

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.