Texto foreignObject en SVG: corrige las etiquetas que faltan al exportar

Si las formas de un SVG sobreviven a la exportación, pero sus etiquetas desaparecen, busca <foreignObject> en la etiqueta que falta. Puede contener HTML que un navegador dispone correctamente, pero que el renderizador de destino no admite. Sustituye la etiqueta afectada por <text> y <tspan> nativos de SVG o elige un método de exportación que conserve su apariencia.

Abre primero el archivo exportado exacto en un navegador. Si la etiqueta también falta allí, comprueba su espacio de nombres, sus límites y sus estilos antes de culpar al importador. Conserva la ilustración original: no hace falta vectorizar toda la imagen cuando solo ha fallado el contenedor de texto.

Por qué la imagen se conserva mientras su etiqueta desaparece

Un SVG puede mezclar formas ordinarias con contenido de otro espacio de nombres XML. Una montaña dibujada con <path> y un sol dibujado con <circle> son SVG nativo. Un párrafo dentro de <foreignObject> puede ser HTML, con sus propias reglas de ajuste de líneas y disposición. La referencia de foreignObject de MDN describe esa diferencia.

Por tanto, la extensión .svg no promete que todas las partes utilicen las mismas funciones de renderizado. Un destino puede dibujar la montaña y el sol mientras omite el párrafo HTML. Cambiar el color del texto o aumentar la resolución de exportación no añade compatibilidad con HTML a ese renderizador.

Una prueba pequeña: cambia solo la etiqueta

Creamos una tarjeta SVG de 480 × 240 con un trazado, un círculo y las palabras «Keep artwork and labels separate». El primer archivo utiliza una etiqueta HTML. El segundo conserva las mismas formas y sustituye únicamente la etiqueta por texto nativo y tres líneas explícitas.

En nuestra vista previa del navegador aparecieron ambas etiquetas. Renderizar los mismos archivos a PNG con sharp 0.34.4, utilizando su librsvg 2.61.1 incluido, produjo el resultado siguiente: la etiqueta HTML desapareció mientras que la nativa permaneció. La salida con etiqueta HTML también era idéntica píxel a píxel a un archivo de control sin la etiqueta. Es una prueba de estos archivos y esta versión del renderizador, no un veredicto de compatibilidad para todos los editores.

El archivo original es lo bastante pequeño para reproducirlo. Guarda esto como html-label.svg y ábrelo en un navegador:

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

Para el segundo archivo, sustituye todo el elemento foreignObject por esta etiqueta y guárdalo como native-label.svg:

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

El valor x inicia cada línea en la misma posición horizontal. Los valores dy desplazan hacia abajo las líneas siguientes. Esto renuncia deliberadamente al ajuste automático de líneas de HTML: el autor elige los saltos y verifica que encajen. MDN documenta el posicionamiento de tspan, y librsvg enumera sus elementos SVG compatibles, incluidos text y tspan.

Abre ambos archivos mediante el método real de entrega, como tu conversor de imágenes o generador de PDF. Compara el resultado guardado, no solo la vista previa del original. Usar las mismas dimensiones del ejemplo no garantiza las mismas fuentes en otra máquina.

Si la etiqueta también falta en el navegador

Comprueba el archivo .svg serializado, no solo la página que lo creó. Un SVG en línea dentro de HTML y un documento SVG independiente son contextos de análisis diferentes.

El ejemplo coloca explícitamente el div en http://www.w3.org/1999/xhtml. MDN indica que esta declaración de espacio de nombres es necesaria para el contenido HTML en un documento SVG independiente, aunque un ejemplo HTML en línea pueda omitirla. Si creas elementos en JavaScript, utiliza el espacio de nombres adecuado para el elemento secundario HTML; un div creado en el espacio de nombres SVG no es un contenedor de párrafo HTML.

Después inspecciona estas partes de la etiqueta:

• Asigna a foreignObject valores explícitos y positivos de width y height para el área prevista de la etiqueta.
• Mantén sus coordenadas x e y dentro del dibujo visible, dejando espacio para todas las líneas.
• Comprueba display, visibility, la opacidad y el color del texto en el contenedor y sus elementos secundarios.
• Confirma que el archivo exportado incluya los estilos que necesita en lugar de depender de la hoja de estilos de la página web que lo rodea.

En el ejemplo, todos los estilos de la etiqueta están en línea y el cuadro mide 230 unidades de ancho por 110 de alto. Eso elimina el CSS externo como variable. No hace que foreignObject sea portable a un renderizador que carece de esa función.

Para exportaciones de draw.io, convierte las etiquetas en el original

Si todavía tienes el diagrama editable, repara allí la exportación de sus etiquetas antes de editar XML a mano. La documentación actual de exportación de draw.io ofrece Convert Labels to SVG para etiquetas con formato compatibles: selecciona las formas o conectores, abre la sección Advanced de la pestaña Text y activa la casilla.

Esa opción tiene límites. La documentación excluye de esta conversión las etiquetas con estructuras como tablas, listas, enlaces o colores de fondo. Si la opción no está disponible, desactivar Formatted Text y Word Wrap es otro método documentado; puede que necesites insertar saltos de línea manuales y volver a comprobar la disposición.

Exporta una copia nueva y vuelve a abrirla en la aplicación receptora. Ocultar una advertencia «Text is not SVG» no convierte la etiqueta. Incrustar una fuente resuelve una dependencia de fuentes, no la falta de compatibilidad con la disposición HTML.

Para un diagrama ilustrado, mantén la ilustración importada separada de las etiquetas. La guía de formas SVG personalizadas de draw.io explica la parte de ilustración de ese flujo.

Elige el formato de texto para la siguiente persona

El texto nativo es una reparación útil cuando el destinatario necesita editar las palabras, pero sigue dependiendo de fuentes utilizables. Si la etiqueta aparece con una tipografía incorrecta, sigue las comprobaciones de fuentes SVG en lugar de tratarlo como el mismo problema de contenedor ausente.

Convertir en contornos solo funciona cuando la herramienta original puede ver y convertir las letras. Abrir una exportación ya incompleta y convertir los objetos restantes no puede restaurar palabras ausentes de ese documento importado. Un PNG conserva píxeles, así que no es adecuado cuando el destinatario necesita palabras editables o trazados vectoriales de corte.

Dónde encaja PerfectVector en una tarjeta ilustrada

Si la ilustración de la tarjeta solo existe como PNG o JPG, el flujo de clipart a SVG de PerfectVector puede preparar un vector candidato para esa ilustración. Mantén las palabras como un elemento de texto separado en tu editor de diseño. Comprueba los bordes y los huecos internos de la ilustración, añade la etiqueta y prueba el archivo ensamblado en el renderizador de destino.

La guía de vectorización de imágenes explica cómo los píxeles se convierten en trazados. PerfectVector no repara etiquetas HTML en un SVG. Cuando la ilustración ya tiene buenos trazados, consérvalos y cambia únicamente la etiqueta que falla. Una captura de la etiqueta ausente no contiene letras que recuperar, y vectorizar letras visibles crearía formas en lugar de palabras editables.

Antes de enviar el SVG reparado

1. Vuelve a abrir la copia exportada en un navegador y en el destino previsto.
2. Confirma que todas las etiquetas, incluida su última línea, sean visibles.
3. Comprueba que la ilustración no se haya movido ni cambiado de tamaño.
4. Verifica las fuentes o inspecciona las letras convertidas en contornos al tamaño previsto.
5. Conserva el original editable junto a la copia de entrega.

Preguntas frecuentes

¿Por qué el texto SVG aparece en Chrome, pero desaparece en una exportación PNG? La etiqueta puede ser HTML dentro de foreignObject, mientras que el renderizador PNG admite solo un subconjunto diferente de SVG. Comprueba el marcado de la etiqueta ausente y renderiza una versión de texto nativo mediante el mismo método de exportación.

¿Añadir el espacio de nombres XHTML corrige todas las exportaciones foreignObject? No. Corrige el espacio de nombres del contenido HTML en un SVG independiente. El destino sigue necesitando admitir ese contenido, y la etiqueta sigue necesitando dimensiones adecuadas y estilos visibles.

¿tspan puede ajustar líneas de texto como un párrafo HTML? El ejemplo utiliza líneas explícitas y desplazamientos verticales. No reproduce la disposición de párrafos HTML. Elige los saltos de línea para el espacio disponible y compruébalos con la fuente de destino.

¿Debo vectorizar toda la tarjeta para recuperar sus etiquetas? Conserva los trazados existentes y reconstruye la etiqueta a partir de su texto original. Vectoriza solo la ilustración que exista como píxeles. Las letras vectorizadas son geometría, así que no conservan palabras editables.

Fuentes

1. MDN — foreignObject — Define el contenido externo, los atributos de geometría y el espacio de nombres XHTML en SVG independiente.
2. MDN — tspan — Explica cómo posicionar partes del texto SVG nativo.
3. draw.io — Problemas de texto SVG exportado — Documenta la conversión de etiquetas nativas, los límites de formato y los ajustes alternativos de exportación.
4. GNOME — Funciones SVG y CSS compatibles con Librsvg — Enumera los elementos y atributos compatibles con el renderizador.

Si tu ilustración sigue siendo un mapa de bits, prepara el clipart como SVG, inspecciona sus formas y añade el texto por separado. Verifica ambos en el archivo exportado antes de entregarlo.