Inkscape peut générer un code un peu trop verbeux et donc lourd si on ne prend pas certaines précautions.
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
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).
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 "responsive".
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 :
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.
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.
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