SVG y el texto

Para usar texto en SVG se utiliza la etiqueta ‘text’ y se le puede aplicar los mismos efectos que a cualquier otro elemento de SVG. A continuación, he destacado las características que me parecen de mayor interés general pero para mayor detalle hay que ir a la especificación en http://www.w3.org/TR/SVG/text.html

Las principales características del funcionamiento del texto en SVG son:

• Los saltos de línea no se crean automáticamente sino que hay que crearlos mediante la etiqueta ‘tspan’ dentro de la etiqueta ‘text’ o mediante varias etiquetas ‘text’. Esto hace que en párrafos de varias líneas sea más recomendable el uso de html.
• Los textos pueden ir sobre una línea recta o amoldarse a un trazado.
• Los textos son accesibles.
• Se pueden usar fuentes mediante SVG fonts y webfonts.

En el siguiente ejemplo se muestra como el texto por defecto se alinea sobre la línea base de la fuente. Podemos modificar este comportamiento mediante el atributo ‘alignment-baseline’.

Las coordenadas x e y pueden tener 1 o varios valores separados por espacios o comas afectando a los caracteres del texto.

Podemos también variar la posición relativa del texto mediante los atributos ‘dx’ y ‘dy’ teniendo en cuenta que el siguiente texto mantendrá esta posición relativa.

Con’ textLength’ podemos ajustar el texto para que se adapte al tamaño de la caja dado por el valor del atributo que ajusta las propiedades ‘x’, ‘y’, ‘kerning’, ‘letter-spacing’, ‘word-spacing’, ‘dx’ y ‘dy’.

Para crear nuevas líneas en un mismo bloque de texto usaremos la etiqueta ‘tspan’ con los atributos ‘x’ e ‘y’.

El atributo ‘rotate’ nos permite rotar los caracteres y admite varios valores para rotar diferentes letras. Las etiquetas hijas heredan los valores pero podemos asignarles nuevos valores.

Podemos referenciar un texto mediante la etiqueta ‘tref’ de forma similar a como hacemos con los elementos gráficos con la etiqueta ‘use’.

El texto, además de ir en línea recta, lo puede seguir un trazado. Para ello, hay que colocar una etiqueta ‘textPath’ con un atributo ‘xlink:href’ con el ‘id’ del ‘path’.