Texto SVG sobre trazado: reconstruye letras editables de insignias

Para colocar texto SVG sobre un trazado, define un trazado con ID, referéncialo desde un <textPath> dentro de <text> y escribe las palabras entre etiquetas. Para centrar, combina startOffset="50%" y text-anchor="middle". Conserva el emblema en un grupo separado para cambiar las palabras sin reconstruir la ilustración.

La separación sirve al restaurar una insignia de club, marca de tienda o logotipo de evento. Puedes necesitar trazados para el emblema central y seguir corrigiendo una fecha o nombre. Trazar toda la insignia produce formas de letras, no una cadena editable. Reconstruye la tipografía como texto editable si las palabras deben seguir editables.

Para letras horizontales junto a un emblema, ajusta una etiqueta SVG recta con textLength y compara el espaciado antes de modificar proporciones de glifos.

Empieza con tres partes separadas

Una insignia necesita emblema, trazado guía y texto que lo siga. La guía controla la posición; no tiene que verse en el diseño terminado. La referencia textPath de MDN documenta la conexión href.

Para el ejemplo dibujamos un pino sencillo y una guía semicircular en código SVG. Son demostraciones originales, no resultados de PerfectVector. La insignia dice PINE TRAIL CLUB; las letras siguen siendo una cadena de texto durante la construcción.

Construye la insignia editable

Guarda como badge.svg y abre en un navegador. Conserva el archivo como maestro editable. Si el formato es nuevo para ti, la guía de archivos SVG explica diferencias entre texto, trazados e imágenes incrustadas.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

El trazado empieza en (70, 215) y sigue un semicírculo superior hasta (330, 215). Su radio es 130 unidades. Ponerlo en <defs> permite referenciarlo sin dibujar un trazo visible. El círculo exterior claro es una forma pintada separada.

Cambia PINE TRAIL CLUB por tu nombre corto, guarda y recarga. El árbol debe permanecer fijo y las palabras seguir la misma guía. Un nombre largo necesita revisar el ajuste; centrar no hace caber cualquier texto.

Centra con desplazamiento y anclaje

startOffset="50%" pone la posición de referencia a mitad del trazado. text-anchor="middle" alinea el centro del texto en ella. Uno selecciona una posición de la curva y el otro qué parte del texto queda allí. Las referencias de startOffset y text-anchor describen los controles.

Prueba cambiar solo text-anchor a start. Con este texto de izquierda a derecha, las palabras empiezan a mitad y continúan al extremo derecho. En nuestra prueba de navegador, desplazó las letras al lado derecho y dejó parte de la frase fuera del arco útil. Restaura middle antes de cambiar tamaño.

Para una insignia simétrica, inspecciona visualmente tras centrar matemáticamente. Las letras tienen formas y espacios laterales distintos; un avance centrado aún puede necesitar un pequeño ajuste óptico. Hazlo deliberadamente en vez de cambiar coordenadas inconexas hasta aproximarte.

Comprueba la dirección antes de mover texto

Invierte este arco superior sustituyendo d por:

d="M330 215 A130 130 0 0 0 70 215"

Se intercambian inicio y fin y cambia el indicador de barrido del arco. Para ver ambos indicadores, consulta las cuatro combinaciones de indicadores de arco SVG. La curva queda en el mismo lugar, pero el texto la sigue en sentido contrario. En nuestra prueba cambió la orientación. Restaura el original para letras derechas en la parte superior.

Invertir el trazado no es invertir las palabras ni establecer la dirección de escritura de un idioma. Conserva las palabras intactas. La especificación de composición de texto SVG explica cómo colocar glifos sobre un trazado. Para una línea inferior, crea y prueba otra guía en lugar de mover el texto superior hasta cruzar el emblema.

Elige fuente antes del espaciado final

El ejemplo pide Georgia y después una serif genérica. Eso no incrusta una fuente. El renderizador elige una disponible de la lista, como explica la referencia font-family de MDN.

En nuestra demostración Chromium, cambiar las mismas palabras de Georgia, serif a Arial, sans-serif cambió el avance medido del texto. Arco y emblema no cambiaron. Lo importante es el espacio ocupado y la apariencia, no un ancho concreto que otra computadora puede renderizar distinto.

Para una insignia real, decide fuente y peso antes de tamaño o espaciado. Reabre después en su entorno de uso. Si cambia la fuente, usa la guía de problemas de fuentes SVG para aislar sustitución o importación.

Si las palabras se salen, prueba una frase más corta, menor tamaño o guía más amplia. Comprueba toda la insignia tras cada cambio. Aumentar el radio puede acercar letras al borde; reducir tamaño puede dificultar leer una insignia impresa pequeña. Evita estirar letras para llenar un espacio salvo que sea intencional.

Recupera solo la ilustración que necesita trazarse

Si el emblema solo existe dentro de PNG o JPG, separa recuperación y tipografía. Usa una copia que aísle el emblema lo mejor posible. Conserva el original completo como referencia al reconstruir.

Vectoriza el emblema con PerfectVector y compara silueta, huecos interiores y detalles. Usa el SVG aceptado en el grupo y reconstruye las palabras aparte con la fuente prevista. PerfectVector crea trazados desde la imagen; el proceso no depende de OCR, identificación de fuentes ni reconstrucción automática de texto curvo editable.

Reutiliza el emblema vectorial original si existe. Si las letras están dibujadas a mano y sus irregularidades importan, sigue el flujo de lettering a vector en vez de sustituirlas por una fuente. La guía de vectorización de logotipos explica cómo elegir entre trazar, escribir de nuevo y reparar manualmente.

El árbol sencillo evita una complicación: un emblema existente puede usar otro sistema de coordenadas o transformaciones. Escala y coloca ese grupo dentro del viewBox y comprueba con texto visible. No cambies la guía de letras para compensar un emblema mal colocado.

Conserva un maestro editable y crea la copia de entrega

El texto editable es el maestro útil si cambian nombres, fechas o palabras. Para una insignia fija enviada a otro editor o herramienta, los contornos eliminan la necesidad de reproducir los glifos de la fuente. Las palabras se vuelven trazados y pierden edición normal de texto.

En las opciones de guardado SVG de Illustrator, Convert To Outlines convierte texto en trazados. Adobe advierte también que el texto sobre trazado exportado puede verse distinto en visores SVG. Son razones para inspeccionar la copia en el destino, no garantías de que toda herramienta reproduzca la insignia. Consulta la documentación de guardado SVG de Adobe.

Sigue esta secuencia:

1. Guarda el maestro de texto editable antes de convertir.
2. Confirma palabras, fuente, dirección, centrado y espaciado.
3. Crea una copia de entrega y convierte su texto en contornos.
4. Reábrela y compara letras, contraformas, huecos y emblema.
5. Comprueba al tamaño final en la aplicación receptora.

Crear contornos fija la apariencia activa. Si está activa una fuente de reserva incorrecta, fijas letras incorrectas. Para una imagen web, conserva también un nombre accesible útil; las formas de letras no contienen por sí solas la cadena original.

Preguntas frecuentes

¿Por qué no está centrado mi texto SVG sobre el trazado? Usa startOffset="50%" con text-anchor="middle" para este ejemplo. Un desplazamiento de 50% con anclaje start empieza la frase a mitad de la guía. Comprueba también la forma de la guía y que quepan todas las palabras.

¿Por qué está el texto al revés? Comprueba la dirección de la guía. El texto sigue el trazado tal como se dibuja, así que invertirlo puede cambiar la orientación. Prueba la dirección antes de mover texto o cambiar las palabras.

¿Vectorizar una insignia crea texto curvo editable? Reconstruye las formas visibles de letras como ilustración. Para palabras editables, crea el texto por separado con la fuente prevista y una guía textPath. Conserva el maestro con texto editable antes de hacer una entrega con contornos.

Fuentes

1. MDN — textPath — Conectar texto editable a un trazado referenciado.
2. MDN — startOffset — Colocar texto por la guía.
3. MDN — text-anchor — Alinear respecto a la posición de referencia.
4. W3C — Texto SVG 2 — Colocación de glifos y composición sobre trazados.
5. MDN — font-family — Fuentes disponibles y selección de familias de reserva.
6. Adobe — Guardar ilustraciones en Illustrator — Contornos de texto SVG y límites de exportación sobre trazado.

Construye las letras alrededor del emblema aprobado y conserva las palabras editables hasta terminar. Si el emblema está atrapado en una imagen rasterizada, recupera sus trazados vectoriales, inspecciona detalles y usa la ilustración aceptada en el maestro.