Texto SVG - Aprender HTML

Descripción del elemento `<text>`

El elemento SVG <text> especifica un elemento gráfico utilizado para mostrar texto. Se coloca dentro de un elemento <svg> y se posiciona mediante sus coordenadas x e y. Puedes aplicar un patrón, una ruta de recorte, una máscara, un gradiente o un filtro a <text>, al igual que a otros elementos gráficos SVG. Cualquier texto que no esté dentro de un elemento <text> no se renderizará.

Nota: El elemento SVG <text> no ajusta el texto automáticamente. Un único elemento <text> se renderiza en una sola línea; el texto no pasará a una nueva línea al alcanzar el borde del lienzo SVG. Para dividir el texto en varias líneas, debes posicionarlas manualmente con elementos <tspan> (cada uno con su propia coordenada y), usar elementos <text> independientes, o hacer que el texto fluya a lo largo de una ruta con <textPath>.

El texto SVG admite características tipográficas como decoraciones de texto, elección de tipografía y uso de ligaduras discrecionales, estilísticas o históricas.

SVG también admite necesidades de procesamiento de texto internacional:

texto de izquierda a derecha o bidireccional,
orientación vertical y horizontal del texto,
diseño de texto complejo,
alineación de glifos con distintas líneas base.

Es posible tener contenido SVG en varios idiomas sustituyendo distintas cadenas de texto en función del idioma preferido del usuario.

Para dar estilo al texto, puedes usar propiedades CSS específicas de texto como font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width y fill.

Ejemplo del 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>

Pruébalo tú mismo »

Rotación de texto: `transform` frente al atributo `rotate`

Hay dos formas diferentes de rotar texto SVG, y es fácil confundirlas:

transform="rotate(angle cx cy)" rota el elemento <text> completo como un bloque único alrededor de un punto central. El texto permanece recto; toda la línea se inclina.
El atributo rotate rota cada glifo (carácter) individual en su lugar. Las letras se inclinan, pero la línea de texto sigue corriendo horizontalmente.

El ejemplo siguiente usa transform para inclinar toda la línea 40 grados alrededor del punto (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>

Pruébalo tú mismo »

En cambio, el atributo rotate rota cada carácter por su cuenta sin inclinar la línea 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>

Alineación de texto con `text-anchor` y `dominant-baseline`

Por defecto, las coordenadas x/y marcan el inicio del texto y se sitúan en la línea base alfabética. Dos atributos modifican esto:

text-anchor controla la alineación horizontal relativa a x. Valores: start (predeterminado, el texto comienza en x), middle (el texto se centra en x) y end (el texto termina en x). Es esencial para centrar etiquetas.
dominant-baseline controla la alineación vertical relativa a y. Valores comunes: auto/alphabetic (predeterminado), middle, central, hanging y text-bottom. Usa middle para centrar verticalmente el texto en la coordenada y.

En el siguiente ejemplo, las tres etiquetas comparten el mismo x="125", pero text-anchor hace que se alineen de forma diferente respecto a la línea de referencia discontinua:

<!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>

Uso de `<tspan>` para múltiples líneas

El elemento <tspan> es un hijo de <text> que permite cambiar la posición, el estilo o el formato de un fragmento de texto sin abandonar el elemento <text> padre. Dado que el texto SVG no se ajusta automáticamente, <tspan> es la forma estándar de dividir un bloque lógico de texto en varias líneas: asigna a cada <tspan> su propio x e y (o usa dy para desplazarlo desde la línea anterior).

Usa <tspan> en lugar de elementos <text> independientes cuando las partes pertenecen juntas como una etiqueta accesible única o comparten estilos — un <tspan> hereda los atributos de su padre y permanece como parte del mismo nodo de texto. Usa elementos <text> independientes cuando las partes son genuinamente independientes.

El ejemplo siguiente usa <tspan> para posicionar tres líneas:

<!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>

Pruébalo tú mismo »

Colocación de texto en una ruta con `<textPath>`

Para hacer que el texto siga una curva u otra forma, envuélvelo en un elemento <textPath> y apunta su href al id de un <path> (u otra forma). El texto fluirá entonces a lo largo de esa ruta. Define la ruta dentro de <defs> para que sea reutilizable y no se dibuje por sí misma. Consulta el capítulo de SVG <path> para ver cómo funciona el dato de ruta (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>

Ejemplo del elemento SVG `<text>` usado con el 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>

Pruébalo tú mismo »

Estilos y accesibilidad

El texto dentro de <text> y <tspan> se estiliza con propiedades específicas de texto, que puedes establecer como atributos de presentación (p. ej. font-size="20", font-weight="bold", font-family="Verdana") o con CSS. Las más comunes son font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (el color del texto) y stroke/stroke-width (el contorno). Consulta la tabla de Atributos a continuación para los atributos relacionados con el diseño.

Accesibilidad: El texto SVG se dibuja como gráfico, por lo que no siempre queda expuesto a las tecnologías de asistencia del mismo modo que el texto HTML normal. Proporciona a los SVG con significado un <title> como primer hijo del elemento <svg> (o <text>), y añade aria-label/role="img" para que los lectores de pantalla lo anuncien. Por ejemplo:
<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	Descripción
x	Especifica la coordenada x de inicio de la línea base del texto.
y	Especifica la coordenada y de inicio de la línea base del texto.
dx	Especifica el desplazamiento horizontal de la posición del texto respecto a una posición de texto anterior.
dy	Especifica el desplazamiento vertical de la posición del texto respecto a una posición de texto anterior.
rotate	Rota cada glifo individual (no el elemento completo — usa `transform="rotate(...)"` para eso).
lengthAdjust	Especifica cómo se comprime o estira el texto para ajustarse al ancho definido por el atributo textLength.
textLength	Especifica el ancho al que debe ajustarse el texto.
text-anchor	Especifica la alineación horizontal del texto: `start`, `middle` o `end`.
dominant-baseline	Especifica la alineación vertical del texto en su línea base (p. ej. `middle`, `hanging`).
font-family	Establece la tipografía, p. ej. `Arial, sans-serif`.
font-size	Establece el tamaño del texto, p. ej. `20` o `1.5em`.
font-weight	Establece el grosor, p. ej. `normal` o `bold`.
font-style	Establece el estilo, p. ej. `normal` o `italic`.

El elemento SVG <text> también admite los Atributos globales y los Atributos de evento.

Práctica

¿Qué atributo centra horizontalmente el texto SVG en su coordenada 'x'?

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

Descripción del elemento <text>

Ejemplo del elemento SVG <text>:

Rotación de texto: transform frente al atributo rotate

Alineación de texto con text-anchor y dominant-baseline

Uso de <tspan> para múltiples líneas

Colocación de texto en una ruta con <textPath>

Ejemplo del elemento SVG <text> usado con el elemento <a>:

Estilos y accesibilidad

Atributos

Práctica

Descripción del elemento `<text>`

Ejemplo del elemento SVG `<text>`:

Rotación de texto: `transform` frente al atributo `rotate`

Alineación de texto con `text-anchor` y `dominant-baseline`

Uso de `<tspan>` para múltiples líneas

Colocación de texto en una ruta con `<textPath>`

Ejemplo del elemento SVG `<text>` usado con el elemento `<a>`: