Diagramas SVG con Claude Opus 5.5: corrige etiquetas cortadas sin encogerlo todo

Cuando una etiqueta SVG generada por Opus se corta, revisa por separado los límites del texto, su figura contenedora y la ventana SVG. Pide una corrección local de geometría en vez de reducir todas las etiquetas. El diagrama debe seguir siendo legible a su tamaño real y conservar el significado.

MDN documenta el elemento de texto de SVG. Su posición y el rectángulo exterior son propiedades distintas; una etiqueta mayor no agranda automáticamente la caja. El ejemplo es una propuesta original, no un resultado ejecutado con Opus.

Identifica qué límite está mal

Considera tres pasos ficticios de montaje: Desembalar, Montar soporte, Ajustar ángulo. La etiqueta central pasa a decir «Montar el soporte ajustable». La reparación depende de qué oculte el texto.

Cambiar la ventana no arregla texto que sigue fuera de su tarjeta. Ampliar la tarjeta no corrige un recorte con el tamaño antiguo. Pide los IDs de los elementos afectados para revisar el cambio.

Calcula el ancho útil antes del salto de línea

En una tarjeta hipotética de 240 unidades con márgenes interiores de 20 a cada lado, quedan 200 para el texto. Si la etiqueta renderizada mide 224, sobran 24. Una tarjeta de 264 unidades acomodaría esa medida con los mismos márgenes, siempre que haya espacio para tarjetas vecinas y conectores.

Otra opción es usar dos líneas y aumentar la altura. No calcules el ancho contando caracteres: influyen fuente, peso e idioma. Estas cifras ilustran el cálculo; no son mediciones de un archivo adjunto.

Pide un cambio y un render

Repara con Opus 5.5 el SVG de montaje proporcionado. Conserva los tres pasos, orden, palabras y destinos de conectores. Identifica el texto central, su tarjeta y cualquier trazado de recorte.
Mide el texto renderizado con la fuente real si hay navegador o renderizador. Si no, indica que el ancho no está verificado. Compara texto con ancho interior y dibujo con viewBox.
Elige una solución local: saltos con sentido, más espacio o límite de recorte corregido. No reduzcas todas las fuentes ni cambies palabras para ocultar el problema. Redirige flechas afectadas sin cambiar su significado.
Devuelve SVG editado y lista de cambios. Renderiza al ancho previsto y a un ancho estrecho de móvil. Busca etiquetas cortadas, fuentes ausentes y colisiones. Si no puedes renderizar, dilo sin afirmar validación visual.

Comprueba el archivo exportado

Abre el SVG guardado en el navegador o programa de destino. Verifica que sea la versión nueva, que aparezcan las tres etiquetas y que los conectores mantengan la secuencia. Una vista previa bonita no demuestra que otro archivo exportado contenga el mismo código.

En móvil, quizá convenga pasar de tres columnas a una secuencia vertical. Es una variante deliberada, no una copia más pequeña. Conserva el orden y dale otro nombre para no confundirla con la versión de escritorio.

Si explica una función del producto, usa geometría y texto verificados como referencia para el anuncio. Crea la imagen complementaria en Panelly Studio; la guía de anotaciones de producto conecta etiquetas con detalles visibles. Esto no implica importación de capas SVG editables ni integración de Opus en Panelly.

Preguntas frecuentes

¿Por qué no convertir todo el texto en contornos?

Puede preservar glifos en algunas entregas, pero reduce la edición del texto y no arregla un mal espaciado. Resuelve primero el diseño y elige después el formato adecuado para quien lo recibe.

¿Basta con que el modelo diga «todo correcto»?

Pregunta qué archivo y render comprobó. Si no ejecutó un renderizador, considera la frase una comprobación propuesta, no prueba de inspección.

Fuentes y lecturas adicionales

• Fuente original · developer.mozilla.org