Optimiser un fichier SVG/Avec un éditeur de texte

Début de la boite de navigation du chapitre

Contrairement à une image matricielle dont le poids dépend en partie de sa définition, le poids d’une image vectorielle ne dépend entièrement que du nombre de signes utilisés dans son code et donc de sa conception.

fin de la boite de navigation du chapitre

Conseils préalables

Note : en particulier pour les débutants en SVG, il peut être utile de faire une première étape de dessin grâce à un logiciel de dessin vectoriel (voir le chapitre précédent : Avec Inkscape) puis dans une seconde étape de modifier le code généré.

Les éditeurs de texte courants − comme les bloc-notes généralement fournis par défaut − sont généralement suffisants.

Un logiciel d'édition plus évolué peut cependant faciliter l’édition sur plusieurs points :

• la coloration syntaxique met en couleur le texte pour le rendre plus lisible ainsi que repérer rapidement des erreurs de syntaxe,
• la possibilité de masquer des parties de l’arborescence du code durant l’édition,
• des fonctions avancées comme le remplacement d’expression régulière sont très pratiques pour supprimer toutes les occurrences d’un morceau de code inutile,
• l'édition de plusieurs fichiers en simultané est utile pour comparer du code ; par exemple, pour travailler sur plusieurs versions d'un même fichier ou pour travailler sur une partie du code sans toucher au reste,
• etc.

Parmi ces logiciels, les plus simples sont Notepad++, Notepad2, gedit ou Kate (des éditeurs XML peuvent être utilisés).

Bien que très pratique pour modifier directement dans Inkscape, l’éditeur XML intégré dans Inkscape (dans le menu Édition, Éditeur XML…, avec l’icône ou bien avec le raccourci clavier : Maj+Ctrl+X) ne convient pas parfaitement. En effet, celui-ci dépend d’Inkscape, qui modifie automatiquement certaines parties du code (et généralement pas de façon optimale ; cela peut se résoudre en partie en modifiant les préférences par défaut d'Inkscape, en cochant ou en décochant « Autorise coordonnées relatives », « Imposer les commandes répétitives », en adaptant « précision numérique », « exposant minimum », etc.).

Optimisations

Construction et indentation

Si la réduction maximale du poids voudrait qu'on ne fasse qu'une seule et unique ligne, optimiser le fichier veut aussi dire faciliter la modification de celui-ci. Afin que cela soit aisément possible, il est préférable de respecter certains critères de construction :

1. indenter chaque niveau de balises, autrement dit ajouter un espace vide plus important à gauche au début de chaque ligne que le niveau supérieur ;
2. renvoyer à la ligne chaque option des balises et lui donner une indentation supplémentaire par rapport à la balise ;
3. mettre dans le même ordre (si possible logique) les options de chaque balise (suggestion : classe, style, options de définition, id).

Quelque astuce :

• En termes de poids, une tabulation est équivalente à un espace, mais pas en termes de lisibilité du code : préférez l’utilisation de tabulations pour l'indentation (note : les logiciels de dessin utilisent automatiquement des espaces qu’il faut remplacer).

Suppression du code du logiciel de dessin

Lorsqu'un fichier SVG est créé, le logiciel de dessin crée de nombreuses ligne de code utile pour lui mais inutile pour le rendu final. Pour partie, il est possible de supprimer ces lignes directement dans le logiciel de dessin, mais ce n’est pas le cas de toutes, ce sont donc des artefacts que, pour l'optimisation du fichier, il est nécessaire de supprimer.

Quelques blocs à supprimer :

• le bloc <metadata> sert à indiquer les métadonnées (nom du fichier, de l'auteur du fichier, etc.) peut être utile mais pas toujours utile et qui occupe une part importante dans les petits fichiers. De plus, il est possible de les indiquer autrement (notamment avec les balises <title> et <desc>).
• la totalité du bloc <sodipodi> ;
  • par exemple, le bloc <sodipodi:namedview>.
• tous les appels au logiciel de dessin (par exemple inkscape) et à sodipodi ;

Par exemple dans le cas d'Inkscape, ces derniers comportent dans le premier bloc (svg) les lignes suivantes qui sont à supprimer :

   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

Si vous supprimez ces lignes alors que le reste du code contient des éléments avec sodipodi: ou inkscape: le fichier sera erronné et ne s'affichera plus.

Code minimal

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

En-tête

Il s’agit des parties du code sans lequel le SVG n’est pas valide et ne peut donc pas s’afficher.

La première ligne du fichier doit contenir la déclaration :

<?xml version="1.0" standalone="no"?>

Il est plus prudent de préciser l’encodage :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Balise SVG

Après l’en-tête, le code du dessin sera intégralement contenu dans la balise <svg> :

<svg>
   ...
</svg>

Celui-ci contient généralement des attributs, par exemple :

• xmlns (pour XML name space soit espace de nom XML) et xmlns:prefixe. Ces lignes peuvent normalement être supprimée. Attention, si vous utiliser du code spécifique à Inskcape, à Sodipodi, etc., il faudra garder la ligne correspondante. Si vous avez gardé un inkscape:connector-curvature, il faut également conserver la ligne xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape".
• version (version SVG alors que l'attribut version dans l’entête concerne la version du XML), il peut prendre les valeurs 1.0 ou 1.1.
• plusieurs attributs « géométriques » : x, y, width, et heigth. Par défaut, ces attributs valent respectivement : 0, 0, 100 %, et 100 %. Les deux premiers indiquent les coordonnées en x et en y du coin de l'élément et peuvent ne pas être précisé ; les deux derniers indiquent la zone de dessin et sont nécessaires.
• d’autres attributs spécifiques selon les besoins du dessin.

On aura donc généralement quelque chose comme :

<svg version="1.1" width="100" height="100">
   ...
</svg>

Bien que ce ne soit pas recommandé, il est cependant valide d’insérer les objets directement dans la balise <svg> sans passer par des groupes <g>.

Les éléments description desc et titre title ne sont pas rendus graphiquement, ils ne sont ni utiles, ni même vraiment recommandés. Ils sont parfois utile pour l’accessibilité du document. Un identifiant id peut suffire dans la majorité des cas ; celui-ci n’est pas non plus nécessaire pour que le code soit valide.