Optimiser un fichier SVG/Ligne

En tant que forme simple, une ligne permet de visualiser aisément quelques principes de bases du format SVG et des techniques d'optimisations.

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Effets d’échelle

Le SVG est un format vectoriel, ainsi on peut profiter des effets d’échelle. Une ligne horizontale au centre d’une feuille de 1000 par 1000 aura − à condition d’ajuster l’épaisseur du trait − exactement le même rendu visuel qu’au centre d'une feuille de 100 par 100, 10 par 10, 1 par 1, ou bien 0,1 par 0,1 (etc.).

Les trois codes suivants sont donc strictement équivalents visuellement :

Début de l'exemple

Ligne centrée

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100000" height="100000">
  <line x1="0" y1="50000" x2="100000" y2="50000" stroke="red" stroke-width="10000" />
</svg>

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10">
  <line x1="0" y1="5" x2="10" y2="5" stroke="red" stroke-width="1" />
</svg>

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0.001" height="0.001">
  <line x1="0" y1="0.0005" x2="0.001" y2="0.0005" stroke="red" stroke-width="0.0001" />
</svg>

Fin de l'exemple

Pour un même visuel, on a donc des codes assez différents et surtout plus ou moins court. Le second code est le plus court : 193 caractères contre 217 pour le premier et le troisième.

Il faut choisir la meilleure échelle en fonction du niveau de détail souhaité. Moins votre dessin est détaillé et mieux il vaut prendre une zone de dessin petite ; inversement pour un dessin très détaillé, il vaut mieux prendre un zone de dessin grande.

Il faut surtout éviter d’avoir à utiliser des nombres décimaux. En effet la présence du séparateur décimal (ici le point) occupe rapidement une place importante et inutile. Si on veut prendre la moitié de 1 (1 caractère), cela fait 0.5 (3 caractères) alors alors que la moitié de 10 (2 caractères) est simplement 5 (1 seul caractère). Si on utilise ces deux dimensions, dans le premier cas, on utilise 4 caractères contre 3 dans le second. Cela semble trivial mais, ces chiffres pouvant revenir souvent, sur l’ensemble d’un code cela prend rapidement une importance considérable. Dans le troisième exemple ci-dessus, pour un code très simple, il y a déjà 6 points.

Dans le doute, il vaut parfois mieux prendre un peu plus grand pour pouvoir ajouter des détails par la suite. En l’occurrence, une zone de 1 par 1 donne le code le plus court mais une zone de 10 par 10 sera probablement nécessaire si on veut ajouter des éléments.

Certains logiciels comme Inkscape ajoutent parfois des décimales inutiles, par exemple : 1.00000 à la place de 1.