Visionneuse et Optimiseur SVG — Nettoyer et Compresser vos SVG
Les SVG exportés depuis Illustrator, Figma ou Sketch contiennent souvent des métadonnées, des groupes imbriqués et du code inutile qui gonfle la taille du fichier. Notre visionneuse et optimiseur SVG affiche le rendu de votre SVG et le nettoie avec SVGO — réduisant sa taille de 30 à 70% sans perte de qualité visuelle.
Qu'est-ce qu'un SVG optimisé ?
Un SVG optimisé supprime les commentaires, les métadonnées d'éditeur (Adobe, Inkscape), les groupes vides, les attributs redondants et les transformations inutiles. Le résultat est un SVG plus petit, plus propre et souvent plus lisible pour les développeurs qui souhaitent modifier le code.
Comment utiliser notre Outil
- Collez le code SVG ou glissez-déposez un fichier .svg.
- La prévisualisation affiche le rendu instantanément.
- Cliquez sur « Optimiser » pour appliquer SVGO avec les paramètres recommandés.
- Comparez la taille avant/après et copiez le SVG optimisé.
Pourquoi optimiser les SVG ?
- Performance : Les SVG plus petits se chargent plus vite, améliorant le Core Web Vitals.
- Inline SVG : Un SVG propre intégré dans le HTML augmente le poids de la page moins que l'original.
- Animations CSS : Les SVG propres avec des IDs et classes bien nommés sont plus faciles à animer.
- Débogage : Inspectez la structure SVG et identifiez les paths complexes ou les groupes inutiles.
Prêt à l'essayer ? Utilisez notre Visionneuse et Optimiseur SVG gratuitement — sans inscription, fonctionne dans votre navigateur.
Questions fréquentes
L'optimisation peut-elle dégrader mon SVG ?
L'optimisation avec SVGO est généralement sans perte visuelle pour les SVG d'icônes et d'illustrations simples. Certains SVG complexes (effets de filtre, animations SMIL) peuvent nécessiter des paramètres d'optimisation plus prudents.
Quelle réduction de taille peut-on espérer ?
Les SVG exportés depuis Illustrator perdent typiquement 30-50% de leur taille après optimisation. Les SVG de Figma sont déjà partiellement optimisés — gains de 10-20%. Les gains dépendent de la complexité et de l'outil source.
Comment inliner un SVG optimisé dans HTML ?
Copiez le contenu SVG (sans la déclaration XML <?xml...?>) et collez-le directement dans votre HTML. Le SVG inline est stylisable avec CSS et accessible aux scripts, contrairement au SVG dans un <img>.