Optimiser un fichier SVG/Rectangle

Début de la boite de navigation du chapitre

Le rectangle est une forme encore relativement simple mais qui est un bon moyen pour comprendre comment fonctionne une forme dans un fichier SVG. On peut ensuite facilement reproduire les mêmes techniques et méthodes sur des formes plus complexes comme les polygones.

fin de la boite de navigation du chapitre

Généralités

En SVG, il existe plusieurs manières différentes de créer un rectangle :

• avec l’élément rectangle : rect
• avec l’élément chemin : path
• avec l'élément ligne : line
• avec les éléments polygone et polyligne : polygon et polyline
• etc.

Dans cette leçon on se concentrera sur les deux premières méthodes. Pour les suivantes, on retiendra tout de même que :

• l'élément ligne peut être pertinent uniquement dans le cas d'un rectangle donc une des dimensions est très grande par rapport à l'autre (rectangle très fin ou très allongé). De plus, les styles sur les lignes peuvent avoir des effets inattendus (notamment aux extrémités).
• les éléments polygone et polyligne sont similaires à l'élément chemin. La seule différence entre ces deux éléments est que le polygone est fermé contrairement à la polyligne : une ligne est tracée pour fermer le chemin entre le premier et le dernier point. Pour avoir le même résultat visuel avec une polyligne, il faut fermer ce chemin « à la main » et ré-indiquer les coordonnées du premier point à la fin du chemin. Si on doit choisir entre polygone et polyligne pour tracer un rectangle, on choisira donc de préférence le premier.

Avec rect

L’élément rect définit un rectangle en fonction de quatre attributs principaux :

• x = "coordonnée suivant x (0 par défaut)"
• y = "coordonnée suivant y (0 par défaut)"
• width = "<largeur du rectangle>"
• height = "<hauteur du rectangle>"

Avec path

L’élément path définit un rectangle avec seulement un attribut :

• d = "coordonnées du chemin"

Pour définir le chemin d’un rectangle, on utilisera donc 4 coordonnées. Un chemin est composé de plusieurs coordonnées séparées par un espace ; une coordonnée est un couple de deux nombres (entiers ou décimaux) représentant les positions sur les axes x et y et séparés par une virgule. En SVG, sauf transformation, l'origine des axes se trouvent en haut à gauche du dessin. Le chapitre suivant est consacré spécifiquement à cet élément.

Exemples

Dans les exemples qui suivent, on supposera que l’on applique aux rectangles un style de couleur unie rouge et sans bordure. Avec d’autres styles, certains des codes suivants peuvent avoir des rendus visuels légèrement différents (notamment au niveau des bordures). Le style est abordé plus en détail dans la leçon « Style ».

Exemple 1

Les exemples suivants sont strictement équivalents et permettent de dessiner un rectangle de 150 de largeur pour 300 de hauteur disposé à 100 du coin supérieur de la zone de dessin :

Début de l'exemple

Avec rect

<rect x="100" y="100" width="150" height="300"/>

Fin de l'exemple

Début de l'exemple

Avec path

<path d="M 100,100 250,100 250,400 100,400"/>

<path d="M 100,100 100,400 250,400 250,100"/>

<path d="M 250,100 250,400 100,400 100,100"/>

<path d="M 250,100 100,100 100,400 250,400"/>

<path d="M 250,400 100,400 100,100 250,100"/>

<path d="M 250,400 250,100 100,100 100,400"/>

<path d="M 100,400 100,100 250,100 250,400"/>

<path d="M 100,400 250,400 250,100 100,100"/>

<path d="m 100,100 150,0 0,300 -150,0"/>

<path d="m 100,100 0,300 150,0 0,-300"/>

<path d="m 250,100 0,300 -150,0 0,-300"/>

<path d="m 250,100 -150,0 0,300 150,0"/>

<path d="m 250,400 -150,0 0,-300 150,0"/>

<path d="m 250,400 0,-300 -150,0 0,300"/>

<path d="m 100,400 0,-300 150,0 0,300"/>

<path d="m 100,400 150,0 0,-300 -150,0"/>

Fin de l'exemple

1 Pour réviser le chapitre précédent, on aurait aussi pu utiliser une ligne pour obtenir le même rendu visuel, quel serait le code à écrire ?

<line x1=" " y1=" " x2=" " y2=" " stroke-width=" " />

2 De la même façon, un chemin peut décrire une ligne, quel serait le code à écrire ?

	<path d="m 175,100 0,300" stroke-width="150" />
	<path d="M 175,100 175,400" stroke-width="150" />

Exemple 2

Les exemples suivants sont strictement équivalents et permettent de dessiner un rectangle de 10 de largeur pour 1000 de hauteur disposé à 0 du coin supérieur de la zone de dessin :

Début de l'exemple

Avec rect

<rect width="10" height="1000"/>

Fin de l'exemple

Début de l'exemple

Avec path

<path d="M 0,0 10,0 10,1000 0,1000"/>

<path d="M 0,0 0,1000 10,1000 10,0"/>

<path d="M 10,0 10,1000 0,1000 0,0"/>

<path d="M 10,0 0,0 0,1000 10,1000"/>

<path d="M 10,1000 0,1000 0,0 10,0"/>

<path d="M 10,1000 10,0 0,0 0,1000"/>

<path d="M 0,1000 0,0 10,0 10,1000"/>

<path d="M 0,1000 10,1000 10,0 0,0"/>

<path d="m 0,0 10,0 0,1000 -10,0"/>

<path d="m 0,0 0,1000 10,0 0,-1000"/>

<path d="m 10,0 0,1000 -10,0 -1000,0"/>

<path d="m 10,0 -10,0 0,1000 10,0 "/>

<path d="m 10,1000 -10,0 -1000,0 10,0"/>

<path d="m 10,1000 0,-1000 -10,0 0,1000"/>

<path d="m 0,1000 -1000,0 10,0 0,1000"/>

<path d="m 0,1000 10,0 -1000,0 -10,0"/>

Fin de l'exemple

Analyse

On a donc plusieurs méthodes pour dessiner un rectangle. On a deux éléments différents rect et path. Pour l'élément path, il existe là-encore plusieurs façon de décrire le chemin : coordonnées relatives ou absolues.

Avec l’élément path, on remarque :

• qu’il existe au moins 16 descriptions d’un même chemin. Pour un rectangle dont les sommets sont nommés A, B, C et D, on peut décrire :
  • selon le point que l’on décrit en premier (4 possibilités) : ABCD, BCDA, CDAB, DABC.
  • selon le sens du chemin choisi (2 fois plus de possibilités) : ABCD (sens horaire) ou ADCB (sens anti-horaire).
  • selon le choix de coordonnées relatives ou absolues (2 fois plus possibilités) : avec quatre points (M) ou un point et trois ou quatre vecteurs (m).
• qu’en coordonnées absolues, toutes les descriptions ont exactement la même longueur (45 caractères ; on retrouve les 4 mêmes points dans un ordre différent) ;
• qu’en coordonnées relatives, la longueur varie peu et un ou deux signes négatif interviennent ;
• que l’élément rect peut être plus court de 12 caractères si x="0" y="0" (il est en position en haut à gauche (0,0) de la zone de dessin avantage, c'est-à-dire si l’origine du rectangle et l’origine du dessin sont confondues).

Si on s’intéresse uniquement à la longueur du code, on a :

• au minimum :
  • 36 caractères (<rect x="" y="" width="" height=""/>)
  • 12 caractères (<path d=""/>)
• pour des points quelconques
  • 36+X+Y+W+H caractères (<rect x="X" y="Y" width="W" height="H"/>)
  • 12+2+XA+1+YA+1+XB+1+YB+1+XC+1+YC+1+XD+1+YD soit 21+XA+YA+XB+YB+XC+YC+XD+YD caractères (<path d="M XA,YA XB,YB XC,YC XD,YD"/>)

Or on peut facilement convertir d’un système à l’autre. On peut assimiler le point (X,Y) et le point (XA,YA) et avoir les équivalences suivantes : XA = X ; YA = Y ; XB = X+W ; YB = Y ; XC = X+W ; YC = Y+H ; XD = X ; YD = Y+H.

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

Conclusions

Sur des exemples aussi simples, les deux méthodes semblent assez proches. Le nombre de caractères est similaire et finalement assez faible (moins de 50 caractères dans nos exemples) avec un très léger avantage au niveau longueur pour l’élément path en coordonnées relatives.

Cependant, on peut déjà remarquer des différences dont le sens est important : selon les cas et les personnes, la syntaxe peut sembler plus claire avec l’élément rect ou l’élément path.

Ces diversités sont à la fois une chance (on peut choisir des descriptions plus courtes ou plus compréhensibles) et une complication (laquelle choisir et pourquoi ?).

Dans une optique de réédition ultérieure de la forme, avec l’élément rect on peut plus facilement faire varier la position ainsi que la taille du rectangle. Par contre, on restera toujours sur un rectangle. La réédition de l’élément path peut-être plus complexe mais permet de changer la forme du rectangle pour l’incliner, le transformer en trapèze voire même ajouter un point pour en faire un pentagone.

Le point important à retenir est qu’il existe toujours plusieurs manières de tracer une forme et toujours avoir en tête les avantages et les inconvénients de ces différentes manières. Dans le doute, il vaut souvent mieux rester sur l’élément rect.