Optimiser le code SVG généré par Inkscape

Inkscape ne génère pas un SVG parfaitement propre et optimisé.

Premier conseil : pour éviter déjà pas mal de "blabla" inutile je vous conseille d'enregistrer un document Inkscape en "SVG simple" (et non pas "SVG inkscape").
Par ailleurs avant d'enregistrer un document demandez à le "nettoyer". Ainsi les filtres, dégradés, motifs qui en définitive ne sont pas utilisés seront supprimés.

Même au format "SVG simple" les documents Inkscape contiennent encore des informations redondantes, telles que des métadonnées de l’éditeur, des commentaires, des groupes vides, des valeurs par défaut, des valeurs non optimales, etc.
Il est donc préférable d'optimiser le fichier SVG.

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 upload du fichier. L’outil vous propose plusieurs options d’optimisation.

Exemple

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

Mais le fichier obtenu (croix_lorraine.svg) pèse 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 "extrème" le fichier SVG obtenu ne péserait que 0,8 KO !
C'est l'option que j'ai retenu.

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 !!!

Remarquez que la dernière version de Inkscape génère un viewBox.

Attention les dimensions de l'image sont toujours exprimés en pixels. Donc pour une adaption de l'image à la largeur de l'écran il est préférable d'exprimer la valeur de l'attribut width en pourcentage.

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

Quant au rendu avec le navigateur de ce fichier vous pouvez constater qu'il est satisfaisant. image Inkscape SVG

Remarque concernant l'outil en ligne

Apparemment si le fichier SVG à optimiser est lourd l'outil a du mal à "uploader" celui-ci.
Dans ce cas vous ouvrez le document Inkscape à optimiser avec un éditeur de textes ; vous collez tout le code SVG du fichier dans le "textarea" de l'onglet Input (zone de texte légendée : "Or paste SVG code:") puis vous cliquez sur le bouton "load" situé sous la zone de texte.
Automatiquement vous basculez dans l'onglet "Optimise" du site. Vous n'avez plus alors qu'à 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, height et j'ai modifié la feuille interne.
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.
En modifiant les valeurs du raccourci CSS animation on pourrait imaginer plein d'options ...
Retour menu