Alineación vertical de texto SVG: centra una etiqueta

Para una etiqueta SVG horizontal, y coloca la línea base seleccionada. No sitúa la parte superior de las letras en esa coordenada. Empieza con dominant-baseline="middle" al colocar una etiqueta latina breve alrededor de una guía horizontal e inspecciona el resultado con la fuente real. Utiliza text-anchor="middle" para centrar horizontalmente el texto alrededor de su coordenada x.

Una etiqueta puede seguir pareciendo alta o baja junto a un emblema. middle y central utilizan líneas base distintas de la fuente, mientras que el centrado visual depende de las formas de la palabra. Decide si la composición necesita una línea base compartida, un cuadro de texto centrado o un ajuste óptico antes de añadir un desplazamiento.

Elige el objetivo de alineación

El mismo y="100" puede producir posiciones diferentes de las letras:

Las definiciones de líneas base del W3C distinguen middle de central. Ninguna definición promete centrar los contornos pintados de todas las palabras. También importan las tablas de líneas base de la fuente y las heurísticas del renderizador, como explica la referencia de dominant-baseline de MDN.

Para texto horizontal corriente, text-anchor="middle" aborda el otro eje. Alinea el fragmento de texto alrededor de la posición horizontal indicada; no proporciona centrado vertical. Consulta la referencia de text-anchor para entender su relación con los fragmentos de texto.

Compara un emblema con una etiqueta de texto editable

Guarda este ejemplo completo como baseline-example.svg y ábrelo en un navegador. El anillo es geometría original; Agyp es una cadena de prueba con un ascendente y descendentes. La línea roja marca y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Cambia solo dominant-baseline a alphabetic y después a central. Mantén fijas las coordenadas, el tamaño de fuente y las palabras. Después compara una segunda fuente disponible. Cambiar varios ajustes juntos dificulta identificar cuál movió la etiqueta.

Renderizamos los tres valores con copias cargadas de Arial y Times New Roman. Cada panel utiliza las mismas coordenadas SVG y el anillo original. Los rectángulos verdes muestran el resultado de getBBox() del navegador para el texto editable.

Los ejemplos alphabetic quedan más altos respecto a la línea central del anillo. Los ejemplos middle bajan, mientras que central coloca los cuadros indicados cerca de la guía. Las medidas impresas bajo cada muestra corresponden a esos archivos de fuente y a ese renderizado del navegador. No son desplazamientos que copiar en otro diseño.

Nuestros archivos de fuente se cargaron antes de medir. Tu SVG exportado puede elegir una fuente alternativa cuando la solicitada no esté disponible; resuelve esa dependencia antes de evaluar la alineación. La guía de cambios de fuente SVG explica cómo comprobar la tipografía real y conservar una copia de entrega.

Un cuadro de texto centrado puede seguir pareciendo desigual

Los límites del texto SVG no son necesariamente el rectángulo más pequeño alrededor de la tinta visible. Las reglas de cuadros delimitadores SVG utilizan celdas de glifos y el ascenso y descenso de la fuente para los cálculos del texto. Un rectángulo alrededor de esas celdas puede incluir espacio que ninguna letra pinta.

Esa distinción importa con etiquetas como Agyp: la g, la y y la p descienden bajo la línea base alfabética. Una etiqueta de mayúsculas tiene una distribución visual diferente. Durante la alineación deben estar presentes la fuente prevista y las palabras reales.

Para una fila de etiquetas que deban leerse sobre una línea, conserva una línea base alfabética compartida. Desplazar cada palabra individualmente hasta que su forma visible parezca centrada puede hacer desigual la fila.

Para una única composición de emblema y texto, compara la etiqueta al tamaño final y ajústala visualmente después de elegir una línea base. Si la composición requiere específicamente alineación por contornos de letras, utiliza un duplicado convertido en contornos en tu editor para inspeccionar esa geometría, conservando el texto editable en el original. Trata los límites de contornos y el ajuste óptico como decisiones independientes.

Centra el cuadro de texto SVG medido cuando ese sea el objetivo

Para un elemento <text> sencillo, sin transformar y de una línea, calcula el desplazamiento desde el centro del cuadro indicado hasta el objetivo. Ejecuta esto en el documento del ejemplo después de que la fuente esté lista:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

El cálculo alinea el cuadro de texto indicado con targetY. No calcula el equilibrio visual ni elimina el espacio sin usar de las celdas de glifos de la fuente. Vuelve a medir después de cambiar el texto, la fuente, el peso o el tamaño.

document.fonts.ready espera a la carga de fuentes y al trabajo asociado de disposición. No demuestra que la fuente prevista se haya proporcionado correctamente; comprueba también el recurso de fuente o la información de fuentes renderizadas del navegador.

Este fragmento supone un valor de y, ninguna posición por carácter, ningún desplazamiento dy y ningún grupo de texto transformado. getBBox() devuelve un cuadro SVG local. Un objetivo en otro sistema de coordenadas requiere un mapeo; utiliza el proceso de límites SVG antes de mezclar píxeles de pantalla y unidades SVG.

Resuelve ajustes contradictorios antes de añadir más desplazamientos

Inspecciona el texto y sus grupos padre. Un dy sobrante, un <tspan> anidado o una transformación pueden alterar la colocación que intentas diagnosticar. Elimina un ajuste sospechoso cada vez en una copia y compara el resultado.

Comprueba también los estilos de la página. CSS puede sustituir el atributo de presentación dominant-baseline. Si cambiar el atributo no tiene efecto visible, inspecciona el valor calculado antes de añadir una segunda corrección.

alignment-baseline aborda cómo se alinea la línea base de un elemento con la correspondiente de su padre. No es un sinónimo general de «centrar esta etiqueta en el SVG». La referencia de alignment-baseline de MDN también identifica límites de compatibilidad de navegadores. Para esta etiqueta independiente, centra la prueba en dominant-baseline y después verifica el destino real de exportación.

Este ejemplo aborda texto latino horizontal en un navegador. Las etiquetas curvas necesitan otra comprobación de colocación; la guía de texto SVG sobre un trazado distingue las letras de su curva guía. Otras escrituras y el texto vertical necesitan sus propias decisiones de línea base.

Mantén la marca separada de las letras

Si ya tienes un emblema vectorial limpio, consérvalo y reconstruye la etiqueta como texto editable. Mover la etiqueta o elegir una fuente no requiere vectorización.

Cuando el emblema solo existe en un PNG o JPG, el vectorizador de logotipos de PerfectVector puede preparar geometría candidata para esa parte del diseño. Comprueba su contorno y aberturas y después colócalo junto a texto recién escrito utilizando la línea base elegida. La vectorización no identifica la fuente original ni restaura tipografía editable desde una imagen rasterizada.

Para letras exactas de marca, utiliza la fuente y los recursos vectoriales originales cuando estén disponibles o reconstruye las letras deliberadamente. La guía de vectorización de logotipos ayuda a elegir entre conservar, trazar y redibujar el original.

Antes de entregar, comprueba las palabras y la fuente reales, inspecciona la composición al tamaño final y vuelve a abrir el SVG exportado en su destino. Conserva el original editable si la copia de entrega utiliza texto convertido en contornos.

Preguntas frecuentes

¿Es dominant-baseline="middle" lo mismo que central? No. Middle utiliza una línea base relacionada con la altura de x, mientras que central utiliza la línea base central de la fuente asociada al cuadro em. Sus posiciones pueden diferir y ninguna garantiza el centrado óptico de todas las palabras.

¿Centra text-anchor="middle" el texto SVG verticalmente? Para texto horizontal corriente, text-anchor controla la colocación horizontal alrededor de la coordenada x. Elige por separado la línea base vertical con dominant-baseline y después inspecciona el resultado con la fuente prevista.

¿Puede getBBox centrar exactamente las letras visibles? Puede centrar el cuadro de texto SVG indicado por el navegador. Los límites del texto pueden incluir espacio de celdas de glifos más allá de las letras pintadas, por lo que ese cálculo no garantiza centrado óptico ni alineación ajustada de contornos.

Fuentes

1. W3C — Alineación de líneas base SVG — define las líneas base alphabetic, middle y central.
2. MDN — dominant-baseline — explica tablas de líneas base, heurísticas de fuentes y prioridad de CSS.
3. MDN — text-anchor — documenta el anclaje de fragmentos de texto alrededor de una posición indicada.
4. W3C — Cuadros delimitadores SVG — describe el modelo de celdas de glifos utilizado para los límites del texto.
5. MDN — FontFaceSet.ready — define cuándo han finalizado la carga de fuentes y la disposición.
6. MDN — getBBox — documenta los límites locales SVG y las exclusiones de transformaciones.
7. MDN — alignment-baseline — explica la alineación con la línea base del padre y los límites de compatibilidad de navegadores.

Si tu logotipo reconstruido aún necesita un emblema editable, prepara una alternativa SVG con PerfectVector, inspecciona el contorno recuperado y después combínalo con letras editables y comprueba la alineación en el destino final.