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 :