Leçons de niveau 7

Optimiser un fichier SVG/Avec un éditeur de texte

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
Avec un éditeur de texte
Icône de la faculté
Chapitre no 3
Leçon : Optimiser un fichier SVG
Chap. préc. :Avec Inkscape
Chap. suiv. :Ligne
fin de la boite de navigation du chapitre
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « Optimiser un fichier SVG : Avec un éditeur de texte
Optimiser un fichier SVG/Avec un éditeur de texte
 », n'a pu être restituée correctement ci-dessus.

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.

Conseils préalables[modifier | modifier le wikicode]

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é).

Panneau d’avertissement 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 Inkscape icons dialog xml editor.svg 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[modifier | modifier le wikicode]

Construction et indentation[modifier | modifier le wikicode]

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

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

En-tête[modifier | modifier le wikicode]

Il s’agit des parties du code sans lequel le SVG n’est pas valide[1] 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[2] :

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

Balise SVG[modifier | modifier le wikicode]

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.

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

  1. La validation du code SVG se fait sur le site validator.w3.org ; sur Commons, on utilise les modèles Valid SVG et InvalidSVG pour indiquer que le code est valide ou invalide.
  2. Techniquement, il n’est pas nécessaire de préciser l’encodage. On peut s’en passer mais cela peut poser des problèmes de caractères non ou mal reconnus. Le fichier peut donc être valide sans l’encodage mais aussi être invalide avec. Dans le doute, il vaut tout de même mieux indiquer l’encodage ; UTF-8 est un bon choix par défaut.