Optimiser un fichier SVG/Rectangle

Leçons de niveau 7
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Rectangle
Icône de la faculté
Chapitre no 5
Leçon : Optimiser un fichier SVG
Chap. préc. :Ligne
Chap. suiv. :Chemin
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Optimiser un fichier SVG : Rectangle
Optimiser un fichier SVG/Rectangle
 », n'a pu être restituée correctement ci-dessus.

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.

Généralités[modifier | modifier le wikicode]

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

  • avec l’élément rectangle : rect[1]
  • 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[modifier | modifier le wikicode]

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

  • 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[modifier | modifier le wikicode]

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[3]. 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[modifier | modifier le wikicode]

Panneau d’avertissement 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[modifier | modifier le wikicode]

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
Fin de l'exemple


Début de l'exemple
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[modifier | modifier le wikicode]

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
Fin de l'exemple


Début de l'exemple
Fin de l'exemple


Analyse[modifier | modifier le wikicode]

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[3].

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

  • qu’il existe au moins 16 descriptions[4] 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.

Conclusions[modifier | modifier le wikicode]

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[5]) 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.

Références[modifier | modifier le wikicode]

  1. En SVG, il existe de plusieurs formes de bases prédéfinies : rect, circle, ellipse, line, polyline, polygon.
  2. Il existe aussi deux attributs rx et ry permettant d’arrondir les coins suivant les axes x et y.
  3. 3,0 et 3,1 Le chemin est constitué 4 points en coordonnées absolues ou bien 1 point et 3 vecteurs en coordonnées relatives.
  4. 16 possibilités en utilisant uniquement la commande moveto (lettre M/m), il y a en plus si on utilise les commandes closepath (Z/z) ou lineto (L/l, H/h, V/v).
  5. Or, les attributs style et id peuvent déjà être long de plus de 50 caractères.