Cómo Colocar Texto en un Trazado SVG: Guía Completa con Ejemplos Prácticos

Descubre cómo colocar texto en un trazado SVG con . Aprende a crear efectos curvos y circulares con ejemplos prácticos y consejos para diseño vectorial.

Colocar Texto en un Trazado SVG
Tutoriales SVG • Publicado por José Manuel Mateos Terrén • 2025-06-05

Cómo Colocar Texto en un Trazado SVG: Incluyendo una Animación Básica

La etiqueta <textPath> permite dibujar texto a lo largo de un trazado (<path>), como líneas, curvas o círculos, ideal para logotipos curvos o sellos. Aunque este tutorial se centra en <textPath>, incluimos un ejemplo con <animate> para mostrar una animación básica del texto, que exploraremos más a fondo en futuros artículos. Veamos los ejemplos con su código y explicaciones.

Ejemplo 1: Texto en una Curva Cuadrática

Este ejemplo muestra un texto siguiendo una curva cuadrática definida por un <path>. 

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path id="curva" d="M 50 150 Q 200 50 350 150" fill="none" stroke="black" />
  <text font-size="20" fill="blue">
    <textPath href="#curva">Texto en una curva</textPath>
  </text>
</svg>

Resultado visual:

Explicación de elementos:

  • <svg>: Contenedor SVG con width="400", height="200", viewBox="0 0 400 200" para escalabilidad, y xmlns="http://www.w3.org/2000/svg" para el espacio de nombres.
  • <path>: Define una curva cuadrática con id="curva", d="M 50 150 Q 200 50 350 150", sin relleno (fill="none") y contorno negro (stroke="black").
  • <text>: Contenedor del texto con font-size="20" y fill="blue".
  • <textPath>: Vincula el texto al trazado con href="#curva", renderizando "Texto en una curva".

Ejemplo 2: Texto en un Trazado Circular

Este ejemplo usa un <path> circular para un sello, con atributos nuevos en <textPath>. 

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <path id="circulo" d="M 200 200 m -100 0 a 100 100 0 1 0 200 0 a 100 100 0 1 0 -200 0" fill="none" stroke="black" />
  <text font-size="20" fill="purple">
    <textPath href="#circulo" startOffset="25%" side="left">Sello Circular CreadorLogos</textPath>
  </text>
</svg>

Resultado visual:

Novedades:

  • Circular <path>: d="M 200 200 m -100 0 a 100 100 0 1 0 200 0 a 100 100 0 1 0 -200 0" crea un círculo de radio 100.
  • <textPath> atributos:
    • startOffset="25%": Desplaza el texto al 25% del trazado.
    • side="left".
  • <text> color: fill="purple".

Ejemplo 3: Texto en un Trazado con Esquinas

Aquí, el texto siguiendo un <path> con líneas quebradas. 

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path id="esquinas" d="M 50 150 L 150 50 L 250 150 L 350 50" fill="none" stroke="black" />
  <text font-size="20" fill="red">
    <textPath href="#esquinas">Texto en trazado con esquinas</textPath>
  </text>
</svg>

Resultado visual:

Novedades:

  • Trazado con esquinas: d="M 50 150 L 150 50 L 250 150 L 350 50" usa L para líneas rectas.
  • <text>color: fill="red".

Ejemplo 4: Texto Estilizado en una Curva

Este ejemplo usa CSS en un <style> para estilizar el texto. 

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .texto-curva {
      font-size: 24px;
      font-family: Arial, sans-serif;
      fill: green;
      font-style: italic;
      font-weight: bold;
    }
  </style>
  <path id="curva" d="M 50 150 Q 200 50 350 150" fill="none" stroke="black" />
  <text class="texto-curva">
    <textPath href="#curva">Texto estilizado en curva</textPath>
  </text>
</svg>

Resultado visual:

Novedades:

  • <style>: Estilos CSS para .texto-curva con font-size: 24px, font-family: Arial, sans-serif, fill="green", font-style: italic, font-weight: bold.
  • <text> clase: class="texto-curva".

Ejemplo 5: Texto Animado en una Curva

Aunque las animaciones no son el foco de este tutorial, incluimos un ejemplo con <animate> para mover el texto a lo largo de un <path>, como adelanto de futuros tutoriales. 

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path id="curva" d="M 50 150 Q 200 50 350 150" fill="none" stroke="black" />
  <text font-size="20" fill="blue">
    <textPath href="#curva">
      Texto animado en curva
      <animate attributeName="startOffset" from="0%" to="100%" dur="5s" repeatCount="indefinite" />
    </textPath>
  </text>
</svg>

Resultado visual:

Novedades:

  • <animate>: Anima startOffset de <textPath> desde 0% a 100% en 5 segundos, repitiéndose (repeatCount="indefinite").

Ejemplo 6: Texto Accesible en una Curva

Este ejemplo añade accesibilidad con <title> y <desc>. 

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="accessible-title">
  <title id="accessible-title">Texto accesible en una curva</title>
  <desc>Un texto azul que sigue una curva cuadrática en un gráfico SVG accesible</desc>
  <path id="curva" d="M 50 150 Q 200 50 350 150" fill="none" stroke="black" />
  <text font-size="20" fill="blue">
    <textPath href="#curva">Texto accesible en curva</textPath>
  </text>
</svg>

Resultado visual:

Novedades:

  • <title>: Título accesible con id="accessible-title".
  • <desc>: Descripción para accesibilidad.
  • <svg> atributos: role="img" y aria-labelledby="accessible-title".

Propiedades Aplicables a <textPath>

La etiqueta en SVG permite vincular un texto a un trazado definido por un <path>, ofreciendo flexibilidad para crear diseños curvos o personalizados. A continuación, detallamos las propiedades y atributos clave que puedes aplicar a <textPath>, junto con explicaciones y un ejemplo práctico que combina varias de estas propiedades.

Atributos Principales de

  • href: Referencia al identificador del al que se vincula el texto. Usa el formato href="#id", donde id es el identificador del trazado. Es obligatorio para que funcione.
    Ejemplo: <textPath href="#curva"> vincula el texto al .
  • startOffset: Especifica el desplazamiento inicial del texto comienza en el trazado, expresado como un valor numérico (en unidades de coordenadas) o un porcentaje del largo total del camino. Útil para posicionar el texto.
    Ejemplo: startOffset="25%" inicia el texto en el 25% del trazado.
  • side (SVG2): Define en qué lado del trazado el texto se muestra ("left" o "right"). Nota: El soporte es limitado en navegadores más antiguos.
    Ejemplo: side="left" coloca el texto a la izquierda del trazado.
  • method: Controla cómo se ajusta el texto al trazado. Valores: align" (ajusta el texto para que se adapte al curvatura) o stretch (deforma el texto para llenar el trazado). Por defecto es align.
    Ejemplo: method="stretch" deforma el texto para que coincida con las distancias del camino.
  • spacing: Define el espaciado entre caracteres. Valores: auto (ajusta automáticamente) o exact (usa el espacio exacto definido). Por defecto es auto.
    Ejemplo: spacing="exact" respeta el espaciado definido en la fuente.
  • textLength: Especifica la longitud total del texto en unidades de coordenadas, forzando al navegador a ajustar el texto para que encaje en esa longitud.
    Ejemplo: textLength="200" estira o comprime el texto para que ocupe 200 unidades.
  • lengthAdjust: Define cómo se ajusta el texto cuando se usa textLength. Valores: spacing (ajusta el espaciado entre caracteres) o spacingAndGlyphs (ajusta tanto el espaciado como el tamaño de los glifos).
    Ejemplo: lengthAdjust="spacingAndGlyphs" escala los glifos para ajustarse.

Propiedades de Estilo Aplicables

Además de los atributos específicos, hereda propiedades de estilo de su elemento padre , como font-size, fill, font-family, font-weight, y otras. Estas propiedades se aplican mediante atributos de presentación o CSS dentro de un Texto estilizado en curva

Resultado visual:

Explicación del ejemplo:

  • href="#curva": Vincula el texto al trazado con id="curva".
  • startOffset="10%": Desplaza el texto al 10% del trazado.
  • textLength="250": Fuerza el texto a ocupar 250 unidades.
  • lengthAdjust="spacingAndGlyphs": Escala los glifos para ajustarse a textLength.
  • Estilos CSS: Aplica font-size: 20px, font-family: 'Helvetica', sans-serif, fill: teal, y font-weight: bold mediante la clase texto-estilizado.

Texto a Trazado en CreadorLogos.com

Si prefieres no programar SVG manualmente o usar software profesional, CreadorLogos.com ofrece una alternativa online rápida y fácil de usar. A continuación, te explicamos cómo crear un texto que recorra un trazado (<path>) en esta plataforma, ideal para logotipos o figuras SVG personalizadas. Todos los elementos en CreadorLogos son transformables y animables, como en un editor SVG.

Paso 1: Accede a CreadorLogos.com

Ingresa a https://creadorlogos.com/crear-logos.php. Te recomendamos usar el modo de navegación privada para asegurarte de que estás utilizando la última versión de la plataforma. Aquí podrás crear logotipos o figuras SVG añadiendo elementos personalizados.

Interfaz de CreadorLogos.com para crear un logotipo SVG con contorno

Paso 2: Crear el Texto y el Camino

Para que el texto recorra un camino, necesitas dos elementos: un texto y un <path>. Sigue estos pasos:

  1. Crear el texto: Usa el menú de la derecha para añadir un texto personalizado, como explicamos en nuestro tutorial anterior sobre cómo usar texto en SVG.
  2. Crear el camino: Selecciona una figura (círculo, curva, cuadrado, polígono, etc.) desde el menú de diseño. Asegúrate de:
    • Configurar la figura sin fondo (solo contorno) para que sea un <path>.
    • Activar la casilla "Crear Camino de Texto" para que la figura se convierta en un <path> en lugar de una primitiva como <rect> o <circle>.
    • Opcionalmente, especificar las medidas reales de ancho y largo de la figura si las conoces.

Insertar texto personalizado en SVG en CreadorLogos.com Texto SVG siguiendo el contorno de un circulo en CreadorLogos.com Texto SVG siguiendo el contorno de un cuadrado en CreadorLogos.com

Paso 3: Configurar Texto a Trazado

Texto SVG siguiendo el contorno de un circulo en CreadorLogos.com

En el menú "Texto a Trazado", selecciona la figura y el texto que deseas que recorra el camino. Puedes personalizar:

  • Tamaño de las letras: Ajusta el tamaño del texto.
  • Inicio del texto: Define el desplazamiento inicial (similar a startOffset).
  • Longitud del texto: Controla cuánto texto se muestra.
  • Orientación del texto: Elige la dirección o alineación.
  • Ocultar camino: Decide si el trazado es visible o no en el resultado final.

Texto SVG siguiendo el contorno de un cuadrado en CreadorLogos.com

Paso 4: Finalizar y Exportar

Confirma tus opciones, y el texto se adaptará automáticamente a la figura. Puedes:

  • Exportar como PNG con fondo transparente.
  • Guardar como SVG vectorial.
  • Ver el código SVG para repasarlo según este tutorial.
  • Probar con figuras como estrellas, arcos u otros trazados para experimentar.

Aquí tienes un ejemplo animado creado rápidamente en CreadorLogos.com:

Crea tu logotipo personalizado con texto rodeando una figura

¡Ahora es tu turno! Visita CreadorLogos.com, crea tu propio logotipo con texto en un trazado, y experimenta con animaciones y transformaciones. Investiga, prueba con diferentes formas y comparte tus creaciones. ¡Diseña algo único!

Artículos Relacionados