Optimiser le code SVG généré par Inkscape

Inkscape peut générer un code un peu trop verbeux et donc lourd si on ne prend pas certaines précautions.

Quelques astuces

Pour éviter déjà pas mal de "blabla" inutile je vous conseille d'enregistrer un nouveau document Inkscape en "SVG simple" (et non pas la proposition par défaut : "SVG inkscape").

Par ailleurs avant d'enregistrer un document demandez à le "nettoyer". Ainsi les filtres, dégradés, motifs, etc. qui en définitive n'ont pas été utilisés seront supprimés. La commande est :Fichier/Nettoyez le document.

La précision numérique par défaut est 8 chiffres ; ce qui est beaucoup. Aussi je vous conseille de la réduire à 4 chiffres. Il vous faut donc modifier les préférences du logiciel. Avec la version .91 d'Inkscape la commande est :Edition/préférences/sorties SVG/précision numérique

Cependant dans le cadre d'une vectorisation revenez à une précision d'au moins 6 décimales sinon la version vectorisée de l'image matricielle sera très très moche ...

SVG editor

On peut encore simplifier le code SVG généré par Inkscape en utilisant un outil en ligne : SVG editor.

SVG Editor de Peter Collingridge est un outil en ligne (donc un site) dans lequel vous entrez votre code SVG, soit directement soit en faisant un téléversement (upload) du fichier. L’outil vous propose plusieurs options d’optimisation.

Avec Inkscape j'ai dessiné une croix de Lorraine :

Mais le fichier obtenu (croix_lorraine.svg) pèse encore près de 7 kilos !

Je me suis donc connecté au site dont l'adresse est : https://petercollingridge.appspot.com/svg-editor
Vous pouvez taper simplement "svg editor" le moteur de recherche va trouver ce site.

Ci-dessous une capture d'écran qui vous montre l'onglet optimise de l'outil. Il existe trois autres onglets : Input, Edit, Output.
Avant j'avais choisi le document SVG sur mon disque puis j'avais cliqué sur le bouton légendé "Upload" (dans l'onglet Input).

Onglet Optimise de l'outil en ligne :

Vous noterez que si j'opte pour l'optimisation "extrème" le fichier SVG obtenu ne péserait que 0,8 KO !
C'est l'option que j'ai retenu.
Notez la précision de cette option : 1 décimale.

Le site me retourne alors un fichier nommé optimsed.svg.

Le code SVG produit par l'optimisation est tellement succinct que je peux vous le communiquer en entier ci-dessous :

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" version="1.1"> <style> .s0{fill:#666;} .s1{fill:#0ff;stroke-linecap:round;stroke-width:4;stroke:#0ff;} </style> <g transform="translate(0,-652.36216)"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70" class="s1"/> <rect y="752.4" x="90" height="60" width="220" class="s1"/> <rect y="872.4" x="70" height="60" width="260" class="s1"/> <path d="m311 751.4 20 10.8 0 61-20-11.8z M331 870.4l21 13.8 0.4 61-21.4-9.9z M160 1012.4l80 0 12.7 19-78 1z M236.5 933.7 330 932.4l18.7 11.7-93.5 1.4z M236.5 813.7 310 812.4l22.2 12.4-85.2-0.7z" fill="#666"/> </g> </svg>

Bluffant !!!

Ci-dessous rendu avec le navigateur de ce code : image Inkscape SVG

Attention les dimensions de l'image sont toujours exprimés en pixels ... donc elle n'est pas encore adaptative.

On retrouve les trois rectangles croisés affectés de la classe s1 (remplissage en bleu ou #0ff) et les chemins grisés (gray ou #666).

Remarque concernant l'outil en ligne

Apparemment si le fichier SVG à optimiser est lourd on n'arrive pas à le téléverser vers le site.

Dans ce cas vous ouvrez le document Inkscape à optimiser avec un éditeur de textes ; vous collez tout le code SVG du fichier dans le "textarea" de l'onglet Input (zone de texte légendée : "Or paste SVG code:") puis vous cliquez sur le bouton "load" situé sous la zone de texte.
Vous basculez alors dans l'onglet "Optimise" du site. Vous n'avez plus alors qu'à choisir l'option d'optimisation.

Aspect de l'onglet Input de l'outil :

Animer certains objets SVG du document

Imaginez que l'on veuille animer les trois rectangles constitutifs de la croix de Lorraine.
Plus précisèment on veut que la couleur de fond de ces rectangles passe du bleu au blanc puis au rouge. Puis le cycle se répète à l'infini avec alternance (changment de sens).
Le plus simple est d'utiliser CSS !

Le code complet du fichier SVG après modifications :

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 400 400" version="1.1"> <style> .s0{fill:#666;} @keyframes tricolorer { 0%{fill : blue ; } 50%{fill : white ; } 100% {fill : red ; } } .s1{animation : tricolorer 9s 0s infinite linear alternate ; } </style> <g transform="translate(0,-652.36216)" id ="croix"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70" class="s1"/> <rect y="752.4" x="90" height="60" width="220" class="s1" /> <rect y="872.4" x="70" height="60" width="260" class="s1" /> <path d="m311 751.4 20 10.8 0 61-20-11.8zM331 870.4l21 13.8 0.4 61-21.4-9.9zM160 1012.4l80 0 12.7 19-78 1zM236.5 933.7 330 932.4l18.7 11.7-93.5 1.4zM236.5 813.7 310 812.4l22.2 12.4-85.2-0.7z" fill="#666"/> </g> </svg>

J'ai modifié les valeurs des attributs width et height de la balise SVG pour rendre l'image vectorielle "adaptative".
J'ai aussi modifié la feuille interne du fichier SVG.
Il suffit de définir un "keyframes" et de l'appliquer à la classe s1.

Ci-dessous le rendu de la version animée : image Inkscape SVG

Ici le cycle dure 9 secondes, démarre immédiatement et se répète à l'infini.

SVG editor et la vectorisation

L'outil en ligne SVG editor est très utile lorsque le document Inkscape consiste en une image matricielle vectorisée.
Ci-dessous un document Inkscape avec l'équivalent vectoriel d'une photo (image jpg) : image Inkscape SVG

Après vectorisation ce fichier SVG pesait 200 KO !
Pour produire le document j'avais lié la photo puis j'avais procédé à la vectorisation (passes multiples).
J'ai ouvert ce fichier avec notePad et j'ai supprimé l'instruction image découlant du lien.
Puis j'ai basculé tout le code dans la zone de texte légéndée "or paste code SVG".
J'ai alors demandé l'optimisation "extrème".
L'application a alors produit un fichier "optimsed.svg" pesant 113KO que j'ai téléchargé puis renommé.

Attention l'optimisation "extrème" n'est pas toujours souhaitable car la lecture du code peut devenir difficile (pas de sauts de ligne).
A éviter donc si vous envisager d'animer ensuite certains objets et donc de rajouter du CSS ou du Javascript ou du SMIL ..
Retour menu