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’.

	<text x="5" y="5" font-family="Verdana" font-size="20" fill="skyblue">
		Texto de prueba Á É Í Ó Ú
	</text>
	<text x="250" y="5" font-family="Verdana" font-size="20" alignment-baseline="text-before-edge" fill="skyblue">
		Texto de prueba Á É Í Ó Ú
	</text>

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

	<text x="5,20,40,65,95,130,170,215,265,320" y="5" font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
		aaaaaaaaaa
	</text>

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.

	<text font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
		Texto de color <tspan dy="-10" alignment-baseline="text-before-edge" fill="red" >rojo</tspan> entre azul
	</text>

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’.

	<rect x="5" y="5" width="570" height="25" fill="white" stroke="grey" stroke-width="1"/>
	<text x="5" y="0" textLength="570" font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
		Texto de prueba para textLength
	</text>

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

  <text x="5" y="5" font-family="Verdana" font-size="25" fill="skyblue">
  	<tspan alignment-baseline="text-before-edge">
      Texto de prueba para 1 para x e y
    </tspan>
    <tspan x="5" y="35" alignment-baseline="text-before-edge">
    	Texto de prueba para 2 para x e y
    </tspan>
  </text>

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.

  <text x="5" y="5" rotate="-10" font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
    	Texto de prueba para rotación
  </text>
  <text x="5" y="35" rotate="-20,-10,0,10,20,30,40,50" font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
    	Texto de <tspan rotate="0" fill="red" alignment-baseline="text-before-edge">prueba</tspan> para rotación
  </text>

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

  <defs>
  	<text id="ReferencedText"  >
    	Texto referenciado
  	</text>
  </defs>
  <text x="5" y="5" font-family="Verdana" font-size="25" alignment-baseline="text-before-edge" fill="skyblue">
  	Texto no referenciado.
    <tref xlink:href="#ReferencedText" alignment-baseline="text-before-edge" fill="red" />
  </text>

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’.

	<path x="5" y="5" id="MyPath" fill="none" d="M5,25c0,0,46.979,22.148,88.59,28.859s93.301-18.569,125.503-19.463c48.322-1.342,71.56,20.371,97.315,20.564c44.295,0.332,71.141-23.249,97.986-24.591c34.212-1.71,57.718,22.148,70.47,22.148s36.242-19.463,52.35-20.134" stroke="red" />
	<text x="5" y="5" font-family="Verdana" font-size="20" alignment-baseline="text-before-edge" fill="skyblue">
		<textPath xlink:href="#MyPath">
			Texto en trazado, texto en trazado, texto en trazado, texto en trazado, texto en trazado, texto en trazado.
		</textPath>
	</text>