Texto SVG – Elementos text y textPath SVG
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
Un elemento de contenido de texto es un elemento SVG que hace que el texto se represente en el lienzo. Los elementos de contenido de texto SVG son: <text>, <tspan> y <textPath>.
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>
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 − las coordenadas absolutas x e y de los caracteres dx, dy − desplazamiento a lo largo del eje x o del eje y (coordenadas relativas)
rotate - rotación aplicada a todos los personajes
textLength − longitud de representación del texto
lengthAdjust − tipo de ajuste con la longitud renderizada del texto
Los atributos x, y, dx, dy y rotate en los elementos <text> y <tspan> se usan a menudo para personajes individuales que requieren ajustes menores de posición para lograr un efecto visual. En el ejemplo, x e y establecen las coordenadas iniciales de la línea base.
Usando el atributo textLength, puede establecer la longitud del texto. A continuación, la longitud del texto se ajusta para que coincida con la longitud especificada ajustando el espaciado y el tamaño de los glifos. Con el atributo lengthAdjust, puede especificar si desea ajustar tanto el espaciado entre letras como el tamaño del glifo.
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>
El texto “rojo” y “verde” sólo se diferencian en la posición de la propiedad text-anchor, que puede tomar tres valores: start, middle y end En el primer caso, el anclaje de texto predeterminado es el borde izquierdo del texto, el valor es start. En el segundo, text-ancla: middle, está la mitad del texto.
La propiedad dirección: rtl significa “de derecha a izquierda”, como resultado, el texto “gris” cambia la dirección de escritura. Para las configuraciones de texto “azul” y “gris”, se utilizan los atributos textLength y lengthAdjust que brindan un efecto visual de extensión de texto/caracteres. Para la orientación del texto de arriba a abajo se aplica la construcción writing-mode: tb, donde tb es “de arriba a abajo”.
Elemento SVG tspan
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>
El elemento <text> con uno o más elementos secundarios <tspan> establece nuevas posiciones para los caracteres que comienzan nuevas líneas. Para el formato de texto SVG, utilizamos atributos x e y que especifican el punto inicial del texto. Las líneas discontinuas en la figura anterior indican la posición inicial del texto en la ventana gráfica. Para el estilo del texto, se requieren las propiedades del atributo style, como font-family, font-size, font-weight y otras.
SVG textPath
En SVG, el texto se puede mostrar no sólo horizontal o verticalmente sino a lo largo de cualquier curva vectorial.
Elemento SVG textPath
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>
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.
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.
- 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.
¡Aspose.SVG te propone convertir texto a vector en poco tiempo y con calidad y resolución profesional! La aplicación web Text to Vector está destinada a reemplazar elementos de texto en archivos SVG con gráficos vectoriales. En el texto SVG vectorizado, todos los glifos de fuente se reemplazan con una combinación de elementos gráficos. Dicho texto se convierte en un dibujo vectorial y no se puede editar.
