Flujos creativos prácticos
Corrige IDs SVG duplicados cuando una insignia aparece dos veces
Una insignia SVG puede funcionar sola y cambiar de color o recorte cuando pegas otra copia al lado. Los IDs repetidos de gradientes o rutas de recorte crean referencias ambiguas en la página.
Pedimos a Ciyo dos insignias ficticias de Cedar Cup, un par deliberadamente incorrecto y otro corregido. Las versiones reparadas conservan la geometría y usan prefijos de ID distintos. El ejemplo editable permite revisar ambos casos en un navegador.
Inspecciona IDs y referencias como un mismo sistema
Un ID identifica un elemento dentro del documento. SVG exige que sea único. Dos raíces SVG inline en una misma página HTML no ofrecen una excepción general a esa regla.
Haz un inventario de gradientes, rutas de recorte, máscaras, filtros y otras definiciones con nombre. Después recoge todas las referencias, incluidas url(#...), fragmentos href y referencias de accesibilidad. Cambiar el nombre de una definición sin actualizar sus usos puede sustituir una colisión por un recurso ausente.
Asigna un prefijo explícito a cada instancia
La primera insignia usa cedar-a-gradient y cedar-a-clip; la segunda, cedar-b-gradient y cedar-b-clip. Cada una referencia sus propias definiciones. Un componente reutilizable debería crear un prefijo único y estable para cada instancia, en vez de fijar el mismo en cada renderizado.
Conserva el dibujo al reparar los nombres. Facilita la comparación y reduce el riesgo de que un rediseño visual oculte el problema real de referencias.
| Instancia | Gradiente | Recorte |
|---|---|---|
| A | cedar-a-gradient | cedar-a-clip |
| B | cedar-b-gradient | cedar-b-clip |
Pide a Ciyo la comparación y el código fuente
Abre un proyecto aislado y solicita los pares inline incorrecto y corregido. Identifica claramente la sección incorrecta para que nadie la confunda con el componente final. Pide el HTML final, el código de los SVG independientes y una vista previa PNG.
En esta sesión real, el lienzo aceptó la vista PNG, pero no ofreció descargas de HTML ni SVG. Pedimos al agente que pegara el código completo en su respuesta y lo guardamos como el ejemplo enlazado abajo. Usa esta forma de entrega si tu sesión tiene la misma limitación.
Crea una demostración práctica de IDs SVG duplicados para la marca ficticia Cedar Cup. Usa solo herramientas de código, sin generación de imágenes o vídeo de pago. Entrega un HTML descargable con dos insignias SVG inline juntas, cada una con un gradiente y ruta de recorte distintos, e IDs únicos en todo el documento: cedar-a-gradient, cedar-a-clip, cedar-b-gradient, cedar-b-clip. Ambos SVG deben usar viewBox="0 0 120 120" y mostrarse a 160px. Incluye una comparación incorrecta claramente identificada que repita IDs, el par corregido y una lista de comprobación textual. Entrega también los dos SVG independientes corregidos. Añade al lienzo una vista PNG del par corregido. Conserva la geometría SVG entre los pares incorrecto y corregido. Comprueba mediante código la unicidad de IDs y todas las referencias url(#...). Explica exactamente qué verificaste y facilita enlaces de descarga. Es una demostración ficticia de componentes web, no una evaluación de rendimiento.Revisa el par final y conserva el código
El lienzo final muestra una sola vista corregida: una insignia circular verde y otra hexagonal ámbar. La primera vista cortaba el texto de marca; el agente elevó el dibujo, comprobó la geometría final y eliminó la vista obsoleta. Ambos pares de la comparación utilizan esa geometría final.
Añade prefijos a los recursos de cada instancia
Conservamos el código pegado y comprobamos la sección corregida por separado de la intencionadamente incorrecta. El par corregido tiene cuatro IDs de definición únicos y cuatro referencias, cada una resuelta dentro de su propio SVG. No analices el texto explicativo como si fuera marcado HTML.
Prueba la página con ambas copias presentes
Abre el HTML de ejemplo en un navegador y compara los pares identificados. Un renderizado independiente no demuestra qué sucede cuando dos SVG inline comparten documento. Limita los IDs deliberadamente duplicados a la sección didáctica incorrecta.
Revisamos por separado la página conservada en Chromium. Para un componente de producción, repite la comprobación en cada navegador compatible y después de cualquier optimización que reescriba IDs. Añade una tercera instancia, cambia el orden y confirma que las referencias sigan resolviéndose bien.
Preguntas prácticas
¿Raíces SVG distintas hacen seguros los IDs duplicados?
No te apoyes en eso para SVG inline dentro de un documento. Asigna IDs únicos a cada instancia y actualiza sus referencias.
¿Basta con cambiar el nombre del gradiente?
Actualiza también cada referencia a ese gradiente e inspecciona otras definiciones con nombre, como recortes y máscaras.
¿Por qué una sección de la página descargable es incorrecta a propósito?
El par claramente identificado como incorrecto demuestra el problema. Solo el par corregido sirve como ejemplo reutilizable.
Comprueba juntos los componentes SVG repetidos
Empieza con un ejemplo verificado en Ciyo. Conserva el original y revisa el resultado exportado antes de usarlo en tu proyecto.