Optimiser un fichier SVG/Avec un éditeur de texte

Début de la boite de navigation du chapitre

Avec un éditeur de texte

Chapitre no3
Leçon : Optimiser un fichier SVG
Chap. préc. :	Avec Inkscape
Chap. suiv. :	Ligne

   

fin de la boite de navigation du chapitre

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 signe utilisé dans son code et donc de sa conception.

Conseils préalables

Note : il peut être utile de faire une première étape grâce à un logiciel de dessin vectoriel pour simplifier l’édition (voir le chapitre précédent : Avec Inkscape).

Les éditeurs de texte courants − comme ceux fournis avec l’ordinateur : bloc-notes − sont généralement suffisant. Cependant il est préférable d’utiliser un logiciel plus avancés (comme Notepad++, Notepad2, ou gedit) pour plusieurs raisons qui simplifie l’édition :

• la coloration syntaxique (mise en couleurs du texte en fonction),
• la possibilité de masquer des parties de l’arborescence du code durant l’édition,
• des fonctions avancés comme le remplacement d’expression régulière (pratique pour supprimer toute les occurrences d’un morceau de code inutile)
• etc.

Bien que très pratique, 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 modifie automatiquement certaines parties du code (et généralement pas de façon optimale).

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 :

• la totalité du bloc <metadata> qui sert à définir la fenêtre d'édition ;
• la totalité du bloc <sodipodi> ;
• 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"

Code minimal

Cette section est vide, pas assez détaillée ou incomplète. Votre aide est la bienvenue !

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écisant 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 garder 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

Optimiser un fichier SVG

Avec Inkscape

Ligne