Alinhamento vertical SVG: centralize um rótulo

Para um rótulo SVG horizontal, y posiciona a linha de base selecionada. Ele não coloca o topo das letras nessa coordenada. Comece com dominant-baseline="middle" ao posicionar um rótulo latino curto ao redor de uma guia horizontal e inspecione o resultado na fonte real. Use text-anchor="middle" para centralizar o texto horizontalmente em torno da coordenada x.

Um rótulo ainda pode parecer alto ou baixo ao lado de um emblema. middle e central usam linhas de base diferentes da fonte, enquanto a centralização visual depende das formas da palavra. Decida se o layout precisa de uma linha de base compartilhada, uma caixa de texto centralizada ou um ajuste óptico antes de adicionar um deslocamento.

Escolha o alvo do alinhamento

O mesmo y="100" pode produzir posições diferentes das letras:

As definições de linhas de base do W3C distinguem middle de central. Nenhuma definição promete centralizar os contornos pintados de toda palavra. As tabelas de linha de base da fonte e as heurísticas do renderizador também importam, como explica a referência de dominant-baseline do MDN.

Para texto horizontal comum, text-anchor="middle" trata do outro eixo. Ele alinha o trecho de texto ao redor da posição horizontal fornecida; não oferece centralização vertical. Veja a referência de text-anchor para sua relação com trechos de texto.

Compare um emblema e um rótulo de texto editável

Salve este exemplo completo como baseline-example.svg e abra-o em um navegador. O anel é geometria original; Agyp é uma string de teste com uma ascendente e descendentes. A linha vermelha marca y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Mude apenas dominant-baseline para alphabetic e depois central. Mantenha as coordenadas, o tamanho da fonte e o texto fixos. Em seguida, compare uma segunda fonte disponível. Mudar várias configurações juntas dificulta identificar qual moveu o rótulo.

Renderizamos os três valores com cópias carregadas de Arial e Times New Roman. Cada painel usa as mesmas coordenadas SVG e o anel original. Os retângulos verdes mostram o resultado de getBBox() do navegador para o texto editável.

Os exemplos alphabetic ficam mais altos em relação à linha central do anel. Os exemplos middle descem, enquanto central posiciona as caixas informadas perto da guia. As medições impressas abaixo de cada amostra pertencem a esses arquivos de fonte e a essa renderização de navegador. Não são deslocamentos para copiar em outro design.

Nossos arquivos de fonte carregaram antes da medição. Seu SVG exportado pode escolher uma fonte substituta quando a solicitada estiver indisponível; resolva essa dependência antes de julgar o alinhamento. O guia de mudanças de fonte SVG aborda como conferir a face real e preservar uma cópia de entrega.

Uma caixa de texto centralizada ainda pode parecer desequilibrada

Os limites de texto SVG não são necessariamente o menor retângulo ao redor da tinta visível. As regras de caixas delimitadoras SVG usam células de glifos e ascendente/descendente da fonte nos cálculos de texto. Um retângulo ao redor dessas células pode incluir espaço que nenhuma letra pinta.

Essa distinção importa em rótulos como Agyp: g, y e p descem abaixo da linha de base alfabética. Um rótulo todo em maiúsculas tem outra distribuição visual. A fonte pretendida e o texto real devem estar presentes durante o ajuste de alinhamento.

Para uma fileira de rótulos que devem ser lidos na mesma linha, preserve uma linha de base alfabética compartilhada. Deslocar individualmente cada palavra até sua forma visível parecer centralizada pode deixar a fileira irregular.

Para uma composição única de emblema e texto, compare o rótulo no tamanho final e ajuste-o visualmente após escolher uma linha de base. Se o layout exigir especificamente alinhamento pelos contornos das letras, use uma duplicata convertida em contornos no editor para inspecionar essa geometria, mantendo texto editável no original. Trate os limites dos contornos e um ajuste óptico como decisões separadas.

Centralize a caixa de texto SVG medida quando esse for o objetivo

Para um elemento <text> simples, sem transformação e de uma linha, calcule o deslocamento do centro da caixa informada até o alvo. Execute isto no documento que contém o exemplo, depois que sua fonte estiver pronta:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

O cálculo alinha a caixa de texto informada com targetY. Ele não calcula equilíbrio visual nem remove o espaço não usado das células de glifos da fonte. Meça novamente após mudar o texto, a fonte, o peso ou o tamanho.

document.fonts.ready aguarda o carregamento de fontes e o trabalho de layout associado. Ele não prova que a fonte pretendida foi fornecida com sucesso; confira também o recurso de fonte ou as informações de fonte renderizada do navegador.

Este trecho presume um valor y, nenhuma posição por caractere, nenhum deslocamento dy e nenhum grupo de texto transformado. getBBox() retorna uma caixa SVG local. Um alvo em outro sistema de coordenadas exige um mapeamento; use o fluxo de limites SVG antes de misturar pixels de tela com unidades SVG.

Resolva configurações conflitantes antes de adicionar mais deslocamentos

Inspecione o texto e seus grupos pais. Um dy restante, um <tspan> aninhado ou uma transformação pode alterar o posicionamento que você tenta diagnosticar. Remova um ajuste suspeito por vez em uma cópia e compare o resultado.

Confira também os estilos da página. O CSS pode substituir o atributo de apresentação dominant-baseline. Se mudar o atributo não tiver efeito visível, inspecione o valor calculado antes de adicionar uma segunda correção.

alignment-baseline trata de como a linha de base de um elemento se alinha à linha de base correspondente de seu pai. Não é um sinônimo geral de “centralize este rótulo no SVG”. A referência de alignment-baseline do MDN também identifica limites de suporte nos navegadores. Para este rótulo independente, mantenha o teste focado em dominant-baseline e verifique depois o destino real de exportação.

Este exemplo cobre texto latino horizontal em um navegador. Rótulos curvos precisam de outra verificação de posicionamento; o passo a passo de texto SVG em traçado separa as letras de sua curva guia. Outros sistemas de escrita e escrita vertical precisam de decisões próprias de linha de base.

Mantenha a marca separada das letras

Se você já tem um emblema vetorial limpo, mantenha-o e reconstrua o rótulo como texto editável. Mover o rótulo ou escolher uma fonte não exige vetorização.

Quando o emblema existe apenas em PNG ou JPG, o vetorizador de logos do PerfectVector pode preparar geometria candidata para essa parte do design. Confira seu contorno e suas aberturas e coloque-o ao lado de texto recém-digitado usando a linha de base escolhida. A vetorização não identifica a fonte original nem restaura tipografia editável de uma imagem raster.

Para letras exatas de marca, use a fonte e os recursos vetoriais originais quando disponíveis, ou reconstrua as letras deliberadamente. O guia de vetorização de logos ajuda a escolher entre preservar, traçar e redesenhar a origem.

Antes da entrega, confira o texto e a fonte reais, inspecione a composição no tamanho final e reabra o SVG exportado no destino. Guarde o original editável se a cópia de entrega usar texto convertido em contornos.

Perguntas frequentes

dominant-baseline="middle" é o mesmo que central? Não. Middle usa uma linha de base relacionada à altura-x, enquanto central usa a linha de base central da fonte associada à caixa em. Suas posições podem diferir, e nenhum garante centralização óptica de todas as palavras.

text-anchor="middle" centraliza texto SVG verticalmente? Para texto horizontal comum, text-anchor controla o posicionamento horizontal ao redor da coordenada x. Escolha a linha de base vertical separadamente com dominant-baseline e inspecione o resultado na fonte pretendida.

getBBox pode centralizar exatamente as letras visíveis? Ele pode centralizar a caixa de texto SVG informada pelo navegador. Os limites de texto podem incluir espaço das células de glifos além das letras pintadas, portanto esse cálculo não garante centralização óptica nem alinhamento justo dos contornos.

Fontes

1. W3C — Alinhamento de linhas de base SVG — Define as linhas de base alphabetic, middle e central.
2. MDN — dominant-baseline — Explica tabelas de linha de base, heurísticas de fontes e precedência CSS.
3. MDN — text-anchor — Documenta a ancoragem de trechos de texto ao redor de uma posição fornecida.
4. W3C — Caixas delimitadoras SVG — Descreve o modelo de células de glifos usado nos limites de texto.
5. MDN — FontFaceSet.ready — Define quando o carregamento de fontes e o layout terminaram.
6. MDN — getBBox — Documenta limites SVG locais e exclusões de transformações.
7. MDN — alignment-baseline — Explica alinhamento com a linha de base do pai e limites de suporte dos navegadores.

Se seu logo reconstruído ainda precisa de um emblema editável, prepare um candidato SVG com o PerfectVector, inspecione o contorno recuperado, combine-o com letras editáveis e confira o alinhamento no destino final.