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" pas vraiment utile 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 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 ( bouton "upload") du code.

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 "extreme" le fichier SVG obtenu ne peserait que 0,8 KO ! C'est l'option que j'ai retenu.
Notez la précision numérique avec 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 via votre éditeur de textes ; vous collez tout le code SVG du fichier dans le zone de texte de l'onglet Input (et qui est légendée : "Or paste SVG code:") puis vous cliquez sur le bouton "load".
Vous basculez alors dans l'onglet "Optimise" du site pour 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 car il évite d'avoir un document Inkscape trop volumineux.

Ci-dessous un autre document SVG découlant de la vectorisation d'une image vectorielle. Fichier SVG qui a ensuite été optimisé via SVG editor.
Le fichier initial (après vectorisation) faisait 80 KO. La version optimisée produite par l'application ne pèse plus que 40 KO. image SVG

Procédure

Pour produire le document j'avais lié la photo puis j'avais procédé à la vectorisation (passes multiples).
Puis j'ai basculé tout le code dans la zone de texte légendée "or paste code SVG".
J'ai ensuite sélectionné l'onglet "optimise" et j'ai coché "extreme". 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 envisagez d'animer ensuite certains objets et donc de devoir rajouter du CSS ou du JavaScript ou du SMIL ..

Le code optimisé

Je vous communique ci-dessous un extrait du code après optimisation:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 105.6 128.9" version="1.1"> <g transform="translate(-98.1254,-119.546)"> <image width="105.8" height="128.9" preserveAspectRatio="none" x="98.1" y="119.5"/> <path d="m98.1 183.9v-64.5h52.9 52.9v64.5 64.5H151 98.1Z" style="fill:#e0e1e3;stroke-width:0.3"/> <path d="m98.2 197 0.1-51.3 1.4-0.2c0.8-0.1 2.5-0.7 3.8-1.3 2.8-1.3 6.4-2.2 9.3-2.1 4.7 0.1 8.6-0.3 9.4-0.9 1-0.8 ...

Attention j'ai dû intervenir manuellement pour changer les valeurs des attributs width & height pour que l'image devienne adaptative.

Notez que les paramètres n'ont plus qu'une décimale alors que dans la version initiale ils en avaient 4 !
Retour menu