Remova o espaço abaixo do SVG inline com layout CSS

Uma pequena faixa abaixo de um SVG pode vir da linha HTML que o contém. Um gráfico inline participa do layout de texto, no qual a linha de base e a altura de linha podem deixar espaço abaixo da caixa. Para uma imagem isolada, teste display: block. Para um gráfico que precisa ficar ao lado de texto, escolha deliberadamente seu alinhamento inline.

Primeiro localize o espaço. Uma área fora da caixa do elemento SVG exige verificar o layout da página. Uma área dentro dessa caixa pode pertencer à tela do SVG ou às regras de ajuste. Vetorizar o logo novamente não corrige o primeiro problema. Este guia ajuda a distinguir os dois e verificar uma correção pequena e local de CSS.

Descubra qual caixa contém o espaço

Nas ferramentas de desenvolvedor, dê fundos contrastantes ao SVG e ao contêiner imediato. Inspecione também os contornos dos elementos. O fundo é uma ajuda temporária de diagnóstico; não precisa fazer parte da arte entregue.

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

Se a cor pêssego continua abaixo da caixa verde do SVG, inspecione layout de linha, padding, borda, altura e vizinhos do contêiner. Se o verde continua abaixo do desenho visível, inspecione o viewBox, os limites pintados e o ajuste da arte ao viewport.

Os dois podem acontecer juntos. Corrigir a linha pode remover uma faixa fina e deixar uma margem transparente maior dentro da imagem. O guia de ajuste SVG explica como retângulo de origem e viewport de destino interagem. Não aperte o viewBox sem saber se o espaço indesejado está dentro dele.

O método de incorporação também importa. Um <svg> inline pertence ao documento HTML; um <img src="logo.svg"> carrega uma imagem externa. Seus limites de estilo diferem, como explica o guia de SVG inline versus imagem. Inspecione o elemento realmente colocado na linha HTML em vez de presumir que todo SVG é incorporado da mesma forma.

Por que a linha de base pode deixar espaço abaixo

Linhas de texto precisam de espaço para letras que descem abaixo da linha de base, como g e p. Um gráfico inline pode se alinhar à linha de base enquanto a linha que o contém ainda se estende abaixo. Por isso, zerar a margem da imagem pode não mudar nada.

As regras CSS de cálculo de altura de linha determinam a caixa de linha pelas caixas participantes e seu alinhamento. Fonte e altura de linha do pai contribuem mesmo quando o conteúdo visível é um gráfico. A faixa exata resulta, portanto, dos estilos ao redor, não de uma margem fixa do SVG.

Não confunda essa linha de base com a de letras desenhadas dentro do SVG. Alterar dominant-baseline em um texto SVG trata dessa escrita interna. Não escolhe como o gráfico inteiro se posiciona na linha HTML.

Um exemplo medido sem tela SVG vazia

Criamos uma página HTML original com três cópias do mesmo SVG. Cada SVG tem viewBox de 240 × 100 preenchido de ponta a ponta por um retângulo e é renderizado em 240 × 100 pixels CSS. As linhas usam Arial a 40px com altura de linha de 48px. Só muda a exibição ou o alinhamento do SVG.

O navegador retornou estas medidas:

São medidas desta página em um navegador, não promessa de um espaço de 10,5px em todo layout. Comparamos a coordenada inferior do contêiner com a do SVG. A altura do SVG continuou em 100px nos três casos; a correção não reduziu nem recortou o desenho.

Use exibição em bloco para um gráfico isolado

Quando o logo deve ocupar sua própria linha, aplique a regra de layout àquela imagem específica:

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

A referência display da MDN diferencia a participação em bloco e inline no layout de fluxo. Transformar o SVG em bloco remove sua função de item inline na linha de texto ao redor. Não edita caminhos nem remove margens transparentes da arte.

Confira o contêiner após aplicar a regra. Se ele ainda se estende abaixo da imagem, procure altura explícita, padding, outro filho, pseudo-elemento ou linha adicional. Uma quebra de linha ou nó de texto após um gráfico em bloco pode introduzir conteúdo próprio. Um ancestral também pode causar o espaço visível.

Mantenha o seletor restrito. Aplicar svg { display: block; } ao site inteiro pode mover ícones que pertencem a rótulos ou frases. Escolha o componente que precisa de um gráfico isolado e inspecione seus outros usos.

Mantenha gráficos de linhas de texto inline e escolha o alinhamento

Para um ícone ou pequena marca junto de palavras, manter inline pode ser o layout pretendido. vertical-align: bottom alinha a borda inferior da caixa de margem à parte inferior da linha. vertical-align: middle usa a linha de base e a altura-x do pai; não é um comando para centralizar geometricamente toda imagem em todo contêiner. Veja as definições de vertical-align da MDN.

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

Escolha entre esses valores inspecionando o rótulo e a fonte reais. Um ícone que toca a parte inferior da linha pode parecer baixo demais junto de maiúsculas. Uma marca alinhada com middle ainda pode precisar de ajuste óptico por ter a arte visível distribuída de forma irregular dentro da caixa.

O caso alinhado por baixo em nosso exemplo continha só o gráfico. Ele comprova que o alinhamento removeu a faixa naquela linha específica. Não estabelece que toda linha mista de texto e ícone terá a mesma altura ou aparência.

Evite line-height: 0 em um contêiner de texto compartilhado como primeira correção. Isso altera texto e espaçamento da imagem. Pode esconder o sintoma imediato e deixar o componente dependente de ajustes posteriores quando alguém adicionar um rótulo. Escolha a exibição ou alinhamento pretendido antes de mudar a tipografia do pai.

Verifique a correção sem alterar a arte

Faça uma alteração por vez e confira:

1. Limite do elemento: o espaço visível está agora dentro ou fora da caixa SVG?
2. Dimensões: o SVG manteve largura, altura e proporções pretendidas?
3. Vizinhos: rótulos, links e ícones continuam onde devem?
4. Layout responsivo: o componente funciona em tamanhos estreitos e largos?
5. Estilos calculados: a declaração pretendida vence ou uma regra mais específica a substitui?

Em um contêiner simples sem bordas ou padding, comparar sua coordenada inferior com a da imagem é útil. Em um componente real, considere padding intencional e outros conteúdos antes de chamar a diferença de erro.

Se a página precisa de outra disposição em telas menores, confira-a também. Uma correção adequada para um logo isolado pode não servir a uma linha de navegação com texto que quebra. Remova os fundos temporários quando o limite estiver claro.

Quando a vetorização ajuda neste fluxo

Um SVG existente e editável geralmente precisa aqui de uma correção de CSS ou de tela. Mantenha o arquivo e diagnostique seu posicionamento antes de reconstruí-lo.

Se a marca só existe como PNG ou JPG e precisa de contornos editáveis, use o PerfectVector para converter a imagem em arte vetorial, inspecione contorno, aberturas e tela de origem e depois posicione o resultado. A ficha de avaliação de qualidade da vetorização ajuda nessa verificação separada de geometria. A vetorização prepara formas; o CSS da página ainda controla a caixa de linha HTML.

FAQ

Por que margin: 0 não remove o espaço abaixo do SVG? O espaço pode pertencer à linha de texto que o contém, não às margens do SVG. Inspecione limites do SVG e do contêiner e teste bloco para imagem isolada ou alinhamento vertical adequado para gráfico inline.

display: block recorta espaço vazio do SVG? Não. Ele muda a participação do elemento no layout HTML. O espaço vazio dentro do viewBox permanece e exige verificação separada de arte ou ajuste.

Devo usar vertical-align: bottom ou middle? Use o valor adequado à linha real. Bottom alinha com sua parte inferior; middle usa a linha de base e altura-x do pai. Inspecione com a fonte final e o texto vizinho, sem tratar nenhum valor como centralização universal.

Fontes

1. W3C — Altura de linha e alinhamento vertical CSS — Como caixas participantes, alinhamento e tipografia do pai contribuem para a altura.
2. MDN — display — Diferença entre participação em bloco e inline no layout de fluxo.
3. MDN — vertical-align — Alinhamentos baseline, bottom e middle e as caixas às quais a propriedade se aplica.

Começando com uma marca disponível apenas em raster? Prepare formas SVG editáveis, compare seus contornos e tela com a origem e confira o posicionamento no componente real da página.