Softonic

Gerador de Texto em Círculo SVG

Etapa 1 / 2
Próximo

Texto em um caminho circular é um detalhe comum em distintivos, selos e logotipos. O SVG faz isso com <textPath>: um elemento de texto segue um caminho invisível. Este gerador cria o SVG completo no navegador. Digite o texto e ajuste raio, tamanho da fonte, espaçamento, posição inicial, cor e direção do caminho. Depois, copie ou baixe o SVG.

Como curvar texto ao redor de um círculo

  1. 1

    Digite o texto

    Frases curtas (3-8 palavras) são as mais legíveis; sentenças longas se enrolam em um pequeno raio.

  2. 2

    Defina o raio

    Raio maior = curva mais suave = letras mais legíveis. Muito pequeno e as letras ficam inclinadas.

  3. 3

    Mova o ponto inicial

    Use Percentagem de deslocamento inicial para mover o primeiro caractere ao longo do caminho. Trata-se de uma posição no caminho, não de um controle de rotação livre.

  4. 4

    Ajuste tamanho, espaçamento e direção

    Os controles disponíveis alteram o tamanho da fonte, o espaçamento entre letras, a cor e a direção horária ou anti-horária do caminho.

  5. 5

    Copie o SVG

    A saída inclui o caminho invisível, o `<textPath>` e o estilo da fonte, prontos para serem inseridos em qualquer página.

Como o textPath funciona nos bastidores

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

O atributo d usa os comandos m/a (moveto / arco) para desenhar um círculo completo. O <textPath> então posiciona a string ao longo dele. startOffset é uma porcentagem ao longo do caminho; text-anchor="middle" centraliza o texto nesse deslocamento.

Raio vs legibilidade

Raio (px) Sensação Bom para
40-60 Muito apertado, distorcido Apenas logotipos abstratos
80-120 Distintivo clássico Ícones de aplicativos, moedas
140-200 Arco suave Logotipos de café, brasões
250+ Quase reto Decoração de cabeçalho

Predefinições comuns

  • Arco superior, comece em 180°, abranja 180° do círculo. A metade superior é legível da esquerda para a direita.
  • Arco inferior com inversão, inverta a direção do caminho ou use side="right" para que o texto seja lido corretamente de cabeça para baixo.
  • Anel completo, o texto se enrola uma vez. Adicione um espaçador inicial e final (.) para que o ponto de junção não seja abrupto.

Dicas de exportação

  • SVG inline permite que você tema o preenchimento com currentColor ou uma propriedade CSS personalizada.
  • Evite incorporar uma fonte da web dentro do SVG, declare-a no seu CSS global, assim o navegador reutiliza o carregamento.
  • Se você precisar de uma imagem estática (PNG, favicon), passe o SVG por um rasterizador no tamanho final que você precisa; SVG escala sem perda, mas algumas plataformas ainda querem um bitmap.

Perguntas frequentes

Por padrão, o textPath segue a direção do caminho. Um círculo desenhado no sentido horário coloca a metade inferior de cabeça para baixo. Desenhe a metade inferior como um arco separado no sentido anti-horário, use side="right" (SVG 2) ou divida o texto em dois elementos.

Sim. O elemento <text> gerado aceita atributos padrão SVG/CSS: fill, font-weight, font-style, letter-spacing. Modifique-os inline ou com CSS externo.

<textPath> é suportado no Chrome, Firefox, Safari e Edge há mais de uma década. O IE11 tem suporte parcial; se você ainda precisar, pré-rasterize o distintivo.

Adicione letter-spacing="2" (ou mais) no elemento de texto. Em um raio apertado, isso pode melhorar significativamente a legibilidade.

Não. O texto e o SVG são gerados no navegador. A frase não é enviada ao servidor nem armazenada.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Conversor de Pantone para HEX

Converta cores Pantone PMS para os valores mais próximos de HEX, RGB e CMYK para correspondência em tela e impressão, com pré-visualização de amostras.

Ferramenta disponível em outros idiomas