Comment fonctionne le compresseur SVG
Un fichier SVG enregistré depuis Illustrator, Inkscape, Figma ou Sketch contient généralement beaucoup d'éléments qu'un navigateur n'utilise jamais : métadonnées d'éditeur, commentaires, calques masqués, valeurs par défaut écrites en entier et coordonnées à huit décimales ou plus. Cet outil supprime tout cela avec SVGO, l'optimiseur SVG open source sur lequel s'appuient la plupart des outils de build et des applis de design : le dessin reste identique, mais le fichier est plus léger.
SVGO effectue plusieurs passes sur le fichier. Il fusionne et raccourcit les tracés, arrondit les nombres à la précision choisie, supprime les groupes inutiles et les éléments vides, et réécrit les couleurs sous leur forme la plus courte. Le viewBox est conservé, pour que le fichier SVG reste adaptable à toutes les tailles, et les identifiants auxquels d'autres parties du fichier font référence sont raccourcis avec mise à jour de leurs références : dégradés et masques fonctionnent donc toujours.
La précision est le seul réglage qui compte. Élevée garde trois décimales, ce qui est invisible à toute taille normale et constitue le choix sûr pour les icônes et les logos. Équilibrée en garde deux, et Le plus léger une seule, ce qui convient aux grandes illustrations où un dixième d'unité est bien inférieur à un pixel, mais peut déformer de très petites icônes. Si un résultat paraît anormal, compressez à nouveau l'original avec une précision plus élevée.
L'optimiseur, environ 200 KB, se charge la première fois que vous appuyez sur le bouton. Vos SVG sont lus et réécrits dans cet onglet et ne sont jamais envoyés, ce qui compte pour les logos non publiés et les créations de clients.
Les options du compresseur SVG expliquées
| Élevée | Trois décimales. Sûr pour les icônes, les logos et tout ce qui est petit. |
|---|---|
| Équilibrée | Deux décimales. Convient à la plupart des illustrations. |
| Fichier le plus léger | Une décimale. Pour les grandes créations ; vérifiez ensuite les petites icônes. |
| Conservé | viewBox, identifiants référencés, dégradés, masques et aspect du dessin. |
| Supprimé | Métadonnées d'éditeur, commentaires, éléments masqués et vides, précision superflue. |
Quand l'utiliser
Compressez des SVG avant de mettre des icônes et des logos sur un site web, où chaque kilooctet alourdit le chargement de la page, avant d'intégrer un fichier SVG dans du code HTML ou un composant React, avant de publier des ressources graphiques dans un dépôt de code, ou quand un formulaire d'envoi limite la taille des fichiers.
Gardez le fichier SVG d'origine, modifiable, pour votre appli de design. L'optimisation supprime les données d'éditeur comme les noms de calques et les repères : rouvrez donc l'original quand vous devez modifier la création.
À propos de l'optimiseur SVG
SVGO, abréviation de SVG Optimizer, est l'outil open source qui assure l'optimisation SVG dans la plupart des outils de build web, ainsi que dans les applis de design qui proposent un export optimisé. Il analyse le fichier SVG sous forme d'arbre, lui applique une série d'étapes de nettoyage éprouvées, puis le réécrit, en recommençant jusqu'à ce qu'il n'y ait plus rien à gagner. Chaque étape appliquée ici conserve l'aspect du dessin, c'est pourquoi ses réglages par défaut sont utilisés en production. La version utilisée sur cette page s'exécute entièrement dans le navigateur, chargée depuis le CDN jsDelivr lors de la première utilisation de l'outil.
Dépannage du compresseur SVG
« déjà optimisé ; renvoyé inchangé »
Le fichier SVG a déjà été optimisé : rien ne pouvait être supprimé sans le modifier. Le fichier d'origine vous est rendu.
Une partie du dessin a bougé ou s'est déformée
Les très petites icônes peuvent se décaler avec une faible précision. Compressez à nouveau l'original avec la précision Élevée.
« n'est pas un fichier SVG »
Le fichier ne contient pas de dessin SVG. Les fichiers exportés en SVG qui ne font qu'envelopper une image bitmap ne peuvent pas non plus être beaucoup allégés ; compressez plutôt l'image qu'ils contiennent.
Comment utiliser le compresseur SVG, étape par étape
- Appuyez sur « Choisir des fichiers SVG » ou faites glisser des fichiers sur le cadre.
- Réglez les options si nécessaire ; les valeurs par défaut conviennent à la plupart des usages.
- Appuyez sur « Compresser un fichier SVG ». Le travail se fait sur votre appareil.
- Enregistrez le résultat avec son bouton de téléchargement.
Est-il sûr de faire cela en ligne ?
Avec la plupart des outils en ligne, « en ligne » signifie que votre fichier est envoyé sur le serveur d'une entreprise, traité là-bas et conservé un certain temps avant d'être supprimé. Ici, ce n'est pas le cas. La page télécharge le code de l'outil dans votre navigateur, et votre fichier est lu et traité dans l'onglet, sur votre propre appareil. Il n'est jamais envoyé à TapToConvert ni à qui que ce soit.
Vous pouvez le vérifier vous-même : une fois la page et son moteur chargés, coupez le Wi-Fi, et l'outil fonctionne toujours. Cela signifie aussi qu'il n'y a ni file d'attente, ni limite quotidienne, ni limite de taille imposée par un serveur ; la seule limite est la mémoire que votre navigateur accorde à un onglet.
FAQ du compresseur SVG
La compression va-t-elle changer l'aspect de mon fichier SVG ?
En précision Élevée, aucun changement visible. Une précision plus faible arrondit davantage les coordonnées, ce qui peut déformer de très petits détails.
De combien va-t-il diminuer ?
Les SVG exportés depuis des applis de design diminuent souvent de 30 à 70 %. Les SVG déjà optimisés diminuent peu, voire pas du tout.
Puis-je encore modifier le fichier SVG compressé ?
Oui, mais les noms de calques, les repères et les réglages de l'éditeur ont disparu. Gardez l'original pour le modifier.
Mes fichiers sont-ils envoyés sur un serveur ?
Non. SVGO s'exécute dans votre navigateur : le fichier SVG ne quitte donc jamais votre appareil.
Est-ce gratuit ?
Oui. Pas d'inscription, pas de filigrane et aucune limite d'utilisation. TapToConvert est financé par la publicité.
Mes fichiers sont-ils envoyés sur un serveur ?
Non. Tout se passe dans l'onglet de votre navigateur, sur votre propre appareil.