SVG Text

Descrição do elemento `<text>`

O elemento SVG <text> especifica um elemento gráfico utilizado para exibir texto. Ele é colocado dentro de um elemento <svg> e posicionado pelas suas coordenadas x e y. Você pode aplicar um padrão, caminho de recorte, máscara, gradiente ou filtro ao <text>, assim como em outros elementos gráficos SVG. Qualquer texto que não esteja dentro de um elemento <text> não será renderizado.

Nota: O <text> SVG não quebra automaticamente. Um único elemento <text> é renderizado em uma linha; o texto não quebra para uma nova linha quando alcança a borda do canvas SVG. Para dividir o texto em várias linhas, você deve posicioná-las manualmente com elementos <tspan> (cada um com sua própria coordenada y), usar elementos <text> separados, ou fazer o texto fluir ao longo de um caminho com <textPath>.

O texto SVG suporta recursos tipográficos como decorações de texto, escolha de tipografia e uso de ligaduras discricionárias, estilísticas ou históricas.

O SVG também suporta necessidades de processamento de texto internacional:

texto da esquerda para a direita ou bidirecional,
orientação vertical e horizontal do texto,
layout de texto complexo,
alinhamento de glifos a diferentes linhas de base.

É possível ter conteúdo SVG em vários idiomas, substituindo diversas strings de texto com base no idioma preferido do usuário.

Para estilizar o texto, você pode usar propriedades CSS específicas de texto, como font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width e fill.

Exemplo do elemento SVG `<text>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Experimente Você Mesmo »

Rotacionando texto: `transform` vs o atributo `rotate`

Existem duas maneiras diferentes de rotacionar texto SVG, e elas são fáceis de confundir:

transform="rotate(angle cx cy)" rotaciona o elemento <text> inteiro como um bloco único em torno de um ponto central. A string permanece reta; toda a linha é inclinada.
O atributo rotate rotaciona cada glifo (caractere) individual no lugar. As letras ficam em um ângulo, mas a linha de texto ainda corre horizontalmente.

O exemplo abaixo usa transform para inclinar a linha inteira em 40 graus em torno do ponto (30, 60):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Experimente Você Mesmo »

Por outro lado, o atributo rotate rotaciona cada caractere individualmente sem inclinar a linha de base:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Alinhando texto com `text-anchor` e `dominant-baseline`

Por padrão, as coordenadas x/y marcam o início do texto e se situam na linha de base alfabética. Dois atributos alteram isso:

text-anchor controla o alinhamento horizontal em relação a x. Valores: start (padrão, o texto começa em x), middle (o texto é centralizado em x) e end (o texto termina em x). Isso é essencial para centralizar rótulos.
dominant-baseline controla o alinhamento vertical em relação a y. Valores comuns: auto/alphabetic (padrão), middle, central, hanging e text-bottom. Use middle para centralizar verticalmente o texto na coordenada y.

No próximo exemplo, todos os três rótulos compartilham o mesmo x="125", mas text-anchor os alinha de forma diferente em relação à linha de referência tracejada:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

Usando `<tspan>` para múltiplas linhas

O elemento <tspan> é filho de <text> e permite alterar a posição, o estilo ou a formatação de um trecho de texto sem sair do elemento <text> pai. Como o texto SVG não quebra automaticamente, <tspan> é a forma padrão de dividir um bloco lógico de texto em várias linhas: dê a cada <tspan> seu próprio x e y (ou use dy para deslocar em relação à linha anterior).

Use <tspan> em vez de elementos <text> separados quando as partes pertencem juntas como um único rótulo acessível ou compartilham estilo — um <tspan> herda os atributos do pai e permanece parte do mesmo nó de texto. Use elementos <text> separados quando as partes forem genuinamente independentes.

O exemplo abaixo usa <tspan> para posicionar três linhas:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Experimente Você Mesmo »

Colocando texto em um caminho com `<textPath>`

Para fazer o texto seguir uma curva ou qualquer outra forma, envolva-o em um elemento <textPath> e aponte seu href para o id de um <path> (ou outra forma). O texto então flui ao longo desse caminho. Defina o caminho dentro de <defs> para que seja reutilizável e não seja desenhado por si mesmo. Consulte o capítulo SVG <path> para entender como funcionam os dados de caminho (d).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Exemplo do elemento SVG `<text>` usado com o elemento `<a>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Experimente Você Mesmo »

Estilo e acessibilidade

O texto dentro de <text> e <tspan> é estilizado com propriedades específicas de texto, que você pode definir como atributos de apresentação (por exemplo, font-size="20", font-weight="bold", font-family="Verdana") ou com CSS. Os mais comuns são font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (a cor do texto) e stroke/stroke-width (o contorno). Consulte a tabela de Atributos abaixo para os atributos relacionados ao layout.

Acessibilidade: O texto SVG é desenhado como gráficos, portanto nem sempre é exposto a tecnologias assistivas da mesma forma que o texto HTML comum. Dê a SVGs significativos um <title> como primeiro filho do elemento <svg> (ou <text>), e adicione aria-label/role="img" para que leitores de tela o anunciem. Por exemplo:
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Atributos

Atributo	Descrição
x	Especifica a coordenada x inicial da linha de base do texto.
y	Especifica a coordenada y inicial da linha de base do texto.
dx	Especifica o deslocamento horizontal de uma posição de texto em relação à posição de texto anterior.
dy	Especifica o deslocamento vertical de uma posição de texto em relação à posição de texto anterior.
rotate	Rotaciona cada glifo individual (não o elemento inteiro — use `transform="rotate(...)"` para isso).
lengthAdjust	Especifica como o texto é comprimido ou esticado para ajustar a largura definida pelo atributo textLength.
textLength	Especifica a largura na qual o texto deve caber.
text-anchor	Especifica o alinhamento horizontal do texto: `start`, `middle` ou `end`.
dominant-baseline	Especifica o alinhamento vertical do texto em sua linha de base (por exemplo, `middle`, `hanging`).
font-family	Define a tipografia, por exemplo, `Arial, sans-serif`.
font-size	Define o tamanho do texto, por exemplo, `20` ou `1.5em`.
font-weight	Define o peso, por exemplo, `normal` ou `bold`.
font-style	Define o estilo, por exemplo, `normal` ou `italic`.

O elemento SVG <text> também suporta os Atributos Globais e os Atributos de Evento.

Prática

Qual atributo centraliza o texto SVG horizontalmente na sua coordenada 'x'?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Descrição do elemento <text>

Exemplo do elemento SVG <text>:

Rotacionando texto: transform vs o atributo rotate

Alinhando texto com text-anchor e dominant-baseline

Usando <tspan> para múltiplas linhas

Colocando texto em um caminho com <textPath>

Exemplo do elemento SVG <text> usado com o elemento <a>:

Estilo e acessibilidade

Atributos

Prática

Descrição do elemento `<text>`

Exemplo do elemento SVG `<text>`:

Rotacionando texto: `transform` vs o atributo `rotate`

Alinhando texto com `text-anchor` e `dominant-baseline`

Usando `<tspan>` para múltiplas linhas

Colocando texto em um caminho com `<textPath>`

Exemplo do elemento SVG `<text>` usado com o elemento `<a>`: