Como agregar y curvar texto en SVG

Guia practica

SVG permite texto real (seleccionable y buscable) con la etiqueta <text>, e incluso texto que sigue una curva.

Texto basico

<text x="20" y="40" font-size="24" fill="#e6e6ee">Hola SVG</text>

x,y es la posicion de la linea base del texto.

Alineacion

Con text-anchor="middle" centras el texto respecto a x (tambien start y end).

Partes con estilo: tspan

<text>svg<tspan fill="#6c8cff">desk</tspan></text>

tspan permite colorear o mover partes del texto.

Texto sobre una curva (textPath)

<defs><path id="curva" d="M 10 80 C 40 10 160 10 190 80"/></defs> <text><textPath href="#curva">Texto en curva</textPath></text>

El texto sigue el trazo del path referenciado.

Fuentes: cuidado con la portabilidad

Si usas una fuente que el visitante no tiene, el texto se vera con otra. Para logos y graficos que deben verse identicos, conviene convertir el texto a trazos (path). Asi deja de ser texto editable pero se ve igual en todos lados.

Convertir texto a curvas

Tras convertirlo a path, puedes ajustarlo en el modo nodo de svgdesk como cualquier forma.

Abrir el editor

Sigue leyendo