SVG textLength: ajusta una etiqueta sin deformar las letras

Utiliza textLength con lengthAdjust="spacing" cuando una etiqueta SVG necesite una longitud concreta y sea aceptable corregir ligeramente el espaciado. Las formas de los glifos no cambian. Si eliges spacingAndGlyphs, el renderizador puede estirar o comprimir las propias letras a lo largo de la línea de texto. Son los dos modos definidos por la especificación de texto SVG.

El detalle importante es el objetivo: textLength es una longitud solicitada, no un ancho máximo. Puede expandir una etiqueta corta con la misma facilidad con que comprime una larga. Tampoco crea saltos de línea.

Qué cambia cada ajuste

spacing es el valor predeterminado cuando estableces textLength sin un valor de lengthAdjust. La referencia de textLength de MDN explica cómo funcionan juntas la longitud solicitada y el modo de ajuste.

Para usos habituales de marca, aplica una pequeña corrección e inspecciónala. Una etiqueta que necesita una gran reducción normalmente merece un tamaño de fuente menor, un texto más corto o un espacio más ancho en la composición.

Una etiqueta corta y otra larga con el mismo objetivo

Dibujamos un emblema original de diamante y probamos dos etiquetas de texto editable en Abel Regular con un tamaño de fuente de 64 unidades SVG. Después de cargar la fuente prevista, el navegador midió PINE en unas 115.6 unidades y PINE & FIELD en 325.3 unidades. Ambas filas ajustadas solicitan 240 unidades.

El mismo objetivo, distinta tipografía

En la etiqueta corta, spacing crea huecos evidentes. En la larga, amontona las letras. Los glifos conservan sus formas en ambos casos, pero ninguno de los resultados encaja bien en este diseño. La fila spacingAndGlyphs alcanza la misma extensión cambiando visiblemente las proporciones de la tipografía.

Nuestra prueba utilizó Chrome 154 en el navegador integrado de la aplicación. Medimos la extensión horizontal desde la posición inicial del primer carácter hasta la posición final del último; cada fila ajustada alcanzó aproximadamente 240 unidades. El ejemplo utiliza una fuente latina y texto sencillo de izquierda a derecha. No es una prueba de compatibilidad entre renderizadores ni de varios idiomas.

Aplica una corrección moderada de longitud

Para la etiqueta larga anterior, 330 unidades están cerca de su longitud natural de 325.3 unidades. Es un ejemplo de calibración más útil que forzarla a bajar a 240.

Descarga Abel-Regular.ttf y su OFL.txt del directorio Abel de Google Fonts. Colócalos en una carpeta fonts junto a un archivo HTML que contenga este marcado y sirve esa carpeta localmente:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

El 330 sin unidad pertenece al sistema de coordenadas del SVG. Escalar todo el SVG en una página también escala esa distancia en pantalla. Mantén el emblema y el texto separados para que un cambio tipográfico no altere el dibujo.

La fuente sigue importando. textLength no convierte las letras en contornos ni incluye la tipografía en el archivo. Si las formas de las letras cambian en otro ordenador, diagnostica la sustitución de fuentes SVG antes de ajustar su espaciado.

Para un ancho máximo, mide primero

Si la regla es «dejar las etiquetas cortas como están y reducir solo las largas», añade tú esa condición. Este ejemplo reduce el tamaño de fuente, por lo que las letras conservan sus proporciones mientras se hacen más pequeñas en ambas dimensiones.

Coloca este script después del SVG anterior. Sustituye el ajuste fijo de 330 unidades por un máximo de 240 unidades:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready espera a que se estabilicen la carga de fuentes y el cálculo de disposición del documento. La llamada explícita a load() solicita primero la fuente utilizada en este ejemplo. Medir antes de que se cargue la fuente prevista puede hacer que la decisión de ajuste se base en letras de una fuente de sustitución.

Eliminamos textLength antes de llamar a getComputedTextLength(), porque esta rama necesita la longitud natural. En nuestra prueba del navegador, ese método seguía indicando la longitud natural de las filas spacing aunque había cambiado la extensión visual de principio a fin. No supongas que es una medida universal del ancho visual ajustado.

Con este script, la etiqueta corta PINE conserva su tamaño de 64 unidades. La etiqueta larga baja a unas 47.2 unidades. Revisa el resultado al tamaño real de visualización o impresión. Si las palabras reducidas son demasiado pequeñas, cambia la composición o el texto en lugar de seguir reduciendo indefinidamente. Ejecuta de nuevo el ajuste cuando cambien el texto o la configuración de fuente.

Comprueba la etiqueta final en su destino

Un ajuste numérico es solo una comprobación. Observa los pares de letras y el hueco entre emblema y texto al tamaño final. Mantén las etiquetas corrientes con su espaciado natural salvo que el diseño necesite calibración.

Para varias líneas, créalas y posiciónalas deliberadamente; textLength por sí solo no ofrece una política de saltos de línea. Para una insignia curva, utiliza el proceso independiente de texto SVG sobre un trazado. Esa guía controla la línea base que siguen las letras.

Conserva el original con texto editable y después abre el archivo de entrega en el editor, navegador o renderizador real que lo utilizará. La guía de archivos SVG explica por qué un SVG puede contener texto editable, trazados vectoriales o una imagen incrustada pese a compartir la misma extensión.

Si tu logotipo inicial solo existe como imagen rasterizada, el vectorizador de logotipos de PerfectVector puede recuperar el diseño del emblema. Inspecciona y limpia esos trazados y después vuelve a escribir las palabras como texto editable antes de ajustar la etiqueta. Una palabra trazada es geometría de trazados; textLength no puede modificar el espaciado de sus caracteres. Nuestra guía paso a paso de vectorización de logotipos explica esa recuperación del original.

Preguntas frecuentes

¿textLength solo reduce el texto demasiado largo? No. Solicita una longitud, por lo que también puede expandir texto que sea naturalmente más corto. Mide la etiqueta natural y aplica tu propia condición cuando necesites una regla de ancho máximo.

¿Qué valor de lengthAdjust conserva las formas de las letras? Utiliza spacing para ajustar el espaciado entre caracteres sin estirar los glifos. Un ajuste grande aún puede crear huecos incómodos o colisiones, así que inspecciona las letras al tamaño final.

¿Puede textLength ajustar letras trazadas desde un PNG? Actúa sobre texto SVG, no sobre trazados con forma de letra. Vuelve a escribir las palabras como texto editable si necesitas textLength o espaciado editable entre caracteres, manteniendo el emblema como diseño vectorial independiente.

Fuentes

1. W3C — Ajuste de texto de SVG 2 — los dos modos y su efecto en las formas y avances de los glifos.
2. MDN — textLength — longitud solicitada y modo predeterminado de espaciado.
3. MDN — FontFaceSet.ready — esperar a la carga de fuentes y al cálculo de disposición.
4. MDN — getComputedTextLength — medir un elemento de texto SVG.
5. Google Fonts — Abel — la fuente y la licencia utilizadas en la comparación original.

Recupera un emblema rasterizado con el vectorizador de logotipos si lo necesitas y después conserva las letras como un elemento de texto independiente. Compara la etiqueta final al tamaño normal antes de crear una copia de entrega con contornos o una exportación rasterizada.