SVG textLength: ajuste rótulos sem distorcer letras

Use textLength com lengthAdjust="spacing" quando um rótulo SVG precisar de um comprimento específico e uma pequena correção de espaçamento for aceitável. As formas dos glifos permanecem iguais. Se você escolher spacingAndGlyphs, o renderizador poderá esticar ou comprimir as próprias letras ao longo da linha de texto. Esses são os dois modos definidos pela especificação de texto SVG.

O detalhe está no alvo: textLength é um comprimento solicitado, não uma largura máxima. Ele pode expandir um rótulo curto tão facilmente quanto comprimir um longo. Também não cria linhas com quebra automática.

O que cada ajuste muda

spacing é o padrão quando você define textLength sem um valor lengthAdjust. A referência de textLength do MDN explica como o comprimento solicitado e o modo de ajuste trabalham juntos.

Para marcas comuns, use uma pequena correção e inspecione-a. Um rótulo que precisa de grande redução geralmente merece uma fonte menor, texto mais curto ou um espaço maior no layout.

Um rótulo curto e um longo com o mesmo alvo

Desenhamos um emblema original de losango e testamos dois rótulos de texto editável em Abel Regular, com tamanho de fonte de 64 unidades SVG. Após carregar a fonte pretendida, o navegador mediu PINE em cerca de 115.6 unidades e PINE & FIELD em 325.3 unidades. As duas linhas ajustadas solicitam 240 unidades.

Mesmo alvo, tipografia diferente

No rótulo curto, spacing cria espaços chamativos. No longo, aperta as letras. Os glifos mantêm suas formas nos dois casos, mas nenhum resultado funciona bem para este design. A linha spacingAndGlyphs chega ao mesmo comprimento mudando visivelmente as proporções da fonte.

Nosso teste usou Chrome 154 no navegador do aplicativo. Medimos a extensão horizontal da posição inicial do primeiro caractere à posição final do último; cada linha ajustada chegou a aproximadamente 240 unidades. O exemplo usa uma fonte latina e texto simples da esquerda para a direita. Não é um teste de compatibilidade multilíngue nem entre renderizadores.

Defina uma correção modesta de comprimento

Para o rótulo longo acima, 330 unidades estão próximas de seu comprimento natural de 325.3 unidades. Esse é um exemplo de calibração mais útil do que forçá-lo a 240.

Baixe Abel-Regular.ttf e seu OFL.txt do diretório Abel do Google Fonts. Coloque-os em uma pasta fonts ao lado de um arquivo HTML contendo esta marcação e sirva essa pasta localmente:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

O 330 sem unidade pertence ao sistema de coordenadas SVG. Escalar o SVG inteiro em uma página também escala essa distância na tela. Mantenha o emblema e o texto separados para que uma mudança tipográfica não altere o desenho.

A fonte ainda importa. textLength não transforma as letras em contornos nem empacota a fonte. Se o formato das letras mudar em outro computador, diagnostique a substituição de fontes SVG antes de ajustar o espaçamento.

Para uma largura máxima, meça primeiro

Se a regra é “deixe os rótulos curtos como estão e reduza apenas os longos”, adicione essa condição você mesmo. Este exemplo reduz o tamanho da fonte, portanto as letras mantêm suas proporções ao ficarem menores nas duas dimensões.

Coloque este script após o SVG acima. Ele substitui o ajuste fixo de 330 unidades por um máximo de 240:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready aguarda o carregamento das fontes e o trabalho de layout do documento terminarem. A chamada explícita load() solicita primeiro a fonte usada neste exemplo. Medir antes de a fonte pretendida carregar pode levar a uma decisão de ajuste baseada em letras de uma fonte substituta.

Removemos textLength antes de chamar getComputedTextLength(), pois esse trecho precisa do comprimento natural. Em nosso teste de navegador, esse método ainda informou o comprimento natural para as linhas spacing, embora a extensão exibida do início ao fim tivesse mudado. Não presuma que ele seja uma medição universal da largura visual ajustada.

Com este script, o rótulo curto PINE mantém seu tamanho de 64 unidades. O longo cai para cerca de 47.2 unidades. Revise o resultado no tamanho real de exibição ou impressão. Se as palavras reduzidas ficarem pequenas demais, mude o layout ou o texto em vez de reduzir o tamanho indefinidamente. Execute novamente a etapa de ajuste quando o texto ou as configurações de fonte mudarem.

Confira o rótulo final no destino

Um ajuste numérico é apenas uma verificação. Observe os pares de letras e o espaço entre emblema e texto no tamanho final. Mantenha rótulos comuns com seu espaçamento natural, a menos que o design precise de calibração.

Para várias linhas, crie e posicione as linhas intencionalmente; textLength sozinho não fornece uma política de quebra automática. Para um emblema curvo, use o fluxo separado de texto SVG em um traçado. Esse guia controla a linha de base que as letras seguem.

Guarde a origem com texto editável e abra o arquivo de entrega no editor, navegador ou renderizador real que o usará. O guia de arquivos SVG explica por que um SVG pode conter texto editável, traçados vetoriais ou uma imagem incorporada apesar de compartilhar a mesma extensão.

Se seu logo inicial existe apenas como imagem raster, o vetorizador de logos do PerfectVector pode recuperar a arte do emblema. Inspecione e limpe esses traçados, depois redigite as palavras como texto editável antes de ajustar o rótulo. Uma palavra traçada é geometria; textLength não pode redimensionar o espaçamento de seus caracteres. Nosso passo a passo de vetorização de logos aborda essa etapa de recuperação da origem.

Perguntas frequentes

textLength só reduz texto comprido demais? Não. Ele solicita um comprimento, portanto também pode expandir texto naturalmente mais curto. Meça o rótulo natural e aplique sua própria condição quando precisar de uma regra de largura máxima.

Qual valor lengthAdjust preserva as formas das letras? Use spacing para ajustar o espaçamento dos caracteres sem esticar os glifos. Um ajuste grande ainda pode criar espaços estranhos ou colisões, portanto inspecione as letras no tamanho final.

textLength pode ajustar letras traçadas de um PNG? Ele opera em texto SVG, não em traçados com formato de letras. Redigite as palavras como texto editável se precisar de textLength ou espaçamento editável de caracteres, mantendo o emblema como arte vetorial separada.

Fontes

1. W3C — Ajuste de texto SVG 2 — Os dois modos e seu efeito nas formas e nos avanços dos glifos.
2. MDN — textLength — Comprimento solicitado e modo spacing padrão.
3. MDN — FontFaceSet.ready — Espera pelo carregamento de fontes e pelo layout.
4. MDN — getComputedTextLength — Medição de um elemento de texto SVG.
5. Google Fonts — Abel — A fonte e a licença usadas na comparação original.

Recupere um emblema raster com o vetorizador de logos, se precisar, e mantenha as letras como um elemento de texto separado. Compare o rótulo final no tamanho normal antes de criar uma cópia de entrega com contornos ou uma exportação raster.