Voir la source de Optimiser un fichier SVG/Rectangle

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

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 ==
En SVG, il existe plusieurs manières différentes de créer un rectangle :
* avec l’élément ''rectangle'' : <code>rect</code><ref>En SVG, il existe de plusieurs formes de bases prédéfinies : <code>rect</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>polyline</code>, <code>polygon</code>.</ref>
* avec l’élément ''chemin'' : <code>path</code>
* avec l'élément ''ligne'' : <code>line</code>
* avec les éléments ''polygone'' et ''polyligne'' : <code>polygon</code> et <code>polyline</code>
* 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 <code>rect</code>  ===

L’élément <code>rect</code> définit un rectangle en fonction de quatre attributs principaux<ref>Il existe aussi deux attributs rx et ry permettant d’arrondir les coins suivant les axes x et y.</ref> :
* 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 <code>path</code>  ===

L’élément <code>path</code> 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<ref name="coord">Le chemin est constitué 4 points en coordonnées absolues ou bien 1 point et 3 vecteurs en coordonnées relatives.</ref>. 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 ==

{{Attention|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 :

{{exemple
 | titre = Avec <code>rect</code>
 | contenu =
<syntaxhighlight lang="xml">
<rect x="100" y="100" width="150" height="300"/>
</syntaxhighlight>
}}

{{exemple
 | titre = Avec <code>path</code>
 | contenu =
<syntaxhighlight lang="xml">
<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"/>
</syntaxhighlight>
}}

<quiz display="simple">
{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 ?
| type="{}" }
<line x1="{ 175 _4 }" y1="{ 100 _4 }" x2=" { 175 _4 }" y2="{ 400 _4 }" stroke-width="{ 150 _4 }" />
|| <syntaxhighlight lang="xml"><line x1="175" y1="100" x2="175" y2="400" stroke-width="150" /></syntaxhighlight>

{De la même façon, un chemin peut décrire une ligne, quel serait le code à écrire ?}
+ <syntaxhighlight lang="xml"><path d="m 175,100 0,300" stroke-width="150" /></syntaxhighlight>
+ <syntaxhighlight lang="xml"><path d="M 175,100 175,400" stroke-width="150" /></syntaxhighlight>
</quiz>

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

{{exemple
 | titre = Avec <code>rect</code>
 | contenu =
<syntaxhighlight lang="xml">
<rect width="10" height="1000"/>
</syntaxhighlight>
}}

{{exemple
 | titre = Avec <code>path</code>
 | contenu =
<syntaxhighlight lang="xml">
<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"/>
</syntaxhighlight>
}}

== 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<ref name="coord"/>.

Avec l’élément <code>path</code>, on remarque :
* qu’il existe au moins 16 descriptions<ref>16 possibilités en utilisant uniquement la commande <code>moveto</code> (lettre M/m), il y a en plus si on utilise les commandes <code>closepath</code> (Z/z) ou <code>lineto</code> (L/l, H/h, V/v).</ref> 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 <code>rect</code> peut être plus court de 12 caractères si <code>x="0" y="0"</code> (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 (<code><rect x="" y="" width="" height=""/></code>)
** 12 caractères (<code><path d=""/></code>)
* pour des points quelconques
** 36+X+Y+W+H caractères (<code><rect x="X" y="Y" width="W" height="H"/></code>)
** 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 (<code><path d="M XA,YA XB,YB XC,YC XD,YD"/></code>)

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.

{{...}}

<!---
Ne marche pas à cause des ordres de grandeurs (1+1=2 soit 1 caractère mais 5+5=10 soit 2 caractères !).

Donc pour des points quelconques, on a :
* 36+X+Y+W+H caractères avec <code>rect</code>
* 21+X+Y+(X+W)+Y+(X+W)+(Y+H)+X+(Y+H) soit 21+4X+4Y+2W+2H caractères <code>path</code>

Ainsi même si X = Y = W = H = 1, on a :
* 40 caractères avec <code>rect</code>
* 29 caractères <code>path</code>
-->
== 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<ref>Or, les attributs ''style'' et ''id'' peuvent déjà être long de plus de 50 caractères.</ref>) avec un très léger avantage au niveau longueur pour l’élément <code>path</code> 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 <code>rect</code> ou l’élément <code>path</code>.

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 <code>rect</code> 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 <code>path</code> 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 <code>rect</code>.

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

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