Texto SVG – elemento de texto SVG, SVG textPath

SVG permite crear tres tipos de objetos gráficos: formas de gráficos vectoriales, imágenes y texto. De la misma manera, en cuanto a las formas, a los elementos de texto SVG se les pueden aplicar transformaciones del sistema de coordenadas, recorte y estilo. En este artículo, consideramos cómo incorporar texto a una imagen SVG.

Este artículo presenta los elementos de texto SVG como <text>, <tspan> y <textPath> y revisa algunos atributos comunes que ayudan a mostrar, formatear y aplicar estilo al texto en una imagen SVG. Aprenderá a manipular la ubicación, orientación y apariencia del texto a través de ejemplos y explicaciones detalladas. El artículo también proporciona información básica sobre glifos, caracteres y fuentes.

Fuentes y glifos

Cuando se habla de texto SVG, es bueno saber qué son los glifos, los caracteres y las fuentes.

Un glifo (glyph) es una unidad gráfica elemental dentro de un conjunto acordado de unidades destinadas a la escritura de caracteres tipográficos. Refiriéndose a la especificación oficial en W3.org:

“A glyph represents a unit of rendered content within a font. Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes”.

En otras palabras, los glifos se utilizan como un conjunto de trazados gráficos (curvas) para la creación de letras o símbolos.

Una fuente (font) es un bloque de datos (o un archivo) que consta de descripciones de caracteres individuales en el conjunto utilizado por un programa al mostrar texto. Por otro lado, la fuente representa una colección organizada de glifos relacionados gráficamente en la que las diversas representaciones de glifos compartirán una apariencia o estilo particular que se caracteriza por una fuente determinada.

Las fuentes vectoriales, a diferencia de sus contrapartes rasterizadas, utilizan trazados, curvas de Bézier, instrucciones de dibujo y fórmulas matemáticas para cada descripción de glifo. Este enfoque único permite escalar los contornos de los personajes a cualquier tamaño.

Carácter (character) es una representación digital de una letra o símbolo. Un carácter puede ser una instrucción de control, una marca representable o un modificador, es decir, es una unidad atómica o básica del texto. Según el estándar de codificación de caracteres universal UTF-8, se pueden necesitar de 1 a 4 bytes para representar un carácter.

Cuando una computadora genera caracteres, los asigna a glifos en una fuente.

En una cadena, los caracteres de texto están alineados a lo largo de una línea recta imaginaria. Esta línea se llama baseline. En general, la línea base puede orientarse de diferentes maneras. Depende del idioma y de los caracteres mostrados. En la mayoría de los idiomas, los caracteres están alineados sobre una línea base “alfabética” que se extiende a lo largo de la parte inferior de los caracteres.

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 detallado dentro de `<text>`.
`<textPath>`	Alinea texto a lo largo de una curva `<path>`.

Elemento SVG `text`

El elemento <text> se utiliza para definir un texto. x e y son los principales atributos responsables de la posición del texto. La línea base del texto comienza desde la esquina inferior izquierda del primer símbolo de texto. Es esencial establecer un valor y mayor que el tamaño de fuente. De lo contrario, el texto no aparece en la ventana gráfica.

El siguiente ejemplo ilustra cómo especificar correctamente un inicio de línea base. x e y establecen las coordenadas del inicio de la línea de base ( 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>

Texto “Dos líneas de texto SVG: una no cabe en la ventana gráfica, pero la otra sí.”

Los atributos de los elementos <text> y <tspan> indican la dirección de escritura, la alineación, la fuente y otras propiedades y características específicas que describen con precisión cómo representar los caracteres. Los principales atributos 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 a que el texto renderizado ocupe una longitud específica.
lengthAdjust – controla cómo el espaciado y la escala de los glifos se adaptan a textLength (spacing, spacingAndGlyphs).
text-anchor – alineación del texto respecto a la coordenada x (start, middle, end).
writing-mode – establece la dirección del flujo de texto (lr, rl, tb, bt).

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

Veamos cómo puedes organizar el texto ( svg-text-arranging.svg):

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" style="direction: rtl; unicode-bidi: bidi-override">Aspose.SVG</text>
5    <text x="180" y="120" fill="green" style="text-anchor: middle" >Aspose.SVG</text>
6    <text x="260" y="90" style="writing-mode: tb">Aspose.SVG</text>
7</svg>

Texto “Organización de texto SVG: cinco líneas de texto idéntico que difieren en posición, orientación y longitud.”

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

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

El elemento <tspan> está dentro del elemento <text> u otro elemento <tspan>. Al ser un elemento secundario, <tspan> cumple varias funciones importantes en la visualización y el formato del texto:

En SVG, el texto se representa como una sola línea dentro de una ventana gráfica; no se ajusta automáticamente a otra cadena. Puede dividirlo en varias líneas usando el elemento <tspan>. Cada elemento <tspan> puede contener diferentes formatos y posiciones.
Para configurar y aplicar estilos (u otros atributos) solo a una parte específica del texto, debe usar el elemento <tspan>. Le permite cambiar el estilo o la posición del texto mostrado dentro del elemento <tspan> en relación con el elemento principal.

Considere un ejemplo simple <tspan>> ( svg-text.svg):

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>

Texto “Texto Aspose a sus API de formato de archivo”

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

SVG `<textPath>` – Texto a lo largo de una curva

En SVG, el texto se puede mostrar no sólo horizontal o verticalmente sino a lo largo de cualquier curva vectorial. SVG puede colocar texto a lo largo de una ruta definida por un elemento <path>. Esto se realiza mediante un elemento <textPath> de varias maneras:

El atributo href (xlink:href) hace referencia a una URL que apunta al elemento <path>.
El atributo path especifica los datos de la ruta SVG directamente.

Tanto el atributo path como el atributo href especifican una ruta a lo largo de la cual se representarán los caracteres. El texto que se muestra a lo largo de la curva toma principalmente el atributo href con referencia al elemento <path>. Aquí hay un ejemplo ( svg-text-path.svg):

 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" fill="transparent" />
 3    <path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent" />
 4    <text>
 5        <textPath href ="#my_path1"> Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
 6        </textPath>
 7        <textPath href ="#my_path2"> Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
 8        </textPath>
 9    </text>
10</svg>

Texto “Texto SVG a lo largo de la ruta SVG”

Si la longitud del trazado es más corta que el tamaño del texto, solo se dibuja la parte del texto dentro de la extensión del trazado. En la figura, la segunda curva es más corta que la longitud del texto, por lo que el texto se interrumpe al final del trazado.

El texto SVG se puede diseñar usando propiedades CSS como font-weight, font-style, text-decoration, text- transform, etc. Se puede decorar con subrayado, sobrerayado y tachado. Al igual que otras formas SVG, el texto puede tener un trazo y un relleno configurados. Puede leer más sobre cómo aplicar estilo al texto en la sección Filtros y degradados SVG.

Errores comunes y soluciones

Problema	Causa	Solución
El texto se corta en la parte superior del viewport	El valor de `y` es menor que el tamaño de la fuente	Establezca `y` mayor que el tamaño de la fuente (p. ej., `y="30"` para texto de 24 px).
El texto no sigue la curva como se espera	`href` apunta a un `<path>` ID inexistente	Verifique el `id` del `<path>` y asegúrese de que el valor de `href` coincida exactamente.
Los glifos aparecen distorsionados	`lengthAdjust` está configurado a `spacing` mientras se usa `textLength`	Use `lengthAdjust="spacingAndGlyphs"` para escalar tanto el espaciado como los glifos.
Texto de derecha a izquierda sigue mostrando izquierda a derecha	Falta `unicode-bidi:bidi-override`	Añada `style="direction: rtl; unicode-bidi: bidi-override"` al `<text>` o `<tspan>`.
El texto no se envuelve a una nueva línea	Se confía en el ajuste automático de línea	Inserte un nuevo `<tspan>` con sus propias coordenadas `x`/`y` para cada línea.

Recetas rápidas

Objetivo	Fragmento SVG (copiar‑pegar)
Centrar texto horizontalmente	`<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>`
Texto vertical (de arriba a abajo)	`<text x="20" y="20" writing-mode="tb">Vertical</text>`
Estirar texto a un ancho exacto	`<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>`
Colocar texto en 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 sobrelínea	`<text x="10" y="40" style="text-decoration: underline overline;">Styled</text>`

Conclusión

Los elementos de texto SVG, incluidos <text>, <tspan> y <textPath>, son componentes SVG fundamentales que se utilizan para representar texto en gráficos SVG. El elemento <text> define un bloque de texto, mientras que los elementos <tspan> permiten un control más preciso sobre el estilo y la ubicación del texto dentro del <text>. Además, los elementos <textPath> permiten que el texto siga una ruta específica. Con el texto SVG, puede crear gráficos dinámicos y visualmente atractivos, aumentando la interactividad y usabilidad de los documentos SVG.

Recursos relacionados

En el artículo Editar archivo SVG, aprenderá cómo editar SVG usando Aspose.SVG para la biblioteca .NET y considerará ejemplos detallados de C# sobre cómo agregar elementos a un documento SVG y editarlos.
La API Aspose.SVG Builder ofrece una clase PathBuilder diseñada para facilitar la creación y administración de rutas SVG mediante programación en C#. El artículo Path Builder – Crear ruta SVG – C# demuestra una sintaxis intuitiva para definir rutas SVG mediante programación, incluido el posicionamiento del texto a lo largo de la ruta.