Inkscape peut générer un code un peu trop verbeux et donc lourd si on ne prend pas certaines précautions.
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 ...
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 :
Bluffant !!!
Ci-dessous rendu avec le navigateur de ce code :
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).
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.
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 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.
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.
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 ..
Je vous communique ci-dessous un extrait du code après optimisation:
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