SVG: Cómo trabajar con texto y fuente

El formato SVG no solo es útil para la visualización de formas basadas en vectores. También puede colocar y editar la fuente en él. En contraste con el etiquetado semántico de fuentes en HTML, hay algunas cosas particulares que debe tener en cuenta. También debe conocer algunas diferencias con el marcado a través de CSS.

Marcar fuentes a través de SVG y editar con CSS

Mientras que HTML conoce varios elementos semánticos que le permiten marcar texto como título, párrafo, lista o cuadrícula, el formato SVG solo conoce el elemento ««. Puede colocar y editar la fuente dentro de él.

<text>Lorem ipsum.</text>

El diseño del texto se hace tal y como está en HTML usando CSS. Puede integrar fuentes web y definir el tipo de fuente, el tamaño de fuente y la orientación. Mientras que la fuente y su tamaño se especifican con las propiedades conocidas „font-family“ y „font-size“, existe la propiedad „text-anchor“ para la orientación. Conoce los valores «inicio» para texto alineado a la izquierda, «final» para texto alineado a la derecha y «medio» para texto centrado.

text {
  font-family: "Source Sans";
  font-size: 30px;
  text-anchor: middle;
}

Como SVG no conoce el texto multilínea clásico, no es necesario configurar el espaciado entre líneas. Como cualquier otro elemento SVG, el elemento „“ se coloca utilizando las coordenadas „x“ e „y“. El valor „y“ solo define la línea del cuerpo de un texto. Cuando se asigna el valor 0 al rasgo „y“, el texto desaparece del borde superior de la imagen.

SVG: creación de texto multilínea

La sintaxis SVG no reconoce un elemento como „
“, lo que le permitiría agregar un ajuste de línea dentro de un texto. Sin embargo, existe el elemento „“, que puede usar para dividir un texto y organizarlo individualmente.

<text>
  <tspan>Lorem ipsum.</tspan>
  <tspan>Lorem ipsum.</tspan>
</text>

De forma predeterminada, los elementos „“ se colocan uno al lado del otro, al igual que el elemento „“ en HTML. La ubicación de los elementos SVG se realiza con los atributos „x“ e „y“. Sin embargo, estos atributos provocan una ubicación absoluta de los elementos. Eso significa que los elementos „“ no se colocan en relación con el elemento „“ superior ni en relación con otros elementos „“.

Disposición estándar de elementos „“

Sin embargo, para „“, los atributos individuales „dx“ y „dy“ están disponibles. Estos son responsables de una ubicación relativa al elemento „“ previamente marcado.

Los elementos „“ se han colocado a través de „dx“ y „dy“

El uso de „dy“ le permite definir el espacio entre líneas entre elementos individuales „“. Como „dx“ también es relativo al elemento „“ previamente definido, debe usar „x“ para la ubicación vertical.

<text>
  <tspan x="0" dy="0">Lorem ipsum.</tspan>
  <tspan x="0" dy="36px">Lorem ipsum.</tspan>
  <tspan x="0" dy="36px">Lorem ipsum.</tspan>
</text>

Este ejemplo hace que todas las líneas de texto comiencen en la coordenada x 0 y se muevan hacia abajo 36 píxeles por línea en el eje y.

Elementos „“, que se colocan usando „x“ y „dy“

SVG: Texto siguiendo la ruta

Una ventaja del formato SVG sobre HTML es que SVG le permite alinear un texto en una ruta. Por lo tanto, puede colocar un texto en una ruta circular, por ejemplo. Para ello, debe utilizar el elemento „“.

Primero, debe definir una ruta para orientar el texto. Es necesario crear esta ruta a través del elemento „“. Incluso si desea alinear el texto en forma de círculo, no puede marcar este círculo con „“. „“, como su nombre ya lo indica, solo le permite marcar elementos de ruta.

<defs>
  <path id="textpath" cd="M200,125c0,41.4-33.6,75-75,75s-75-33.6-75-75s33.6-75…" />
</defs>

En el ejemplo, estamos dibujando un círculo usando „“. Como el círculo en sí no debería estar visible, puede marcarlo dentro del área „“. También debe asignar una ID a la ruta.

Texto alineado en un camino circular

Posteriormente, el elemento „“ se coloca entre el elemento „“ y el elemento „“. La ruta se asigna de acuerdo con el ID.

<text>
  <textPath xlink:href="#textpfad" startOffset="50%">
    <tspan >Lorem ipsum.</tspan>
  </textPath>
</text>

Usted decide en qué posición de la ruta debe comenzar el texto usando el atributo „startOffset“. Es posible tanto la indicación absoluta como la indicación en porcentaje.

Incrustar fuentes en SVG

Además de la opción de integrar fuentes web a través de CSS, también puede incrustar fuentes en SVG. Para ello, existen los elementos „“ y „“. „“ se utiliza para definir una fuente. Cada símbolo de la fuente está marcado con „“. El contorno de la fuente se deposita como un camino.

Cuando crea archivos SVG en Illustrator, también puede incrustar fuentes de esta manera. Esto resulta útil cuando necesita un archivo SVG que funcione sin referencia a datos externos. Dado que las fuentes incrustadas generan archivos mucho más grandes que las fuentes web, es preferible que las incrustes a través de las hojas de estilo.

En general, cuando se trata de SVG, debe mantener los archivos lo más pequeños posible, especialmente teniendo en cuenta la web móvil.

(dpe)