Para remover o espaço inesperado ao redor de uma instância SVG use, identifique se ele vem do viewBox de origem, do ajuste da proporção ou da caixa de linha CSS ao redor. Este guia mostra como diagnosticar e corrigir cada causa, mantendo previsíveis as coordenadas de posicionamento.

A tarefa é uma pequena edição de página da Web para computador: posicionar uma forma reutilizável com precisão dentro de um SVG e, em seguida, ajustar o layout HTML ao redor conforme desejado. Você pode acompanhar os exemplos em um editor de texto simples no seu Mac e abrir o arquivo HTML salvo em um navegador atual para computador.

Qual sistema de coordenadas controla o espaço?

Há três limites a inspecionar: a caixa CSS do elemento SVG externo, a área de visualização usada por um símbolo referenciado e a forma em si dentro desse símbolo. O W3C distingue explicitamente uma área de visualização SVG da área de visualização CSS do navegador. Um viewBox mapeia coordenadas de usuário SVG para uma área de visualização SVG; ele não descreve a janela do navegador. Sistemas de coordenadas, transformações e unidades — SVG 2

Por exemplo, x="20" em um elemento use fornece um deslocamento no sistema de coordenadas SVG. Isso não significa 20 pixels CSS a partir da borda esquerda da janela do navegador. A escala e as transformações dos elementos ancestrais podem alterar onde esse deslocamento aparece na página. A especificação SVG descreve o posicionamento use como uma translação adicional, cujo comportamento é distinto do layout de caixas CSS. Estrutura do documento — SVG 2

Comece por esta tabela de decisão. Ela apresenta uma sequência de diagnóstico baseada nos mecanismos de layout documentados, e não uma lista de correções intercambiáveis.

O que você observa O que inspecionar primeiro Correção provável
Uma faixa estreita abaixo de todo o SVG Formatação em linha e altura de linha do elemento pai Faça um SVG independente ser exibido como bloco ou ajuste seu alinhamento em linha
Espaço vazio dentro de cada gráfico repetido Coordenadas da forma em relação ao viewBox do símbolo Ajuste os limites de origem se o recuo não for intencional
Espaço extra em dois lados de uma instância do símbolo Dimensões da instância em relação à proporção de viewBox Faça as proporções corresponderem ou escolha uma política de ajuste deliberada
Posicionamento local correto, mas posição errada na página Unidades de usuário SVG em relação às coordenadas da área de visualização do navegador Converta as coordenadas antes de atribuir x e y
Alterar as dimensões da instância não produz efeito O elemento alvo de href Use um símbolo que defina uma área de visualização para o ajuste ou transforme a geometria

Reproduza o espaço com um exemplo local completo

Salve o documento completo a seguir como svg-spacing.html em um editor de texto simples e abra-o no navegador. Ele usa apenas rótulos e retângulos sintéticos, sem bibliotecas nem arquivos externos. Os retângulos claros marcam as áreas de visualização pretendidas para as instâncias; os retângulos escuros são os elementos gráficos reutilizados.

<!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>

As duas instâncias definem explicitamente suas dimensões. Isso evita depender de dimensionamento implícito durante a investigação do espaço. A documentação MDN descreve use como a reutilização de conteúdo SVG referenciado e observa que width e height afetam o ajuste quando o alvo é um SVG ou símbolo com viewBox. O exemplo usa o atributo atual href. MDN: use

Calcule onde o primeiro retângulo realmente começa

A primeira origem tem um viewBox de 100 por 100, mas seu retângulo ocupa apenas as coordenadas de 20 a 80 em cada direção. A área de visualização solicitada para a instância é de 120 por 60. Com o ajuste padrão xMidYMid meet, a escala é o menor valor entre 120 / 100 e 60 / 100: 0.6. O viewBox em escala ocupa 60 por 60, deixando 30 unidades de cada lado na horizontal. Isso segue o algoritmo de transformação de área de visualização do W3C. SVG 2: Cálculo da transformação equivalente de uma área de visualização SVG

Para esses valores ilustrativos, o retângulo pintado começa em 20 + 30 + 20 × 0.6 = 62 na horizontal e 20 + 20 × 0.6 = 32 na vertical. Seu tamanho é 60 × 0.6 = 36 em cada direção. Os cálculos foram conferidos com uma pequena operação determinística; são valores calculados, não medidas obtidas em um teste de navegador.

A segunda instância altera duas entradas independentes: os limites da origem passam a ser 20 20 60 60 e a área de visualização da instância passa a ser 60 por 60. Portanto, o retângulo preenche essa área de visualização e começa na coordenada SVG (20, 110). Para isolar as causas por conta própria, altere apenas uma entrada de cada vez.

Como remover o espaço dentro da instância?

Corrija o espaço não intencional nos limites da origem

Um viewBox contém quatro números: x mínimo, y mínimo, largura e altura. Sua origem não precisa ser zero. No exemplo, viewBox="20 20 60 60" descreve os limites existentes do retângulo sem reescrever sua geometria. MDN: viewBox

Antes de ajustar os limites de um gráfico real, decida se o recuo é intencional. Um conjunto de formas reutilizáveis pode compartilhar um referencial comum para que seus tamanhos e posições visuais permaneçam consistentes. Ajustar os limites de cada símbolo de forma independente pode alterar essas relações. Mantenha limites compartilhados quando essa consistência fizer parte do projeto.

Para inspecionar a geometria, getBBox() informa os limites nas coordenadas de usuário SVG. Por padrão, ele exclui traços e marcadores, e não leva em conta as transformações aplicadas ao elemento alvo ou aos seus elementos ancestrais. Portanto, uma caixa delimitadora que considera apenas o preenchimento não é suficiente para confirmar o recorte de elementos gráficos com traços ou transformações. MDN: getBBox() de SVGGraphicsElement

Escolha como ajustar proporções diferentes

Mesmo elementos gráficos com limites precisos podem ficar cercados por espaço quando uma origem quadrada é ajustada a uma área de visualização larga. Escolha a política de acordo com o resultado desejado. Aplique preserveAspectRatio ao símbolo referenciado para controlar seu ajuste interno, ou ao SVG externo ao diagnosticar o mapeamento de coordenadas externo. MDN: preserveAspectRatio

Opção Resultado e condição
Proporções iguais para a origem e a área de visualização Evita espaço causado pelo ajuste da proporção e mantém as proporções
xMidYMid meet Exibe o viewBox inteiro, centralizado; proporções diferentes deixam espaço
xMinYMin meet Desloca o viewBox ajustado para o canto superior esquerdo; ainda resta espaço
none Permite escala não uniforme; um quadrado pode virar um retângulo
xMidYMid slice Preenche a área de visualização, mas parte do conteúdo de origem ultrapassa seus limites; o recorte determina o que fica visível

Alterar o alinhamento desloca o espaço de ajuste; não remove um recuo já codificado na geometria de origem. Da mesma forma, slice não é adequado quando todo o conteúdo de origem precisa permanecer dentro da área de visualização. Essas distinções seguem as definições de alinhamento, meet, slice e ajuste não uniforme da MDN. MDN: preserveAspectRatio

Verifique o alvo referenciado quando as dimensões parecerem não ter efeito

Um grupo simples ou um caminho não passa a ter uma área de visualização para ajuste apenas por ser referenciado por um elemento use. O W3C afirma que width e height da instância não têm efeito quando o elemento referenciado não estabelece uma nova área de visualização. Para obter um ajuste previsível por instância, coloque a geometria reutilizável em um símbolo com limites explícitos, como acima. Para escalar a geometria diretamente, use uma transformação e leve em conta seu efeito sobre o posicionamento. SVG 2: Layout de gráficos reutilizados

Como remover a faixa abaixo do SVG externo?

Um espaço fora do SVG pode ser causado pela formatação em linha do HTML. O WHATWG permite SVG em conteúdo de frase; portanto, a página ao redor pode posicioná-lo ao lado do texto. As caixas de linha CSS incluem métricas de fonte acima e abaixo da linha de base, por isso um gráfico em linha pode deixar um espaço visível abaixo de sua caixa. Padrão HTML: SVG, CSS 2: Cálculos da altura de linha

O exemplo completo já define display: block em #canvas, removendo esse SVG da participação na caixa de linha em linha. Mantenha essa regra para um desenho independente. Para investigar o mecanismo, altere-a temporariamente para display: inline e inspecione a linha ao redor.

Para um SVG que precisa permanecer ao lado do texto, experimente vertical-align: bottom no SVG externo e confira o alinhamento do texto resultante. Essa propriedade alinha uma caixa de nível em linha dentro de sua linha; ela não altera os limites do símbolo nem o ajuste interno. Outro conteúdo e a altura de linha do elemento pai ainda podem determinar a altura total da linha. MDN: vertical-align

Considere estas declarações CSS como alternativas para o SVG externo, e não como correções cumulativas a serem aplicadas a cada instância:

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

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

E se suas coordenadas vierem da área de visualização do navegador?

getBoundingClientRect() informa a posição de um elemento em relação à área de visualização do navegador, em pixels CSS. Sua posição muda quando a página é rolada. Esses valores pertencem a um espaço diferente das coordenadas de usuário SVG, portanto, copiá-los diretamente de left e top para x e y de uma instância geralmente está incorreto. MDN: getBoundingClientRect() de Element

Use uma transformação de coordenadas quando a entrada for um ponto da área de visualização do navegador. getScreenCTM() fornece a matriz de transformação SVG, e aplicar sua inversa converte o ponto de volta para as coordenadas locais do elemento escolhido. O método matrixTransform() de um ponto realiza a conversão. MDN: getScreenCTM(), MDN: matrixTransform()

O trecho de console a seguir é uma extensão opcional do documento completo acima. Ele converte o ponto da área de visualização do navegador (100, 150) para as coordenadas de usuário do SVG externo e move a instância com limites precisos até esse ponto. Ele pressupõe que a instância, sem transformações, continue sendo filha direta desse 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));
})();

A verificação de números finitos é importante porque uma matriz não invertível produz componentes NaN. Recalcule a matriz ao converter um novo ponto depois de alterações no layout ou na rolagem. Se a instância estiver dentro de um grupo transformado, converta para o sistema de coordenadas desse grupo pai. Este trecho foi conferido com a documentação da API; não foi executado em um navegador durante a pesquisa. MDN: inverse() de DOMMatrixReadOnly

Conclua verificando separadamente os três limites: a caixa do SVG externo, a área de visualização ajustada do símbolo e os limites da própria arte. Corrija o limite que introduz o espaço indesejado e confirme o resultado no tamanho de página pretendido. Assim, você terá um posicionamento previsível sem precisar compensar um espaço inexplicado com deslocamentos arbitrários.

Fontes