Pour supprimer l’espace inattendu autour d’une instance SVG use, déterminez s’il provient du viewBox source, de l’ajustement du rapport hauteur/largeur ou de la boîte de ligne CSS environnante. Ce guide explique comment diagnostiquer et corriger chaque cause tout en conservant des coordonnées de placement prévisibles.

La tâche consiste en une petite modification de page web sur ordinateur : positionner précisément une forme réutilisable dans un SVG, puis ajuster comme prévu la mise en page HTML qui l’entoure. Vous pouvez suivre les exemples dans un éditeur de texte brut sur votre Mac et ouvrir le fichier HTML enregistré dans un navigateur récent pour ordinateur.

Quel système de coordonnées contrôle l’espace ?

Il y a trois limites à examiner : la boîte CSS de l’élément SVG externe, la fenêtre d’affichage utilisée pour un symbole référencé et la forme elle-même à l’intérieur de ce symbole. Le W3C distingue explicitement une fenêtre d’affichage SVG de la fenêtre d’affichage CSS du navigateur. Un viewBox associe les coordonnées utilisateur SVG à une fenêtre d’affichage SVG ; il ne décrit pas la fenêtre du navigateur. Systèmes de coordonnées, transformations et unités — SVG 2

Par exemple, x="20" sur un élément use fournit un décalage dans son système de coordonnées SVG. Cela ne signifie pas 20 pixels CSS depuis le bord gauche de la fenêtre du navigateur. La mise à l’échelle et les transformations des éléments ancêtres peuvent modifier l’emplacement de ce décalage sur la page. La spécification SVG décrit le positionnement use comme une translation supplémentaire, dont le comportement diffère de celui de la mise en page par boîtes CSS. Structure du document — SVG 2

Commencez par ce tableau de décision. Il s’agit d’une séquence de diagnostic fondée sur les mécanismes de mise en page documentés, et non d’une liste de corrections interchangeables.

Ce que vous observez Ce qu’il faut examiner en premier Correction probable
Une fine bande sous tout le SVG Le formatage en ligne et la hauteur de ligne du parent Faites de l’élément SVG autonome un bloc, ou ajustez son alignement en ligne
De l’espace vide à l’intérieur de chaque graphique répété Les coordonnées de la forme par rapport au viewBox du symbole Resserrez les limites source si l’incrustation n’est pas voulue
De l’espace supplémentaire sur deux côtés d’une instance de symbole Les dimensions de l’instance par rapport au rapport viewBox Faites correspondre les rapports ou choisissez une règle d’ajustement délibérée
Un placement local correct, mais une position erronée sur la page Les unités utilisateur SVG par rapport aux coordonnées de la fenêtre du navigateur Convertissez les coordonnées avant d’attribuer x et y
Modifier les dimensions de l’instance ne change rien L’élément ciblé par href Utilisez un symbole qui définit une fenêtre d’affichage pour l’ajustement, ou transformez la géométrie

Reproduire l’espace avec un exemple local complet

Enregistrez le document complet suivant sous le nom svg-spacing.html dans un éditeur de texte brut, puis ouvrez-le dans votre navigateur. Il utilise uniquement des libellés et des rectangles synthétiques, sans bibliothèque ni fichier externe. Les rectangles pâles indiquent les fenêtres d’affichage prévues des instances ; les rectangles plus foncés correspondent aux éléments graphiques réutilisés.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG spacing example</title>
  <style>
    body {
      margin: 24px;
      font: 16px system-ui, sans-serif;
    }
    #canvas {
      display: block;
      width: 320px;
      height: 200px;
      outline: 1px solid #687580;
      background: #fff;
    }
    .viewport-guide { fill: #e4edf2; }
    .artwork { fill: #356b8c; }
    text { fill: #253744; font-size: 14px; }
  </style>
</head>
<body>
  <p>Two instances with different source bounds and fitting dimensions.</p>
  <svg id="canvas" xmlns="http://www.w3.org/2000/svg"
       width="320" height="200" viewBox="0 0 320 200"
       role="img" aria-labelledby="drawing-title">
    <title id="drawing-title">Padded and tightly fitted rectangles</title>
    <defs>
      <symbol id="padded" viewBox="0 0 100 100">
        <rect id="source-shape" class="artwork"
              x="20" y="20" width="60" height="60" />
      </symbol>
      <symbol id="tight" viewBox="20 20 60 60">
        <rect class="artwork"
              x="20" y="20" width="60" height="60" />
      </symbol>
    </defs>

    <rect class="viewport-guide"
          x="20" y="20" width="120" height="60" />
    <use href="#padded" x="20" y="20" width="120" height="60" />
    <text x="160" y="55">Padded source</text>

    <rect class="viewport-guide"
          x="20" y="110" width="60" height="60" />
    <use id="tight-instance" href="#tight"
         x="20" y="110" width="60" height="60" />
    <text x="110" y="145">Tight source</text>
  </svg>
</body>
</html>

Les deux instances définissent explicitement leurs dimensions. Cela évite de dépendre d’un dimensionnement implicite pendant l’examen de l’espace. MDN indique que use réutilise le contenu SVG référencé et précise que ses attributs width et height influent sur l’ajustement lorsque la cible est un SVG ou un symbole doté d’un viewBox. L’exemple utilise l’attribut actuel href. MDN : use

Calculer où commence réellement le premier rectangle

La première source a un viewBox de 100 sur 100, mais son rectangle n’occupe que les coordonnées de 20 à 80 dans chaque direction. La fenêtre d’affichage demandée pour l’instance mesure 120 sur 60. Avec l’ajustement par défaut xMidYMid meet, l’échelle est la plus petite de 120 / 100 et 60 / 100 : 0.6. Le viewBox mis à l’échelle occupe 60 sur 60, laissant 30 unités de chaque côté à l’horizontale. Cela découle de l’algorithme de transformation de fenêtre d’affichage du W3C. SVG 2 : calcul de la transformation équivalente d’une fenêtre d’affichage SVG

Pour ces valeurs illustratives, le rectangle peint commence à 20 + 30 + 20 × 0.6 = 62 à l’horizontale et à 20 + 20 × 0.6 = 32 à la verticale. Ses dimensions sont 60 × 0.6 = 36 dans chaque direction. Le calcul a été vérifié à l’aide d’un petit calcul déterministe ; il s’agit de valeurs calculées, et non de mesures provenant d’un test dans un navigateur.

La deuxième instance modifie deux paramètres indépendants : les limites de sa source deviennent 20 20 60 60 et sa fenêtre d’affichage mesure 60 sur 60. Le rectangle remplit donc cette fenêtre et commence aux coordonnées SVG (20, 110). Pour isoler vous-même les causes, ne modifiez qu’un paramètre à la fois.

Comment supprimer l’espace à l’intérieur de l’instance ?

Corriger l’espace indésirable dans les limites source

Un viewBox contient quatre nombres : x minimal, y minimal, largeur et hauteur. Son origine n’a pas besoin d’être zéro. Dans l’exemple, viewBox="20 20 60 60" décrit les limites existantes du rectangle sans réécrire sa géométrie. MDN : viewBox

Avant de resserrer un vrai graphique, déterminez si son incrustation est intentionnelle. Un ensemble de formes réutilisables peut partager un repère commun afin que leurs tailles et positions visuelles restent cohérentes. Resserrez chaque symbole indépendamment risque de modifier ces relations. Conservez des limites communes si cette cohérence fait partie du design.

Pour examiner la géométrie, getBBox() renvoie les limites dans les coordonnées utilisateur SVG. Par défaut, il exclut les contours et les marqueurs, et ne tient pas compte des transformations appliquées à l’élément ciblé ou à ses parents. Par conséquent, une boîte englobante calculée uniquement à partir du remplissage ne suffit pas pour justifier le recadrage d’un graphique comportant des contours ou des transformations. MDN : getBBox() de SVGGraphicsElement

Choisir comment ajuster des rapports hauteur/largeur différents

Même un graphique dont les limites sont resserrées peut laisser de l’espace lorsqu’une source carrée est ajustée à une fenêtre d’affichage large. Choisissez la règle en fonction du résultat souhaité. Appliquez preserveAspectRatio au symbole référencé pour son ajustement interne, ou au SVG externe pour examiner le mappage des coordonnées externes. MDN : preserveAspectRatio

Choix Résultat et condition
Rapports source et fenêtre d’affichage identiques Évite l’espace dû à l’ajustement du rapport hauteur/largeur tout en conservant les proportions
xMidYMid meet Affiche tout le viewBox, centré ; des rapports différents laissent de l’espace
xMinYMin meet Déplace le viewBox ajusté vers le coin supérieur gauche ; l’espace restant est toujours présent
none Autorise une mise à l’échelle non uniforme ; un carré peut devenir un rectangle
xMidYMid slice Remplit la fenêtre d’affichage, mais une partie du contenu source la dépasse ; le découpage détermine ce qui reste visible

Modifier l’alignement déplace l’espace d’ajustement ; cela ne supprime pas une incrustation déjà encodée dans la géométrie source. De même, slice ne convient pas si tout le contenu source doit rester dans la fenêtre d’affichage. Ces distinctions découlent des définitions par MDN de l’alignement, de meet, de slice et de l’ajustement non uniforme. MDN : preserveAspectRatio

Vérifier la cible référencée lorsque les dimensions semblent sans effet

Un groupe ou un tracé ordinaire ne crée pas une fenêtre d’ajustement simplement parce qu’un élément use le référence. Le W3C indique que les valeurs width et height de l’instance n’ont aucun effet si l’élément référencé ne crée pas une nouvelle fenêtre d’affichage. Pour un ajustement prévisible par instance, placez la géométrie réutilisable dans un symbole aux limites explicites, comme ci-dessus. Pour une mise à l’échelle géométrique directe, utilisez une transformation et tenez compte de son effet sur le placement. SVG 2 : mise en page des graphiques réutilisés

Comment supprimer la bande sous le SVG externe ?

Un espace en dehors du SVG peut provenir du formatage en ligne du HTML. WHATWG autorise le SVG dans le contenu phrasé ; la page environnante peut donc le placer à côté du texte. Les boîtes de ligne CSS incluent les métriques de police au-dessus et au-dessous de la ligne de base, si bien qu’un graphique en ligne peut laisser un espace visible sous sa boîte. Norme HTML : SVG, CSS 2 : calculs de la hauteur de ligne

L’exemple complet définit déjà display: block sur #canvas, ce qui retire ce SVG du formatage en boîte de ligne en ligne. Pour un dessin autonome, conservez cette règle. Pour examiner le mécanisme, remplacez-la temporairement par display: inline et examinez la ligne environnante.

Si le SVG doit rester à côté du texte, essayez vertical-align: bottom sur le SVG externe et vérifiez l’alignement du texte obtenu. Cette propriété aligne une boîte de niveau en ligne dans sa ligne ; elle ne modifie ni les limites du symbole ni son ajustement interne. Les autres contenus et la hauteur de ligne du parent peuvent toujours déterminer la hauteur totale de la ligne. MDN : vertical-align

Considérez ces déclarations CSS comme des solutions de remplacement pour le SVG externe, et non comme des corrections cumulatives à appliquer à chaque instance :

/* Standalone drawing */
#canvas {
  display: block;
}

/* Alternative when the drawing must stay inline */
/*
#canvas {
  display: inline;
  vertical-align: bottom;
}
*/

Que faire si vos coordonnées proviennent de la fenêtre du navigateur ?

getBoundingClientRect() indique la position d’un élément par rapport à la fenêtre du navigateur, en pixels CSS. Sa position change lorsque la page défile. Ces valeurs appartiennent à un espace différent de celui des coordonnées utilisateur SVG ; copier directement ses valeurs left et top dans les attributs x et y d’une instance est donc généralement incorrect. MDN : getBoundingClientRect() de Element

Utilisez une transformation de coordonnées lorsque la valeur d’entrée est un point de la fenêtre du navigateur. getScreenCTM() fournit la matrice de transformation SVG, et l’application de son inverse reconvertit le point dans les coordonnées locales de l’élément choisi. La méthode matrixTransform() d’un point effectue cette conversion. MDN : getScreenCTM(), MDN : matrixTransform()

L’extrait de console suivant est une extension facultative du document complet ci-dessus. Il convertit le point de la fenêtre du navigateur (100, 150) en coordonnées utilisateur du SVG externe et y déplace l’instance aux limites resserrées. Il suppose que l’instance non transformée de l’exemple reste un enfant direct de ce SVG.

(() => {
  const canvas = document.getElementById("canvas");
  const instance = document.getElementById("tight-instance");
  if (!canvas || !instance) {
    throw new Error("Open the complete SVG spacing example first.");
  }

  const matrix = canvas.getScreenCTM();
  if (!matrix) {
    throw new Error("The SVG coordinate matrix is unavailable.");
  }

  const viewportPoint = new DOMPoint(100, 150);
  const localPoint = viewportPoint.matrixTransform(matrix.inverse());
  if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) {
    throw new Error("The SVG coordinate matrix cannot be inverted.");
  }

  instance.setAttribute("x", String(localPoint.x));
  instance.setAttribute("y", String(localPoint.y));
})();

La vérification des nombres finis est importante, car une matrice non inversible produit des composantes NaN. Recalculez la matrice lorsque vous convertissez un nouveau point après un changement de mise en page ou de défilement. Si votre instance se trouve dans un groupe transformé, effectuez la conversion dans le système de coordonnées local de ce groupe parent. Cet extrait a été vérifié par rapport à la documentation de l’API ; il n’a pas été exécuté dans un navigateur pendant les recherches. MDN : inverse() de DOMMatrixReadOnly

Pour terminer, vérifiez séparément les trois limites : la boîte du SVG externe, la fenêtre d’affichage ajustée du symbole et les limites propres au graphique. Corrigez la limite qui introduit l’espace indésirable, puis confirmez le résultat à la taille de page prévue. Vous obtiendrez ainsi un placement prévisible, sans devoir compenser un espace inexpliqué par des décalages arbitraires.

Sources