Inkscape : optimiser le code SVG

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

Quelques astuces

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

SVG Optimiser

On peut utiliser une application en ligne pour réduire le poids du document Inkscape :SVG optimiser.
L'outil en ligne s'appellait encore il y a peu "SVG editor". Or cette expression fait référence aux éditeurs WYSIWIG de SVG. Le changement de nom est donc logique.

SVG Optimiser de Peter Collingridge est un outil en ligne (donc un site) dans lequel vous entrez votre code SVG, soit en le collant soit en faisant un téléversement.

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

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

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

Ci-dessous deux captures d'écran qui vous montrent l'interface de cette application.

L'utilisation est très simple :
- téléverser ou collez le code SVG brut
- règlez les options d'optimisation

puis :
- comparez le rendu avec navigateur de l'original et de la version optimisée
- comparez les poids respectif des deux versions
- téléchargez, si vous le souhaitez, le code optimisé proposé ; l'application vous adresse alors un fichier "optimised.svg".

Mais revenons à mon exemple (la croix de Lorraine), le code optimisé est tellement succinct que je vous le soumet ci-dessous

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).

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 :

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 de style 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.
Cette image SVG animée via CSS peut être insérée dans une page web avec la balise IMG.

Optimisation et vectorisation

L'outil en ligne "SVG optimiser" est très utile lorsque le document Inkscape consiste en une photo (image bitmap) vectorisée ; le taux de compression peut alors être très important.

Ci-dessous un autre document SVG découlant de la vectorisation d'une image vectorielle. Fichier SVG qui a ensuite été optimisé via SVG Optimiser.
Le fichier initial produit par Inkscape faisait plus de 800 KO. La version optimisée retournée par SVG Optimser ne pèse plus que 370 KO. image SVG

Le code optimisé

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

Attention la version optimisée retournée par l'application en ligne, risque de ne pas comporter (en cas de liaison du document avec une image) le namespace : xmlns:xlink="http://www.w3.org/1999/xlink".
Or ce namespace est indispensable pour que le navigateur puisse afficher l'image vectorielle. Il faut donc le rajouter via NotePad ! C'est ce que j'ai du faire dans l'exemple ci-dessus.

Dans la version gratuite de SVG optimiser il n'est plus possible de téléverser le code SVG brut ; il faut le coller et il ne doit pas être trop long.
Dans ce cas le site vous propose de passer à la version premium qui elle est payante !
Démarche commerciale classique : gratuité au départ puis dès que l'utilisateur est "accro" le produit devient payant.
Retour menu