Optimiser un fichier SVG/Avec Inkscape

Début de la boite de navigation du chapitre

Le SVG étant un format graphique, il est logique d’utiliser une interface graphique pour le modifier (et donc l’améliorer).

fin de la boite de navigation du chapitre

Il existe de nombreux logiciels notamment : Inkscape, Adobe Illustrator ou Skencil.

Inkscape est un logiciel libre, gratuit et multiplate-forme. Il est probablement le logiciel le plus connu et le plus utilisé pour créer et éditer des fichiers au format SVG, nous parlerons donc uniquement de celui-ci.

Rappel des principes généraux

• Il ne faut pas mélanger les torchons et les serviettes, deux objets séparés restent des objets séparés. Ainsi sur l’image d’exemple, la loupe est autonome du logo.
• Il est utile de hiérarchiser le fichier en groupes ainsi il est plus facile de déplacer un ensemble de plusieurs objets (possibilité de nommer les groupes : clic droit propriété de l’objet, renommer l’Id ou dans l’éditeur XML).
• C’est un ensemble « d’équations » donc pour réduire la taille il suffit de factoriser. Autrement dit : si plusieurs objets ont des propriétés similaires (par exemple le contour ou le remplissage de l’objet), cette propriété doit être précisée une seule et une seule fois. Il existe plusieurs possibilités : on peut unir les chemins, les combiner, ou bien simplement grouper les objets. Grouper permet aussi de factoriser le style mais ce n’est pas la factorisation maximale.
• Diminuer le nombre de points des lignes : certaines fonctions génèrent de trop grands nombres de points ce qui augmente la taille de l’élément sans changer visiblement son rendu.

Erreurs courantes à éviter

• Ne pas oublier que certains objets n’apparaissent pas sur le dessin :
  • des objets de couleurs transparentes ou de la même couleur que le fond,
  • des objets rendus invisibles,
  • des objets dessinés hors de la page,
  • etc.

À moins que ces objets ne soient utiles (par exemple pour des rééditions ultérieures) et surtout s'ils sont lourds, le mieux est donc de les supprimer.

• Ne pas redessiner un contour autour d’un objet, on peut le faire directement avec la fonction remplissage du contour et le rendu est similaire.
• Du texte est et doit rester du texte. Sauf pour quelques cas exceptionnels où l’on ne peut faire autrement (écriture exotique dont la police serait mal ou pas supportée), il faut à tout prix éviter de convertir le texte en chemin.
• Si vous avez créé une étoile ou un polygone avec l’icone , Inkscape crée un objet lourd. On peut alléger la forme en convertissant l’objet en chemin (Menu Chemin, Objet en chemin, raccourci clavier : Maj+Ctrl+C)

Un exemple de carte où le dégradé n’apporte rien et perturbe la lecture.

Un exemple de schéma où le dégradé est utile.

• Éviter les dégradés, leur code est lourd et quand il n’apporte pas de sens ou d’esthétique ce n’est que du bruit graphique (en anglais chartjunk).
  • Si vous les utilisez, ne surtout pas oublier de Nettoyer les Defs (menu Fichier) car tous les essais de dégradés sont conservés par défaut dans le code (même s’ils ne sont plus utilisés).

Conseils divers

• Régler les préférences d'Inkscape et du document :

Inkscape utilise des nombres à virgule flottante avec, par défaut, 8 chiffres significatifs, ce qui est généralement trop précis : 450.00001 là où 450 suffit. Il est possible de préciser le nombre de chiffres significatifs désirés dans Édition>Préférences>Entrée/sortie>Sortie SVG (v.1.2) Fichiers > Préférences d'’Inkscape > Sortie SVG > Précision Numérique (v.1.1) , ainsi que exposant minimum pour indiquer le seuil en dessous duquel on considère qu’un nombre est nul : 10^-8 par défaut.

• Utiliser une palette de couleurs adaptée.
• Utiliser les guides et les grilles (et activer l'adhérence) permet aussi d’éviter les chiffres significatifs inutiles.
• Utiliser l’éditeur XML (voir la section suivant).
  • Avec cet éditeur, nommer les identifiants de façon explicite. Inkscape génère automatiquement des identifiants alphanumériques qui ne possèdent aucune signification comme rect2985 ou path2991.

Découvrir l’éditeur XML

Plusieurs outils et techniques de dessin permettent souvent d'optimiser rapidement et facilement un fichier mais une optimisation avancée peut difficilement se passer de l’éditeur XML.

Celui-ci s’ouvre dans le menu Édition, Éditeur XML…, avec l’icône ou bien avec le raccourci clavier : Maj+Ctrl+X.

Arborescence

Le premier avantage de cet éditeur est que l’on découvre visuellement l’arborescence XML du fichier SVG. On repère ainsi rapidement le groupe ou le sous-groupe dans lequel se trouve chaque élément. Si on ne sait plus dans quel groupe se trouve un élément, il suffit de cliquer dessus pour que le groupe correspondant soit surligné dans l’éditeur XML.

L’éditeur possède plusieurs icônes permettant de :

• ajouter un « nouveau nœud élément »
• ajouter un « nouveau nœud texte »
• « dupliquer le nœud »
• « supprimer le nœud »
• « désindenter le nœud »
• « indenter le nœud »
• « monter le nœud »
• « descendre le nœud »
• « supprimer l’attribut »

Les trois premières fonctions requièrent une bonne connaissance du code XML (voir la chapitre suivant) mais les autres permettent d'effectuer assez simplement des modifications.

Modification des éléments

Grâce aux fonctions de déplacement des nœuds, on peut facilement modifier le groupement des éléments.

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

Modification des attributs

L'éditeur permet aussi de modifier les attributs à l'intérieur des éléments. On peut ainsi :

• donner des identifiants explicites : par exemple, changer rect2985 en rectangle_rouge ;
• retirer les attributs de styles inutiles : par exemple fill-opacity:1 qui est la valeur par défaut ou un style qui est présent à la fois dans le groupe et dans les éléments de ce groupe.
• …

L'éditeur indiquant les coordonnées, il est facile de faire coïncider exactement deux points (par exemple, les deux extrémités de deux lignes).

Avertissement :

Une fois la valeur modifiée, il faut valider en cliquant sur ou bien valider au clavier avec les touches Ctrl+Entrée et pas juste Entrée.

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