Tutoriales
Claude Opus 5.5: corregir trazos SVG cortados o desiguales
Pide a Claude Opus 5.5 que examine coordenadas, límites pintados y trazo calculado antes de modificar una ruta SVG.
Pide a Claude Opus 5.5 que examine coordenadas, límites pintados y trazo calculado antes de modificar una ruta SVG. Un dibujo pequeño dentro de una caja grande, un borde cortado y un grosor inconsistente son problemas distintos. Resolverlos todos con «hazlo más grande» suele ocultar la causa.
Este método incluye geometría calculada; no es un benchmark de Opus. Una discusión de un desarrollador sobre tamaño y alineación de SVG ilustra la confusión entre el elemento exterior y su dibujo. Ese testimonio no demuestra un defecto del navegador.
Identifica el límite incorrecto
| Síntoma | Evidencia necesaria | Primera corrección posible |
|---|---|---|
| Dibujo pequeño dentro de la caja | viewBox y límites reales de la ruta | Revisar espacio interno sobrante |
| Contorno desaparecido en un borde | Límites pintados, extremos, uniones y overflow | Reservar espacio para el trazo |
| Grosor distinto según tamaño | Dimensiones y transformación | Decidir si debe escalar |
| Una sola instancia diferente | CSS calculado y symbol referenciado | Buscar una regla que lo sobrescribe |
La especificación de viewBox de SVG describe cómo se mapea un rectángulo interno al área visible. Aumentar el ancho CSS cambia la caja, pero no elimina el espacio vacío de ese rectángulo. Registra ambas dimensiones y conserva las proporciones.
Calcula un ejemplo sencillo
Con `viewBox="0 0 24 24"` cuadrado, trazo de 2 y escalado uniforme normal sin otras transformaciones:
| Lado renderizado | Escala | Grosor esperado |
|---|---|---|
| 18 CSS px | 18 / 24 | 1,5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
Son anchos geométricos, no garantías de un suavizado idéntico en todas las pantallas. MDN documenta `vector-effect="non-scaling-stroke"` para mantener el grosor independiente de las transformaciones pertinentes. Úsalo solo si un peso constante encaja con la familia. Un icono grande puede necesitar un trazo mayor. La propiedad no repara automáticamente espacio, alineación, recorte ni comportamiento del zoom del navegador.
Examina esta forma deliberadamente sencilla:
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
Sus límites pintados van de 2 a 22 en ambos ejes: centro 12, radio 9 y medio trazo 1. Un radio de 12 produce límites de −1 a 25, fuera del viewBox; pueden recortarse cuando el área visible corta el desbordamiento. Es un círculo: uniones angulares, extremos, filtros y transformaciones requieren comprobaciones propias. El ejemplo decorativo se oculta a tecnologías de asistencia. Un botón compuesto solo por un icono sigue necesitando un nombre accesible en el control.
## Prompt completo de revisión
Combina la [guía oficial de Opus 5.5](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5) con este encargo:
```text
Revisa este icono SVG y su componente contenedor. Entradas: SVG completo o symbol referenciado, CSS calculado, tamaños previstos, capturas en esos tamaños y política de grosor de la familia.
Separa dimensiones del área visible, coordenadas viewBox, límites geométricos, límites pintados y alineación. Calcula el escalado del trazo para cada tamaño con las transformaciones reales. Examina grosor, vector-effect, extremos, uniones, overflow, filtros y reglas CSS que sobrescriben valores. Identifica información ausente en lugar de suponer valores predeterminados.
Propón el cambio mínimo que resuelva el problema demostrado. Conserva identidad de la forma y proporciones. No añadas non-scaling-stroke automáticamente a todos los iconos. Explica efectos en otras instancias del symbol. Devuelve diagnóstico, parche y matriz de pruebas a 18, 24 y 48 píxeles CSS sobre fondos claro y oscuro. Separa cálculos de observaciones del navegador. No afirmes haber realizado pruebas visuales sin resultados. Conserva nombres accesibles en controles interactivos.Comprueba el componente real
Renderiza las versiones anterior y nueva juntas en los tres tamaños. Inspecciona los cuatro bordes y compara símbolos vecinos de la misma familia. Revisa estados de puntero, foco y desactivación si cambian el estilo. Guarda grosor calculado y regla CSS junto a cada captura.
Prueba un symbol compartido en más de un componente: arreglar una barra puede dañar otra. Examina ambos fondos porque el contraste cambia el peso aparente. Si captura y cálculo discrepan, investiga transformaciones adicionales y CSS antes de volver a editar la geometría.
Decisiones frecuentes
**¿Todos los trazos deben dejar de escalar?** No. Elige una política deliberada para la familia y verifica cada tamaño previsto.
**¿Cambiar viewBox arregla un recorte?** A veces, pero también cambia escala y alineación. Revisa los iconos afectados.
**¿Basta una captura?** Localiza el síntoma. Para explicarlo necesitas SVG, estilos calculados y dimensiones renderizadas.
Tras revisar los iconos, usa Panelly Studio para crear imágenes promocionales completas con un brief visual coherente. Para texto dentro de diagramas SVG, consulta la revisión de etiquetas de diagramas, dedicada a posición y legibilidad. Ningún flujo implica una integración entre Panelly y Opus.
