Commencer par la structure du document
SVG est un langage de dessin vectoriel fondé sur XML. Un élément svg peut contenir des formes, chemins, textes, groupes et attributs qui modifient l’image. L’exemple ci-dessous possède un viewBox de 40 par 40 et un cercle centré en 20,20 de rayon 12. Le viewBox définit des coordonnées ; il n’impose pas une largeur de 40 pixels CSS sur la page. Comme en XML, l’imbrication des éléments et les guillemets autour des attributs comptent. Un formateur XML général aide à lire la structure, tandis que le formateur SVG vérifie spécifiquement que la racine est svg. Préférez ce dernier lorsque l’entrée doit être une image SVG.
Formater pour lire, minifier une copie
Le formateur ajoute des retraits et des fins de ligne afin de distinguer le cercle, sa couleur de remplissage et le viewBox. C’est une aide à l’édition ou à la revue. Le minificateur SVG cherche une sérialisation plus compacte pour un fichier publié ; il ne compresse pas l’image en optimisant les chemins ni en choisissant un autre dessin. Gardez la source et comparez les deux sorties dans un moteur de rendu. Une chaîne plus courte ne garantit pas le même comportement pour toute fonction SVG inhabituelle, surtout si l’analyseur a une couverture limitée. En cas d’erreur, examinez l’entrée au lieu de faire deviner un XML manquant.
- XML SVG avec viewBox et cercle
- formater pour examiner
- minifier une copie → comparer le rendu
Contrôler aussi le sens invisible
Un schéma peut contenir des textes, étiquettes ou titres utiles au lecteur et aux outils d’assistance. Ne les supprimez pas simplement pour gagner quelques octets. SVG peut aussi porter styles, liens, animations et scripts : le formatage n’assainit donc pas un fichier non fiable. Si un document provient d’un tiers, soumettez-le à un contrôle de sécurité et à un assainissement adaptés avant de l’intégrer à une page. Le cercle d’exemple reste volontairement simple pour montrer la structure sans promettre que ce petit outil gère toute la norme. Après modification, contrôlez le dessin affiché, les dimensions et les alternatives textuelles.
Vérifier les coordonnées et l’intégration
Lorsqu’un SVG paraît trop petit, coupé ou vide, inspectez d’abord le viewBox. Ses quatre nombres délimitent le rectangle visible ; une forme située ailleurs peut disparaître bien que le XML soit correct. Vérifiez ensuite la largeur et la hauteur à l’endroit où l’image est intégrée, car le CSS peut régler sa taille. Remplissage et contour influencent également la visibilité. Le formatage ne doit pas changer les coordonnées voulues, et la version minifiée mérite une comparaison avec les mêmes styles de page. Ouvrez le fichier seul puis dans son contexte final si le graphique est important.
Suivre une chaîne de vérification
Collez un petit SVG représentatif dans le formateur intégré et vérifiez que la structure produite soit lisible. Si le fichier est du XML sans être un SVG, choisissez plutôt l’outil XML. Une fois le contenu relu, soumettez-en une copie au minificateur SVG, conservez les deux versions et comparez-les dans un navigateur à plusieurs tailles. Vérifiez les alternatives et les interactions si elles existent. Remplacez seulement ensuite l’élément publié. Le traitement se fait dans votre navigateur, mais une démonstration préremplie expose son entrée dans le fragment de l’URL intégrée ; évitez les contenus privés. La mise en forme aide à réviser, sans remplacer les tests de rendu.