Un optimiseur SVG rapide et privé
Le format SVG (Scalable Vector Graphics) est le standard du web pour des icônes et des illustrations nettes, quelle que soit la résolution. Cependant, lorsque vous exportez un SVG depuis un outil de design, le fichier obtenu est rarement optimisé pour la production. Cet optimiseur SVG vous permet de nettoyer instantanément vos images vectorielles, en supprimant le code superflu pour réduire la taille des fichiers sans perte de qualité visuelle.
Comme cet outil s'exécute entièrement dans votre navigateur, vos images ne sont jamais envoyées sur un serveur. Vous pouvez compresser des fichiers SVG en toute sécurité, même s'ils contiennent des logos propriétaires, des designs de produits inédits ou des schémas confidentiels. Le traitement est instantané : il indique en temps réel l'espace gagné et propose une comparaison visuelle avant/après pour garantir que vos images restent parfaitement intactes.
Pourquoi compresser vos fichiers SVG
Contrairement aux images matricielles (comme les JPEGs ou PNGs) qui stockent des pixels, les SVGs sont essentiellement des fichiers texte XML contenant des instructions mathématiques pour tracer des formes. Lorsque les logiciels de dessin vectoriel génèrent ces fichiers, ils incluent souvent une quantité massive de données superflues dont les navigateurs n'ont pas besoin pour afficher l'image.
Voici ce qui alourdit généralement les fichiers SVG :
- Métadonnées de l'éditeur : Les balises et attributs spécifiques au logiciel de création, utiles uniquement lors de l'édition.
- Commentaires et éléments vides : Les notes de développeurs, les groupes vides (
<g>) et les calques masqués qui n'apportent rien au rendu visuel final. - Précision excessive : Les coordonnées de tracés avec six décimales ou plus (ex. :
14.123456), qui occupent des octets inutiles. - Attributs par défaut : Les styles et attributs qui correspondent au comportement par défaut du navigateur et qui n'ont pas besoin d'être déclarés explicitement.
En utilisant un minificateur SVG, vous éliminez ce texte masqué. Réduire la taille d'un fichier SVG permet à vos pages web de se charger plus vite, de consommer moins de bande passante, et d'améliorer les performances globales de votre site ainsi que son référencement SEO.
Comment minifier un SVG en ligne
Cet outil propose plusieurs options personnalisables pour vous offrir un contrôle précis sur le processus d'optimisation. Selon la façon dont vous comptez utiliser le graphique final, vous pouvez ajuster ces paramètres pour trouver le compromis parfait entre la taille du fichier et la lisibilité du code.
Précision des décimales
Les tracés vectoriels sont dessinés à l'aide de coordonnées. Les logiciels de création exportent souvent ces coordonnées avec une précision extrême, ce qui génère de longues suites de chiffres. En réduisant la précision des décimales, vous pouvez considérablement diminuer le nombre de caractères de votre fichier. Une précision de 1 ou 2 est généralement idéale pour les icônes web. Si vous remarquez que les courbes sont crénelées ou que les formes se décalent dans l'aperçu visuel, il vous suffit d'augmenter le curseur de précision jusqu'à ce que l'image redevienne correcte.
Optimisation multipasse
L'optimisation est souvent un processus en plusieurs étapes. La suppression d'un élément inutile peut rendre un élément parent vide, qui peut alors être supprimé à son tour. Activer l'option "Multipasse" indique à l'optimiseur d'exécuter ses routines de nettoyage en boucle jusqu'à ce que la taille du fichier ne puisse plus être réduite. Cela garantit le fichier le plus léger possible.
Supprimer les dimensions
Par défaut, de nombreux SVG sont exportés avec des attributs width et height codés en dur (par ex., width="500px"). Bien que cela verrouille l'image à une taille spécifique, cela complique le web design responsive. Cocher "Supprimer les dimensions" retire ces attributs tout en conservant le viewBox. Cela permet au SVG de se redimensionner de manière fluide en fonction du CSS de son conteneur parent, facilitant grandement son utilisation dans les mises en page web modernes.
Formatage lisible
Si votre objectif est d'obtenir la taille de fichier minimale absolue, laissez cette case décochée. L'outil produira une seule ligne de code dense. En revanche, si vous nettoyez un SVG que vous prévoyez de modifier manuellement, d'animer ou d'intégrer directement dans un document HTML, cocher "Formatage lisible" formatera le résultat avec une indentation et des sauts de ligne propres.
Bonnes pratiques pour les images vectorielles
Optimiser vos SVG n'est qu'une étape pour créer un site web rapide et accessible. Lorsque vous travaillez avec des images vectorielles, réfléchissez à la façon dont elles seront intégrées. Si vous insérez le SVG directement dans votre code HTML, il est crucial de le minifier pour limiter le poids de la page. Vous pouvez également traiter votre page entière avec un Minifieur HTML ou un Minifieur CSS pour des performances optimales.
Vérifiez toujours l'aperçu visuel après l'optimisation. Bien que la plupart des SVG se compressent sans problème, les illustrations très complexes avec des dégradés élaborés ou des masques d'écrêtage précis peuvent nécessiter une précision décimale plus élevée pour conserver leur aspect d'origine. La visionneuse avant/après intégrée permet de repérer facilement toute modification indésirable avant de télécharger votre fichier minifié.
Enfin, bien que les SVG soient parfaits pour les logos, les icônes et les illustrations simples, ils ne sont pas adaptés aux photographies complexes. Si votre SVG est principalement composé d'images matricielles intégrées (comme des JPEG encodés en base64), l'optimisation aura peu d'effet. Dans ce cas, il est souvent préférable de convertir entièrement l'image à l'aide d'un convertisseur SVG en PNG.