Optimiser un SVG et réduire son poids
Sur cette page
En bref : ouvrez l’Optimiseur SVG d’Imgovo, ajoutez votre SVG (jusqu’à 3 Mo), laissez activée l’option Supprimer les commentaires et les données d’éditeur, arrondissez au besoin les nombres et comparez l’aperçu à l’original. Téléchargez ensuite le SVG ou copiez son code. Le fichier est traité dans votre navigateur et n’est jamais envoyé.
Pourquoi les SVG deviennent lourds
Un logo simple ne représente que quelques lignes de code. Mais les logiciels de dessin comme Inkscape, Sketch ou Illustrator en ajoutent souvent bien plus : commentaires, réglages d’éditeur, groupes vides, attributs vides, espaces généreux et coordonnées à nombreuses décimales. Rien de cela ne change ce que vous voyez, mais tout doit être téléchargé. Sur un site avec beaucoup d’icônes, cela s’additionne. Des fichiers plus légers accélèrent aussi vos pages ; pour la vue d’ensemble, lisez Comment optimiser les images de votre site web : taille, format et qualité.
Ce que fait l’optimiseur
- Supprime les commentaires et les données d’éditeur.
- Supprime les groupes vides et les attributs vides.
- Supprime les espaces inutiles.
- Peut arrondir les longs nombres à 3, 2 ou 1 décimale, ou les laisser tels quels.
- Peut conserver le titre et la description, utilisés par les lecteurs d’écran.
- Conserve la viewBox, les formes, les dégradés, les tracés de détourage, les masques et les identifiants utilisés par d’autres parties du fichier.
Pas à pas
- Ouvrez l’Optimiseur SVG et déposez un fichier SVG sur la page, cliquez pour le choisir ou collez-le.
- Sous Précision des nombres, choisissez Laisser les nombres tels quels, 3 décimales, 2 décimales ou 1 décimale.
- Laissez Supprimer les commentaires et les données d’éditeur activé. Cochez Conserver le titre et la description si le dessin est un contenu que les lecteurs d’écran doivent annoncer.
- Regardez la section Résultat. Elle affiche le poids avant et après et dessine l’original et le résultat côte à côte.
- Lisez la ligne de comparaison. Imgovo dessine les deux à la même taille et vous indique l’écart, pixel par pixel.
- Cliquez sur Télécharger le SVG, ou sur Copier le code SVG pour le coller dans votre page.
Faut-il arrondir les nombres ?
Commencez sans arrondi : le dessin reste identique et les données d’éditeur sont quand même retirées. Essayez ensuite 3 décimales, puis 2 si l’aperçu reste correct. L’arrondi économise plus de place, mais peut modifier légèrement des traits fins ou de petits détails. Si Imgovo signale un écart visible, revenez à une précision plus élevée.
Changer les couleurs sans ouvrir d’éditeur
Imgovo liste les couleurs unies écrites directement dans les formes et les styles. Choisissez une nouvelle couleur pour l’une d’elles et chaque utilisation de cette couleur exacte est remplacée. C’est pratique pour obtenir une même icône dans plusieurs couleurs de marque.
Les dégradés, les couleurs définies par des feuilles de style et le mot currentColor ne sont pas touchés. La comparaison pixel par pixel est ignorée quand vous changez des couleurs, car le résultat doit alors différer.
Le texte dans un SVG
Le texte est dessiné avec une police. Si l’appareil du lecteur ne l’a pas, une autre est utilisée et le dessin change. Imgovo affiche un avertissement quand le fichier contient du texte. Convertir le texte en contours dans votre logiciel de dessin évite le problème.
Ce qui est supprimé par sécurité
Un SVG peut contenir des scripts, des pages web intégrées, des animations capables de modifier des liens, des liens vers d’autres sites et des gestionnaires d’événements. Imgovo les supprime et une remarque sous le fichier indique combien d’éléments ont été retirés. C’est une étape distincte de l’allègement du fichier.
Après l’optimisation
- Pour transformer le SVG en image en pixels, utilisez le Convertisseur SVG.
- Pour l’utiliser comme icône de site, ajoutez-le au Générateur de favicon, qui peut inclure un
favicon.svg. - Gardez toujours votre fichier d’origine. Les données d’éditeur ne peuvent pas être récupérées depuis la copie optimisée.
Confidentialité
Le SVG est lu et réécrit dans votre navigateur. Rien n’est envoyé.
Essayez maintenant
Ouvrez l’Optimiseur SVG, ajoutez un SVG exporté depuis votre logiciel de dessin et voyez de combien il s’allège.
Questions fréquentes
Que modifie l’optimiseur SVG ?
Il supprime les commentaires et les données d’éditeur (par exemple d’Inkscape ou de Sketch), les groupes vides, les attributs vides et les espaces inutiles, et peut arrondir les longs nombres à 1, 2 ou 3 décimales. Il conserve la viewBox, les formes, les dégradés, les tracés de détourage, les masques et les identifiants utilisés ailleurs.
Mon dessin aura-t-il un aspect différent ensuite ?
Sans arrondi, il devrait être identique. Imgovo dessine l’original et le résultat à la même taille, les compare pixel par pixel et vous indique l’écart. Arrondir à moins de décimales peut modifier légèrement des traits fins ou de petits détails : vérifiez l’aperçu.
De combien le fichier sera-t-il allégé ?
Cela dépend du fichier. Les dessins exportés depuis des éditeurs rétrécissent souvent beaucoup à cause des données d’éditeur ; les fichiers déjà compacts changent très peu. Le résultat affiche le poids réel avant et après.
Comment fonctionne le changement de couleurs ?
Imgovo liste les couleurs unies écrites directement dans les formes et les styles. Choisissez une nouvelle couleur pour l’une d’elles et chaque utilisation de cette couleur exacte est remplacée. Les dégradés, les couleurs définies par des feuilles de style et le mot currentColor ne sont pas touchés.
Qu’est-ce qui est supprimé pour des raisons de sécurité ?
Les scripts, les pages web intégrées, les animations pouvant modifier des liens, les liens vers d’autres sites et les gestionnaires d’événements sont supprimés. L’avis sous le fichier indique combien d’éléments ont été retirés. C’est distinct de l’allègement du fichier.
Mon SVG est-il envoyé sur un serveur ?
Non. Le SVG est lu et réécrit dans votre navigateur, rien ne quitte votre appareil.