Optimiseur SVG

À propos de cet utilitaire

Les fichiers SVG (Scalable Vector Graphics) décrivent formes, tracés et texte en XML. Les outils de design, exports CMS et icônes codées à la main contiennent souvent bien plus de données que le navigateur n'en a besoin. L'optimisation SVG supprime ce markup superflu — commentaires, métadonnées d'éditeur, groupes redondants, précision inutile des coordonnées et attributs inutilisés — tout en conservant le rendu visuel identique. Contrairement au PNG ou JPEG, le SVG reste éditable et indépendant de la résolution après compression. Une icône bien optimisée peut passer de 40 Ko à 6 Ko sans perte visible. L'optimisation est donc essentielle pour logos, icônes d'interface, illustrations et favicons chargés à chaque page. Des fichiers plus légers accélèrent le chargement, réduisent la bande passante mobile et améliorent les Core Web Vitals. Les moteurs de recherche favorisent les pages rapides. Les SVG optimisés s'intègrent mieux en HTML, composants React et e-mails où un markup lourd peut casser les parseurs ou gonfler le bundle. Les sites de production référencent des SVG en CSS, balises <svg> inline ou img. Chaque kilo-octet pèse sur le chemin de rendu critique. Supprimer espaces, transforms et doctype réduit le transfert sans toucher CSS ou JavaScript. Pour les favicons SVG (link rel="icon" type="image/svg+xml"), un fichier léger se met à jour plus vite lors d'un rebranding. Les projets React importent souvent des SVG comme composants ou URLs. Des sources lourdes augmentent le temps d'analyse du bundle quand les loaders les inlinent. Avant d'ajouter une icône à votre bibliothèque, optimisez-la pour préserver tree-shaking et code splitting. Vérifiez que le viewBox reste intact — React en dépend pour le redimensionnement responsive. Les navigateurs modernes supportent les favicons SVG dans le head. Ils restent nets sur écrans Retina, à condition que le fichier soit petit et valide. Les favicons SVG doivent être carrés, palette simple, sans références externes ni scripts. Après optimisation, convertissez en ICO ou PNG pour Windows ancien ou crawlers sociaux. Un SVG optimisé est un excellent master pour un pack favicon complet. Erreurs d'export fréquentes : images raster embarquées, précision décimale excessive, formes dupliquées, blocs style au lieu d'attributs. Illustrator ajoute des groupes Layer, Figma des xmlns et coordonnées à six décimales. width/height sans viewBox cassent le responsive. Calques masqués exportent une géométrie invisible qui alourdit le fichier. Depuis Figma, copiez en SVG ou exportez avec Outline stroke. Les fichiers Figma incluent fill-rule et matrices de transform sur chaque groupe ; l'optimisation fusionne les tracés adjacents quand c'est sûr. Dans Illustrator, exportez en SVG Minify ou Responsive, désactivez l'embarquement de polices inutile et développez les apparences avant export. Collez le markup dans cet optimiseur navigateur. Le traitement est local — vos fichiers de marque ne quittent jamais votre appareil. Téléchargez le fichier nettoyé ou copiez le résultat dans votre dépôt, CMS ou pipeline favicon. Associez-le à notre convertisseur SVG vers ICO, SVG vers PNG ou générateur de favicon pour un lancement production.

FAQ