Texto SVG – elementos text, tspan y textPath

SVG puede renderizar tres tipos principales de contenido gráfico: formas vectoriales, imágenes y texto. El texto SVG no es solo letras planas sobre un canvas. Puede posicionarse con coordenadas, estilizarse con CSS o atributos de presentación, transformarse, recortarse y colocarse a lo largo de un path. Este artículo explica cómo se escribe y organiza el texto en marcado SVG.

En este artículo aprenderás a:

Usar <text> para colocar texto SVG en una posición de línea base concreta.
Usar <tspan> para texto SVG multilínea y estilos en línea.
Usar <textPath> para que el texto siga una curva de path.
Controlar alineación, dirección, modo de escritura, textLength y espaciado de glifos.
Entender la diferencia entre caracteres, glifos y fuentes.

Qué son glifos, fuentes y caracteres

Glifo – la representación visual de un carácter dentro de una fuente. Un glifo se define mediante una o varias formas, a menudo paths, y posibles instrucciones de renderizado.
Fuente – una colección de glifos que comparten un diseño común. Las fuentes vectoriales almacenan contornos de glifos como geometría escalable, por lo que el texto puede ampliarse sin perder nitidez.
Carácter – el punto de código abstracto, por ejemplo Unicode, que un programa asigna a un glifo en una fuente. Los caracteres se organizan sobre una línea base imaginaria, que puede ser horizontal o vertical según el sistema de escritura.

Entender la relación entre caracteres, glifos y fuentes es esencial cuando necesitas control preciso del renderizado de texto SVG.

Elementos de contenido de texto SVG

SVG define tres elementos de contenido que generan texto visible:

Elemento	Propósito
`<text>`	Define un bloque de texto.
`<tspan>`	Proporciona posicionamiento y estilo detallados dentro de `<text>`.
`<textPath>`	Alinea texto a lo largo de una curva `<path>`.

Cómo añadir texto a SVG

Crea un elemento <text> dentro del documento <svg>.
Define los atributos x e y para posicionar la línea base del texto.
Añade atributos de fuente y pintura como font-family, font-size, fill o stroke.
Usa elementos <tspan> cuando un bloque de texto necesite varias líneas o estilos mixtos.
Usa <textPath> cuando el texto deba seguir un path en lugar de una línea base recta.
Revisa el viewport, la línea base y el tamaño de fuente si el texto aparece recortado.

Elemento SVG `<text>`

El elemento <text> crea una secuencia de texto. Los atributos x e y posicionan el inicio de la línea base del texto, no la esquina superior izquierda de una caja de texto. Como la línea base se sitúa cerca de la parte inferior de las letras, un valor y pequeño puede colocar parte del texto por encima del viewport. En la práctica, define y lo bastante grande para el font-size elegido.

El siguiente ejemplo muestra por qué importa la posición de la línea base. El primer texto usa un valor y muy pequeño, por lo que las letras se recortan. El segundo texto mueve la línea base hacia abajo y queda completamente visible ( svg-text-position.svg).

1<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
2    <text x="10" y="6" fill="red">The text is not fully visible </text>
3    <text x="10" y="30" fill="green">The text is fully visible </text>
4</svg>

Ejemplo de posicionamiento de línea base en texto SVG con texto recortado y visible

Los atributos de <text> y <tspan> controlan dirección de escritura, alineación, fuente, espaciado y posicionamiento de caracteres. Los más comunes son:

x, y – coordenadas absolutas del inicio de la línea base.
dx, dy – desplazamientos relativos para caracteres individuales.
rotate – ángulo de rotación aplicado a cada carácter.
textLength – fuerza al texto renderizado a ocupar una longitud específica.
lengthAdjust – controla cómo se adaptan espaciado y escalado de glifos a textLength (spacing, spacingAndGlyphs).
text-anchor – alineación del texto respecto a la coordenada x (start, middle, end).
writing-mode – define la dirección del flujo de texto (lr, rl, tb, bt).

Estos atributos pueden combinarse para crear diseños complejos, como texto estirado, escritura de derecha a izquierda o escritura vertical.

1<svg height="300" width="400" xmlns="http://www.w3.org/2000/svg">
2    <text x="180" y="30" fill="red">Aspose.SVG</text>
3    <text x="180" y="60" fill="blue" textLength="140">Aspose.SVG</text>
4    <text x="180" y="90" fill="grey" textLength="160" lengthAdjust="spacingAndGlyphs"
5          style="direction: rtl; unicode-bidi: bidi-override">Aspose.SVG</text>
6    <text x="180" y="120" fill="green" style="text-anchor: middle">Aspose.SVG</text>
7    <text x="260" y="90" style="writing-mode: tb">Aspose.SVG</text>
8</svg>

Ejemplo de organización de texto SVG con textLength, text-anchor, dirección derecha a izquierda y escritura vertical

El texto rojo usa el valor predeterminado text-anchor:start.
El texto verde centra el texto con text-anchor:middle.
El texto gris demuestra dirección de derecha a izquierda con direction:rtl.
Los textos azul y gris muestran cómo textLength y lengthAdjust estiran los glifos.
El texto vertical usa writing-mode:tb (de arriba abajo).

`<tspan>` – estilos en línea y saltos de línea

<tspan> puede anidarse dentro de <text> o de otro <tspan>. Como elemento hijo, <tspan> cumple varias funciones importantes en la visualización y formato de texto:

El texto SVG no se ajusta automáticamente a una nueva línea. Usa elementos <tspan> para crear líneas separadas y dar a cada línea su propia posición.
Usa <tspan> cuando solo una parte de un bloque de texto necesite otro estilo, posición, color, tamaño de fuente o peso de fuente.

1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
2    <text x="20" y="60" style="font-family:arial">
3        <tspan style="font-weight:bold; font-size:55px">ASPOSE</tspan>
4        <tspan x="50" y="90" style="font-size:20px; fill:grey">Your File Format APIs </tspan>
5    </text>
6</svg>

Ejemplo de tspan SVG con texto multilínea, distintos tamaños de fuente y colores de relleno

x e y en un <tspan> inician una nueva línea en las coordenadas especificadas.
Las propiedades style en línea, como font-weight, font-size y fill, afectan solo a ese <tspan>.

SVG `<textPath>` – texto sobre una curva

<textPath> adjunta texto a un elemento <path>, lo que permite que los caracteres sigan cualquier curva vectorial. El path puede referenciarse de dos formas:

href o xlink:href – apunta a un <path> por su id.
path – proporciona los datos de path SVG directamente dentro del atributo.

 1<svg height="300" width="800" xmlns="http://www.w3.org/2000/svg">
 2    <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100"
 3          fill="transparent" />
 4    <path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100"
 5          transform="translate(0,75)" fill="transparent" />
 6    <text>
 7        <textPath href="#my_path1">
 8            Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
 9        </textPath>
10        <textPath href="#my_path2">
11            Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
12        </textPath>
13    </text>
14</svg>

Ejemplo de textPath SVG con texto que sigue dos paths curvos

Si el path es más corto que el texto, el desbordamiento se recorta al final del path. El estilo funciona igual que con texto normal: se pueden aplicar propiedades CSS como font-weight, font-style, text-decoration y text-transform.

La ilustración muestra dos cadenas de texto unidas a dos paths distintos. La primera línea sigue un path largo con forma de onda, mientras que la segunda termina antes porque el path referenciado es más corto.

Errores comunes y soluciones

Problema	Causa	Solución
El texto se corta en la parte superior del viewport	El valor `y` es menor que el tamaño de fuente	Define `y` mayor que el tamaño de fuente, por ejemplo `y="30"` para texto de 24 px
El texto no sigue la curva como esperabas	`href` apunta a un `id` de `<path>` inexistente	Verifica el `id` del `<path>` y asegúrate de que el valor `href` coincida exactamente
Los glifos aparecen distorsionados	`lengthAdjust` está en `spacing` al usar `textLength`	Usa `lengthAdjust="spacingAndGlyphs"` para escalar tanto espaciado como glifos
El texto de derecha a izquierda sigue mostrándose de izquierda a derecha	Falta `unicode-bidi:bidi-override`	Añade `style="direction: rtl; unicode-bidi: bidi-override"` a `<text>` o `<tspan>`
El texto no salta a una nueva línea	Se espera ajuste automático	Inserta un nuevo `<tspan>` con sus propias coordenadas `x`/`y` para cada línea

Recetas rápidas

Objetivo	Fragmento SVG
Centrar texto horizontalmente	`<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>`
Texto vertical, de arriba abajo	`<text x="20" y="20" writing-mode="tb">Vertical</text>`
Estirar texto a una anchura exacta	`<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>`
Colocar texto sobre una curva	`<path id="curve" d="M10,80 C40,10 65,10 95,80" fill="none"/> <text><textPath href="#curve">On a curve</textPath></text>`
Aplicar subrayado y sobrerayado	`<text x="10" y="40" style="text-decoration: underline overline;">Styled</text>`

FAQ – Texto SVG

¿Cómo posiciono texto SVG?

Define los atributos x e y en un elemento <text>. El valor y posiciona la línea base, por lo que normalmente debe ser mayor que el tamaño de fuente para evitar recorte en la parte superior del viewport.

¿Cómo creo texto SVG multilínea?

Usa varios elementos <tspan> dentro de un <text>. Da a cada línea sus propios valores x e y, o usa dy para desplazar cada línea respecto a la anterior.

¿Puede el texto SVG seguir una curva?

Sí. Define un <path> con id y después referencia ese path desde <textPath href="#path-id">. El texto sigue la geometría del path y aún puede estilizarse con propiedades CSS de texto.

¿Puedo convertir texto SVG a contornos vectoriales?

Sí. El texto puede convertirse en paths vectoriales cuando necesitas una salida independiente de las fuentes. Consulta Text Vectorization & Text Security – .NET y Convertir texto SVG a vector en Python.

Especificación y recursos relacionados

La sección de la especificación SVG sobre elementos de texto define el comportamiento de <text>, <tspan> y <textPath>.
Usa Rellenos y trazos en SVG para estilizar texto SVG con fill, stroke, opacidad y propiedades de pintura.
Abre Datos de path SVG cuando necesites entender el path usado por <textPath>.
Consulta Working with Fonts and Text para ejemplos de API .NET que inspeccionan fuentes, glifos y comportamiento de renderizado de texto.
Consulta Dibujar texto SVG en Python para ejemplos de Python via .NET que crean elementos <text> y estilizan texto SVG mediante código.
Usa Convert Text to Vector cuando el texto SVG deba convertirse a contornos vectoriales.
Usa Editar archivo SVG para ejemplos de API .NET que crean y editan elementos SVG mediante código.

SVG Path Data Transformaciones SVG básicas