Fonctionnement de l'optimisation SVG
L'optimisation du code SVG (Scalable Vector Graphics) consiste à nettoyer et à réduire la taille du balisage XML sans altérer le rendu visuel de l'image. Le format SVG, étant textuel, contient souvent des éléments superflus générés par les logiciels de dessin vectoriel.
Le processus s'effectue directement dans l'interface: vous collez votre code SVG dans la zone de saisie, puis l'outil l'analyse et le traite pour en éliminer les composants inutiles. Une fois le traitement terminé, l'outil affiche les statistiques de compression, notamment la taille initiale, la taille finale et le gain d'espace obtenu, vous permettant ensuite de copier ou de télécharger le code épuré.
Éléments nettoyés et préservés lors du traitement
Pour garantir une réduction de taille efficace tout en maintenant l'intégrité du fichier, l'outil applique des règles strictes de nettoyage prudent.
Ce qui est supprimé du code SVG
- Commentaires et métadonnées: Les informations de création, les métadonnées de l'éditeur et les commentaires d'aide au développement sont retirés.
- Espaces de noms d'éditeurs et inutilisés: Les déclarations de namespaces propres à des logiciels spécifiques (comme Inkscape ou Adobe Illustrator) qui ne servent pas à l'affichage web sont nettoyées.
- Espaces superflus: Les espacements redondants à l'intérieur des attributs et entre les balises sont condensés.
- Couleurs équivalentes plus courtes: Les codes couleur sont convertis vers leur notation la plus compacte (par exemple, un code hexadécimal plus court) lorsque cela est possible.
Ce qui est conservé pour la sécurité du design
Pour éviter toute altération du rendu ou des interactions dynamiques (CSS/JavaScript), l'optimiseur applique un principe de conservation stricte:
- La structure de la
viewBoxreste intacte pour ne pas casser la réactivité de l'image. - Les identifiants (
IDs) et les libellés sont préservés. - La géométrie d'origine est maintenue sans réécriture des chemins (
path) ni arrondi sur la précision des décimales.
Spécifications techniques et limites de traitement
Le traitement des fichiers SVG est soumis à des règles de validation pour assurer la stabilité du navigateur et la sécurité des données.
- Limite de taille: Le code SVG saisi doit respecter une limite maximale de caractères. Si cette limite est dépassée, le message d'erreur suivant s'affiche: « Ce SVG est trop volumineux. Gardez-le sous
{max}caractères. ». - Temps d'exécution: L'optimisation doit s'exécuter rapidement. Si le processus dépasse 15 secondes, le traitement est interrompu et l'outil affiche: « Cela a pris trop de temps et a été arrêté — essayez un SVG plus petit. ».
- Interruption du processus: Le fait de vider la zone de saisie ou de modifier le code en cours de traitement arrête immédiatement toute tâche d'optimisation active.
Gestion des erreurs et messages de l'interface
En fonction de l'état du code soumis, l'outil renvoie des retours précis pour guider l'utilisateur:
- Saisie vide: Si vous tentez de lancer une optimisation sans code, l'interface affiche « Collez d’abord du code SVG. ».
- Format non conforme: Si le texte soumis ne contient pas de balise SVG valide, le message « Aucun élément <svg> trouvé. » apparaît.
- Éléments bloqués: Les fichiers SVG contenant des déclarations de type de document (DTD) ou des entités personnalisées sont systématiquement bloqués pour des raisons de sécurité. L'outil affiche alors: « Ce SVG utilise un type de document ou une entité personnalisée. Retirez-le avant d’optimiser. ».
- Échec générique: En cas d'anomalie imprévue lors de l'analyse, le message « Impossible d’optimiser ce SVG. » est renvoyé.
- Aucun gain d'espace: Si le SVG est déjà parfaitement optimisé selon les règles de l'outil, le message indique: « Optimisé. Le nettoyage prudent n’a pas réduit la taille. ».
- Optimisation réussie: Lorsque le fichier est réduit avec succès, l'outil affiche « Optimisé —
{pct}% plus petit ({saved}gagnés). » en indiquant les valeurs correspondantes.
Confidentialité et traitement local
Le respect de vos données est intégré au fonctionnement de l'outil. L'intégralité du processus d'optimisation de votre code SVG est effectuée localement, directement dans votre navigateur web. Aucune donnée, aucun fichier ni aucun fragment de code n'est téléversé vers BroBroGo.
FAQ
Que retire-t-il?
Il retire commentaires, métadonnées, espaces superflus dans les attributs, espaces de noms d’éditeurs, espaces de noms inutilisés et couleurs équivalentes plus courtes. viewBox, IDs, libellés et géométrie sont conservés.
Peut-il optimiser tous les SVG?
Il traite le code SVG inline courant. Les SVG avec type de document ou entité personnalisée sont bloqués, car ils peuvent rendre l’analyse risquée. Retirez ces déclarations, puis réessayez.
Le visuel peut-il changer?
L’optimiseur évite de réécrire les chemins, de renommer les IDs, de supprimer viewBox ou d’arrondir les décimales. Si votre flux de design dépend des commentaires ou des métadonnées, gardez une copie du SVG original.