Voir la source de Optimiser un fichier SVG/Avec un éditeur de texte

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

Contrairement à une image matricielle dont le poids dépend en partie de sa [[w:Définition d'écran|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  ==

''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 : ''[[Optimiser un fichier SVG/Avec Inkscape|Avec Inkscape]]'') puis dans une seconde étape de modifier le code généré.

Les éditeurs de texte courants − comme les [[w:Bloc-notes (Windows)|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 [[w:coloration syntaxique|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’[[w:expression régulière|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 [[w:Notepad++|Notepad++]], [[w:Notepad2|Notepad2]], [[w:gedit|gedit]] ou [[w:Kate (logiciel)|Kate]] (des éditeurs XML peuvent être utilisés).

{{Attention|Bien que très pratique pour modifier directement dans Inkscape, l’éditeur XML intégré dans Inkscape (dans le menu ''<u>É</u>dition, Éditeur <u>X</u>ML…'', avec l’icône [[Fichier: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 ==

=== 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 :
# 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 ;
# renvoyer à la ligne chaque option des balises et lui donner une indentation supplémentaire par rapport à la balise ;
# 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 <code><nowiki><metadata></nowiki></code> 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 <code><nowiki><title></nowiki></code> et <code><nowiki><desc></nowiki></code>).
* la totalité du bloc <code><nowiki><sodipodi></nowiki></code> ;
** par exemple, le bloc <code><nowiki><sodipodi:namedview></nowiki></code>.
* 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 :
<syntaxhighlight lang="xml">
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
</syntaxhighlight>

{{attention|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  ===

{{...}}

==== En-tête ====
Il s’agit des parties du code sans lequel le SVG n’est pas valide<ref>La validation du code SVG se fait sur le site [http://validator.w3.org/ validator.w3.org] ; sur Commons, on utilise les modèles [[commons:Template:Valid SVG|Valid SVG]] et [[Commons:Template:InvalidSVG|InvalidSVG]] pour indiquer que le code est valide ou invalide.</ref> et ne peut donc pas s’afficher.

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

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
</syntaxhighlight>

Il est plus prudent de préciser l’encodage<ref>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.</ref> :

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

==== Balise SVG  ====

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

<syntaxhighlight lang="xml">
<svg>
   ...
</svg>
</syntaxhighlight>

Celui-ci contient généralement des attributs, par exemple :
* <code>xmlns</code> (pour ''XML name space'' soit ''espace de nom XML'') et <code>xmlns:prefixe</code>. 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 <code>inkscape:connector-curvature</code>, il faut également conserver la ligne <code><nowiki>xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"</nowiki></code>.
* <code>version</code> (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 » : <code>x</code>, <code>y</code>, <code>width</code>, et <code>heigth</code>. 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 :
<syntaxhighlight lang="xml">
<svg version="1.1" width="100" height="100">
   ...
</svg>
</syntaxhighlight>

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

Les éléments ''description'' <code>desc</code> et ''titre'' <code>title</code> 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 <code>id</code> 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 ==
<references/>

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