Texto. SVG. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

En esta lección se tratan las etiquetas SVG que permiten incluir texto en un dibujo SVG y su principales atributos.

Texto: <text>

La etiqueta <text> dibuja texto.

Los atributos más habituales de <text> son:

x: abcisa de la esquina inferior izquierda del texto
y: ordenada de la esquina inferior izquierda del texto
font-family: tipo de letra
font-size: tamaño del tipo de letra
text-anchor: alineación del texto
transform: transformación geométrica del texto

Los atributos que suelen escribirse siempre son las coordenadas x e y que indican la posición del texto en el plano SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="120" height="100" viewBox="0 0 120 100">
  <text x="10" y="20">¡Hola, mundo!</text>
</svg>

Las coordenadas x e y en principio corresponden a la esquina inferior izquierda del texto, como muestra el siguiente ejemplo en el que se dibujan unos círculos en la misma posición que el texto:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="120" height="100" viewBox="0 0 120 100">
  <text x="10" y="20">Hola, mundo!</text>
  <circle cx="10" cy="20" r="2" fill="red" />
  <text x="10" y="50">Hola, mundo!</text>
  <circle cx="10" cy="50" r="2" fill="red" />
</svg>

El tamaño del tipo de letra font-size sigue la sintaxis y valores de las hojas de estilo CSS, excepto que aquí se puede omitir la unidad y entonces se interpreta como píxeles:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="10" y="20">¡Hola, mundo!</text>
  <text x="10" y="50" font-size="24">¡Hola, mundo!</text>
  <text x="10" y="80" font-size="24px">¡Hola, mundo!</text>
</svg>

El tipo de letra font-family sigue la sintaxis y valores de las hojas de estilo CSS:

svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="10" y="50" font-family="monospace" font-size="24">¡Hola, mundo!</text>
</svg>

Para poder utilizar fuentes web mediante la regla-arroba @import debemos definir un bloque <style> en un bloque de definiciones <defs>, El tipo de letra font-family es como el de las hojas de estilo CSS:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Mystery+Quest");
    </style>
  </defs>
  <text x="10" y="50" font-family="Mystery Quest" font-size="30">¡Hola, mundo!</text>
</svg>

El atributo text-anchor permite cambiar la posición de las coordenadas x e y con respecto al texto, lo que facilita alinear diferentes etiquetas <text> entre sí:

De forma predeterminada, las coordenadas x e y corresponden al extremo izquierdo del texto.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="10" y="20">¡Hola, mundo!</text>
  <text x="10" y="50">Texto SVG</text>
  <text x="10" y="80">Más texto SVG</text>
  <circle cx="10" cy="90" r="2" fill="red" />
</svg>

El valor start corresponde también al extremo izquierdo del texto.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="10" y="20" text-anchor="start">¡Hola, mundo!</text>
  <text x="10" y="50" text-anchor="start">Texto SVG</text>
  <text x="10" y="80" text-anchor="start">Más texto SVG</text>
  <circle cx="10" cy="90" r="2" fill="red" />
</svg>

El valor middle corresponde al centro del texto.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="100" y="20" text-anchor="middle">¡Hola, mundo!</text>
  <text x="100" y="50" text-anchor="middle">Texto SVG</text>
  <text x="100" y="80" text-anchor="middle">Más texto SVG</text>
  <circle cx="100" cy="90" r="2" fill="red" />
</svg>

El valor end corresponde al extremo derecho del texto.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <text x="180" y="20" text-anchor="end">¡Hola, mundo!</text>
  <text x="180" y="50" text-anchor="end">Texto SVG</text>
  <text x="180" y="80" text-anchor="end">Más texto SVG</text>
  <circle cx="180" cy="90" r="2" fill="red" />
</svg>

Caracteres Unicode en SVG

La etiqueta <text> puede incluir cualquier carácter Unicode mediante entidades numéricas, tanto en un documento html como en una imagen SVG.

<p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="50" height="50" viewBox="0 0 50 50">
    <text x="5" y="40" font-size="60" >&#xa9;</text>
  </svg>
</p>

<p>
  <img src="img-svg-entidad-numerica.svg" alt="Entidad numérica en imagen SVG" width="50" height="50">
</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="50" height="50" viewBox="0 0 50 50">
  <text x="5" y="40" font-size="60" >&#xa9;</text>
</svg>

La etiqueta <text> puede incluir cualquier carácter Unicode mediante entidades de carácter, pero sólo en un documento html, no en una imagen SVG.

<p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="50" height="50" viewBox="0 0 50 50">
    <text x="5" y="40" font-size="60" >&copy;</text>
  </svg>
</p>

<p>
  <img src="img-svg-entidad-numerica.svg" alt="Entidad de carácter en imagen SVG" width="50" height="50">
</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="50" height="50" viewBox="0 0 50 50">
  <text x="5" y="40" font-size="60" >&copy;</text>
</svg>