Réduire la taille des fichiers SVG avec Inkscape

Inkscape est un logiciel libre, gratuit et multiplate-forme. Pour réduire la taille d'un fichier SVG, il est possible d'appliquer plusieurs techniques visant à optimiser le code sous-jacent.

Principes d'optimisation des fichiers SVG

Un fichier SVG est un ensemble d'équations. Pour réduire sa taille, il suffit de factoriser les propriétés similaires. Autrement dit, si plusieurs objets partagent les mêmes caractéristiques, comme la couleur du contour ou du remplissage, ces propriétés doivent être spécifiées une seule fois.

Fusion, combinaison et groupement d'objets

Il existe plusieurs possibilités pour optimiser les objets dans Inkscape : on peut unir les chemins, les combiner, ou bien simplement grouper les objets. Ces actions permettent de réduire la complexité du fichier.

Traitement du texte

Le texte doit rester du texte. Si vous avez créé une étoile ou un polygone à l'aide des icônes dédiées, Inkscape crée un objet potentiellement lourd. Il est donc préférable de conserver le texte sous sa forme éditable autant que possible.

Optimisation via l'éditeur XML

L'éditeur XML intégré à Inkscape offre une vue détaillée de la structure du fichier SVG. Cet éditeur permet de repérer visuellement l'arborescence XML du fichier, facilitant l'identification des groupes et sous-groupes.

Modification des attributs

L'éditeur permet également de modifier les attributs directement à l'intérieur des éléments XML, offrant un contrôle fin sur la structure du fichier.

Arborescence XML d'un fichier SVG dans Inkscape

Génération et optimisation des fichiers SVG

Si les fichiers SVG peuvent être produits manuellement à l'aide d'un éditeur de code, ils sont souvent générés par des logiciels de dessin tels que Figma, Illustrator ou Inkscape. Ces programmes ne visent pas toujours une optimisation maximale du poids de l'image, bien que cela tende à s'améliorer.

Outils d'exportation et d'optimisation

Des outils comme Figma proposent des fonctionnalités d'exportation rapides pour copier des formes ou des groupes en tant que code SVG. Si l'optimisation manuelle du code SVG était courante il y a quelques années, de nombreux outils modernes remplissent désormais la majorité des besoins.

Pour un traitement automatisé, des outils comme SVGO peuvent être intégrés dans les flux de travail de développement web, que ce soit lors d'un processus de compilation ou en ligne de commande. Cette bibliothèque est disponible dans divers environnements, y compris via Node.js, et se retrouve sous forme d'extensions pour des éditeurs comme Sketch, Visual Studio Code, SublimeText et Atom.

L'IA génère ton code mais personne le review (ma solution)

Techniques d'allègement du code SVG

Plusieurs techniques peuvent être appliquées pour réduire la taille d'un fichier SVG :

Baisser la précision des coordonnées : Les coordonnées vectorielles sont souvent stockées avec une précision excessive (par exemple, 450.00001 au lieu de 450). Il est inutile de manipuler et stocker des chiffres à plusieurs décimales si ceux-ci sont finalement arrondis à l'écran. Inkscape utilise par défaut 8 chiffres significatifs, ce qui est souvent trop. Il est recommandé de réduire cette précision.
Supprimer les informations XML inutiles : Le format SVG est basé sur XML. Des éléments comme le doctype ou les namespaces, bien que standards, peuvent parfois être supprimés sans affecter l'affichage dans la plupart des navigateurs.
Fusionner les informations et minifier les couleurs : Les styles, classes et valeurs ne sont pas toujours générés de manière optimale. Il est bénéfique de mutualiser les styles communs plutôt que de se reposer uniquement sur des attributs `style=""`. Par exemple, deux carrés verts devraient partager les mêmes propriétés de style. L'option "merge paths" peut cependant empêcher de conserver tous les tracés individuels si des règles CSS externes ou du JavaScript interagissent avec le SVG.

L'examen des options disponibles dans des outils comme SVGOMG permet de comprendre l'étendue des possibilités pour alléger une image SVG.

Enregistrement et exportation des fichiers SVG depuis Inkscape

Les images créées sous Inkscape sont initialement au format .SVG Inkscape. Ce format préserve de nombreuses informations telles que les calques et les chemins, ce qui est idéal pour retravailler le fichier ultérieurement.

Passage au format SVG simple

Cependant, ce format peut ne pas s'afficher correctement sur un site web. Pour obtenir une image "tout terrain", il est conseillé d'utiliser le menu "Fichier" -> "Enregistrer sous..." et de choisir le format "svg simple". Ce format nettoie le fichier en supprimant des informations comme les calques.

ATTENTION : Il est crucial de changer le nom du nouveau fichier pour ne pas écraser votre fichier de travail original. L'ajout de "_simple" dans le nom du fichier est une bonne pratique.

Il est possible que même les fichiers au format ".svg simple" ne s'affichent pas parfaitement dans tous les navigateurs. Pour garantir une compatibilité maximale, il est ensuite nécessaire de travailler sur ce fichier simplifié.

Finalisation de l'image SVG

Dans le fichier .svg simplifié, accédez au menu "Objet" -> "Objets..." pour afficher la fenêtre répertoriant tous les éléments de votre dessin. Vous y verrez les différentes couches, qui correspondent aux anciens calques. Enregistrez ensuite ce fichier pour qu'il soit pleinement visible dans votre navigateur.

tags: #tuto #pour #reduire #fichier #svg #sur