Optimiseur SVG
Minifiez et nettoyez vos fichiers SVG — supprimez les métadonnées, fusionnez les chemins, économisez 50 à 80 %.
À quoi sert un optimiseur SVG ?
Les fichiers SVG exportés depuis les outils de design (Figma, Sketch, Illustrator, Inkscape) sont généralement 30 à 70 % plus volumineux qu’ils ne le devraient. Les éditeurs y laissent des commentaires, des métadonnées de signature, du CSS redondant, des groupes vides et une précision numérique excessive qu’aucun œil humain ne peut percevoir. Un optimiseur réécrit le même dessin en un SVG équivalent et plus compact — identique au pixel près pour un moteur de rendu, mais d’une taille de fichier nettement réduite. Tout se passe localement sur votre appareil — votre SVG n’est jamais téléversé, jamais copié sur un serveur, jamais journalisé. Cette garantie de confidentialité compte pour les fichiers de marque, les icônes produit internes et tout SVG qui ne devrait pas se trouver sur un serveur tiers. Les valeurs par défaut sont calibrées pour le travail de niveau icône : la précision est réglée à 2 décimales, les commentaires et métadonnées d’éditeur disparaissent, les groupes inutiles sont aplatis, et le viewBox d’origine reste intact pour la mise à l’échelle responsive. Pour les illustrations aux courbes subtiles, montez la précision à 3 ; pour les jeux d’icônes responsives, l’option supprimer les dimensions retire les attributs width/height fixes afin que le CSS puisse mettre les icônes à l’échelle voulue dans votre feuille de styles.
Comment optimiser un SVG
Collez le balisage SVG ou déposez un fichier .svg sur la zone de dépôt. Ajustez les cases d’options — les valeurs par défaut sont judicieuses. Choisissez la précision numérique (2 convient à la plupart des icônes), puis appuyez sur Optimiser. L’aperçu avant/après vous permet de confirmer qu’aucun rendu visuel n’a changé. Copiez le balisage optimisé ou téléchargez directement le fichier.
Astuces qui économisent encore plus d’octets
Tenez-vous-en à une palette de couleurs unique et évitez les images matricielles intégrées — les PNG encodés en base64 dans un SVG annulent l’intérêt du format. Convertissez le texte en tracés uniquement si vous avez besoin d’un glyphe spécifique ; sinon, conservez les balises <text> pour que les lecteurs d’écran et les moteurs de recherche voient le contenu. Compressez le fichier obtenu avec gzip/brotli sur votre serveur : un SVG optimisé se compresse très bien, atteignant souvent 70 % de la taille post-optimisation.
Ce que fait chaque option
| Option | Effet | Notes |
|---|---|---|
| Supprimer les commentaires | Supprime les blocs laissés par les éditeurs. | Presque toujours sans risque. À désactiver uniquement si les commentaires documentent le fichier. |
| Supprimer les métadonnées | Supprime les éléments | Sans risque — les métadonnées servent à l’outil de design, pas au moteur de rendu. |
| Réduire les groupes inutiles | Supprime les éléments | Visuellement identique, économise souvent 5 à 15 %. |
| Supprimer width/height (SVG responsive) | Retire les attributs width/height pour que le CSS dimensionne le SVG. | Utile pour les systèmes d’icônes ; désactivé par défaut pour conserver un fichier autonome. |
| Précision numérique | Arrondit les nombres des tracés à N décimales. | 2 par défaut, 3 pour les illustrations fines, 1 uniquement pour les toutes petites icônes. |
Questions fréquentes
L’optimisation va-t-elle casser mon SVG ?
Y a-t-il quelque chose qui est téléversé ?
Et les sprites ou symboles SVG ?
Quelle taille devraient avoir les icônes ?
Faut-il conserver xmlns et viewBox ?
xmlns, le SVG ne s’affichera pas en dehors de HTML5 ; sans viewBox, vous perdez la mise à l’échelle responsive. Les deux attributs sont minuscules et méritent d’être gardés.