Texto em traçado SVG: recrie letras editáveis de emblemas

Para colocar texto SVG em um traçado, defina um traçado com ID, referencie-o em um <textPath> dentro de <text> e escreva as palavras entre as tags. Para letras centralizadas, combine startOffset="50%" com text-anchor="middle". Mantenha o desenho central em um grupo separado para poder mudar as palavras sem reconstruir a arte.

Essa separação é útil ao restaurar um emblema de clube, uma marca de loja ou um logo de evento. Você pode precisar de traçados vetoriais para o desenho central e ainda precisar corrigir uma data ou mudar um nome. Vetorizar o emblema inteiro produz formas de letras, não uma string de texto editável. Recrie a tipografia como texto editável quando as palavras precisarem continuar editáveis.

Para letras horizontais ao lado de um desenho, ajuste um rótulo SVG reto com textLength e compare as mudanças de espaçamento antes de ajustar as proporções dos glifos.

Comece com três partes separadas

Um emblema precisa de um desenho central, um traçado-guia e o texto que segue esse traçado. A guia controla a posição das letras; ela não precisa ficar visível no desenho final. A referência de textPath da MDN documenta a ligação por href entre o texto e seu traçado.

Para o exemplo abaixo, desenhamos um pinheiro simples e uma guia semicircular em código SVG. Ambos são artes originais de demonstração, não saídas de conversão do PerfectVector. O emblema diz PINE TRAIL CLUB; as letras continuam como uma string de texto durante todas as etapas de construção.

Construa o emblema editável

Salve este código como badge.svg e abra-o em um navegador. Mantenha o arquivo como mestre editável. Se você está começando com o formato, nosso guia de arquivos SVG explica a diferença entre texto, traçados e imagens incorporadas.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

O traçado começa em (70, 215) e segue um semicírculo superior até (330, 215). Seu raio é de 130 unidades. Colocar o traçado em <defs> o disponibiliza para referência sem desenhar um contorno visível. O círculo externo claro é uma forma pintada separada.

Troque PINE TRAIL CLUB pelo seu próprio nome curto, salve e recarregue. A árvore deve permanecer fixa enquanto as novas palavras seguem a mesma guia. Um nome mais longo precisa de outra verificação de ajuste; centralizar não faz qualquer texto caber no arco.

Centralize com deslocamento e âncora

startOffset="50%" coloca a posição de referência do texto na metade do traçado. text-anchor="middle" alinha o meio do texto nessa posição. Um seleciona uma posição na curva; o outro escolhe qual parte do texto fica ali. A referência de startOffset e a referência de text-anchor descrevem esses controles.

Experimente alterar apenas text-anchor para start. Com este texto da esquerda para a direita, as palavras agora começam na metade e continuam em direção à extremidade direita. No nosso teste no navegador, isso moveu as letras para o lado direito e deixou parte da frase além do arco utilizável. Restaure middle antes de ajustar o tamanho da fonte.

Para um emblema simétrico, inspecione visualmente o resultado após a centralização matemática. As letras têm formas e espaços laterais diferentes; um avanço de texto centralizado ainda pode precisar de um pequeno ajuste óptico. Mantenha qualquer ajuste desse tipo deliberado, em vez de mudar várias coordenadas sem relação entre si até o resultado parecer próximo.

Confira a direção do traçado antes de mover o texto

Inverta este mesmo arco superior substituindo seu valor d por:

d="M330 215 A130 130 0 0 0 70 215"

O início e o fim trocam de lugar, e o sinalizador de varredura do arco muda. Para um guia visual dos dois sinalizadores de arco, consulte as quatro combinações de sinalizadores de arco SVG. A curva geométrica permanece no mesmo lugar, mas o texto a segue na direção oposta. No nosso teste no navegador, essa inversão mudou a orientação das letras. Restaure o traçado original para ter letras na orientação correta no topo deste emblema.

Inverter o traçado é diferente de inverter a grafia ou definir a direção de escrita de um idioma. Mantenha as palavras intactas. A especificação de layout de texto SVG explica como os glifos são posicionados ao longo de um traçado. Para uma linha inferior, crie e teste uma guia inferior separada, em vez de mover o texto superior até ele cruzar o desenho central.

Escolha a fonte antes do espaçamento final

O exemplo solicita Georgia e depois uma alternativa genérica serifada. Essa solicitação não incorpora uma fonte ao SVG. O renderizador escolhe uma face disponível na lista de famílias, conforme descrito na referência de font-family da MDN.

Na nossa demonstração no Chromium, mudar as mesmas palavras de Georgia, serif para Arial, sans-serif alterou o avanço de texto medido. O arco e o desenho central permaneceram iguais. A verificação importante é a extensão ocupada e a aparência das letras, não uma largura específica que outro computador pode renderizar de maneira diferente.

Para um emblema real, defina a fonte e o peso pretendidos antes de ajustar o tamanho ou o espaçamento entre letras. Depois, reabra o SVG no ambiente em que ele será usado. Se a fonte muda ali, use o guia de solução de problemas de fontes SVG para isolar substituição ou comportamento de importação.

Se as palavras ultrapassam o arco, experimente uma frase mais curta, uma fonte menor ou uma guia mais ampla. Confira o emblema inteiro após cada mudança. Aumentar o raio da guia pode aproximar as letras da borda externa; reduzir o tamanho do texto pode tornar um emblema impresso pequeno mais difícil de ler. Evite esticar as letras apenas para preencher uma extensão fixa, a menos que essa distorção faça parte do desenho.

Recupere somente a arte que precisa de vetorização

Se o desenho central existe apenas dentro de um PNG ou JPG, separe a tarefa de recuperação da tarefa de tipografia. Use uma cópia da imagem original que isole o desenho central da maneira mais limpa possível. Mantenha o original completo como referência visual para reconstruir o emblema.

Vetorize o desenho central raster com o PerfectVector e compare sua silhueta, espaços internos e pequenos detalhes com a imagem original. Use a arte SVG aceita no grupo central e recrie as palavras separadamente com a fonte pretendida. O PerfectVector cria traçados vetoriais a partir da imagem; este fluxo não depende de OCR, identificação de fontes ou reconstrução automática de texto curvo editável.

Quando o desenho vetorial original está disponível, reutilize-o. Quando as letras foram desenhadas de maneira personalizada e suas formas irregulares importam, siga o fluxo de lettering manual para vetor, em vez de substituí-las por uma fonte. Nosso guia de vetorização de logos aborda a decisão mais ampla entre vetorizar, redigitar e reparar manualmente.

A árvore simples do exemplo evita uma complicação de importação: um desenho existente pode usar outro sistema de coordenadas ou incluir transformações. Escale e posicione esse grupo dentro do viewBox do emblema e confira-o novamente com o texto visível. Não altere a guia das letras para compensar um desenho central posicionado incorretamente.

Mantenha um mestre editável e crie uma cópia de entrega

O texto editável é o mestre útil quando nomes, datas ou palavras podem mudar. Para um emblema fixo enviado a outro editor ou ferramenta de produção, uma cópia em contornos remove a necessidade de o destinatário reproduzir as formas dos glifos da fonte. As palavras se tornam traçados vetoriais e perdem a edição comum de texto.

Nas opções de salvamento SVG do Illustrator, Convert To Outlines converte texto em traçados. A Adobe também alerta que texto exportado em um traçado pode ser renderizado de forma diferente em visualizadores SVG. Esses são motivos para inspecionar a cópia exportada no destino, não uma garantia de que todas as ferramentas posteriores reproduzirão o emblema inteiro. Consulte a documentação de salvamento SVG da Adobe.

Use esta sequência de entrega:

1. Salve o mestre com texto editável antes de converter qualquer coisa em contornos.
2. Confirme as palavras, a fonte, a direção do traçado, a centralização e o espaçamento.
3. Crie uma cópia separada para entrega e converta seu texto em contornos no editor.
4. Reabra essa cópia e compare todas as letras, espaços internos, intervalos e o desenho central.
5. Confira o emblema no tamanho de saída pretendido no aplicativo de destino.

Converter em contornos fixa a aparência da fonte que está ativa naquele momento. Se a fonte alternativa errada está ativa durante a conversão, você fixa as letras erradas. Para uma imagem da web, mantenha também um nome acessível útil; formas de letras em contornos não carregam, por si só, a string de texto original.

Perguntas frequentes

Por que meu texto SVG não está centralizado no traçado? Use startOffset="50%" junto de text-anchor="middle" para o exemplo centralizado. Um deslocamento de 50% com âncora start começa a frase na metade da guia. Confira também a forma do traçado e se todas as palavras cabem.

Por que o texto está de cabeça para baixo? Confira a direção da guia. O texto segue o traçado como ele foi desenhado, portanto inverter o traçado pode mudar a orientação das letras. Teste a direção da guia antes de mover o texto ou alterar sua grafia.

Vetorizar um emblema cria texto curvo editável? A vetorização reconstrói as formas visíveis das letras como arte. Para palavras editáveis, recrie o texto separadamente com a fonte pretendida e uma guia textPath. Mantenha um mestre com texto editável antes de criar uma cópia de entrega em contornos.

Fontes

1. MDN — textPath — Conexão de texto editável a um traçado referenciado.
2. MDN — startOffset — Posicionamento do texto ao longo da guia.
3. MDN — text-anchor — Alinhamento do texto em relação à posição de referência.
4. W3C — texto em SVG 2 — Posicionamento de glifos e regras de layout de texto em traçado.
5. MDN — font-family — Fontes disponíveis e seleção de famílias alternativas.
6. Adobe — salvar arte no Illustrator — Conversão de texto SVG em contornos e limitações da exportação de texto em traçado.

Construa as letras ao redor do desenho central aprovado e mantenha as palavras editáveis até o emblema ficar finalizado. Se seu desenho central está preso em uma imagem raster, recupere seus traçados vetoriais, inspecione os pequenos detalhes e use a arte aceita no mestre do emblema.