SVG coupé ou entouré de vide : corriger le viewBox plutôt que le logo
Diagnostiquez les bords SVG coupés et les marges excessives. Vérifiez coordonnées, épaisseur de contour et masques avant de retracer un dessin déjà correct.
Réponse rapide
Un SVG coupé ou minuscule a souvent un problème de canevas. Vérifiez viewBox, transformations, masques et épaisseur des contours. Ajustez la page au dessin voulu dans un éditeur vectoriel, en gardant l’espace nécessaire. Rouvrez l’export avant de supprimer ou retracer des formes pourtant correctes.
Comprendre le viewBox
Ses quatre valeurs indiquent x minimum, y minimum, largeur et hauteur dans les coordonnées du dessin. Elles ne correspondent pas nécessairement aux dimensions CSS affichées. Modifier uniquement la largeur extérieure peut agrandir la fenêtre sans corriger les mauvaises limites internes.
| Symptôme | Cause possible | Vérification |
|---|---|---|
| Oreille ou lettre coupée | Dessin hors des limites | viewBox et position |
| Petit logo dans un grand cadre | Page trop grande | Page ajustée au dessin |
| Contour épais tronqué | Épaisseur non comprise | Marge des traits et effets |
| Éditeur correct, export incorrect | Masque ou découpage | Structure exportée |
Corriger sans déformer
- Dupliquez l’original et ouvrez-le dans un éditeur vectoriel.
- Sélectionnez le dessin. Cherchez les objets isolés très éloignés qui agrandissent artificiellement sa sélection.
- Ajustez la page aux formes utiles, en gardant les marges choisies et l’épaisseur des contours.
- Examinez les masques et chemins de découpage. Un viewBox plus grand ne les annule pas automatiquement.
- Exportez le SVG, puis ouvrez ce fichier dans un navigateur à différentes largeurs.
Ne pas utiliser des valeurs universelles
Pour un dessin réellement limité à x=20 jusqu’à 220 et y=30 jusqu’à 130, 20 30 200 100 décrit le rectangle utile. Ajoutez de l’espace si un trait ou un effet dépasse. Ne recopiez pas ces nombres dans un fichier différent : chaque dessin possède ses propres coordonnées et transformations.
Le contrôleur SVG aide à examiner la structure. Après réparation visuelle, l’optimiseur SVG réduit le balisage inutile, mais ne corrige pas automatiquement la page. Conservez le viewBox et comparez le rendu exporté.
Vérifications finales
- Aucune forme importante ne touche un bord coupé involontairement.
- Les marges transparentes sont intentionnelles.
- Les extrémités de traits et les courbes restent visibles.
- Les proportions sont correctes sur mobile.
- Le fichier exporté a été vérifié hors de l’éditeur.
Questions fréquentes
width et height suppriment-ils les marges ?
Pas forcément. Ces attributs fixent la taille affichée ; les coordonnées internes peuvent toujours englober un grand espace vide.
Faut-il vectoriser à nouveau ?
Non si les chemins sont bons. Réparez d’abord les limites du document. Retracer modifie inutilement la géométrie et peut conserver les mêmes marges indésirables.