provisioning-outreach/presentations/rust-laspalmas-250926/info/svg_symbols_plan.md

vale, dado que no podemos poner los ficheros de svg externos y cargarlos como symbols la propuesta sería tener una hoja de estilos css y poner los SVG como data-image para simplemente usarlos como una url en el css Alguna solución mejor y/o más eficiente ?

⏺ Excelente pregunta sobre la optimización de SVGs. Déjame analizar las mejores opciones para gestionar SVGs sin JavaScript:

Opciones para gestionar SVGs externamente:

1. SVG como data URI en CSS (Tu propuesta)

.logo { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E...%3C/svg%3E'); } Pros:

• Sin requests HTTP adicionales

• Funciona en todos los navegadores

• Cacheable con el CSS

  Contras:

• Aumenta el tamaño del CSS (~33% más por encoding Base64)

• No reutilizable entre diferentes elementos

• Difícil de mantener SVGs complejos

  1. SVG Sprites con fragment identifiers
  Pros: - Un solo archivo SVG con todos los símbolos - Cacheable

  Contras:

• Soporte limitado en algunos navegadores para fragments

• No funciona bien con CSS background-image

  1. CSS Custom Properties con SVG inline

  :root { --logo-svg: url('data:image/svg+xml;utf8,'); } .element { background: var(--logo-svg); } Pros:

• Reutilizable en todo el CSS

• Fácil de cambiar temas

  Contras:

• Similar tamaño que data URI

  1. Archivo SVG externo como background

  .logo { background-image: url('assets/logo.svg'); mask-image: url('assets/logo.svg'); } Pros:

• SVGs separados y cacheables

• Limpio y mantenible

• Permite colorear con background-color usando mask

  Contras:

• Requests HTTP adicionales

  1. SVG injection con CSS (Mejor solución híbrida)

  Combinar inline crítico + lazy load:

  .decoration { background: url('decorative.svg'); }

  Mi recomendación:

  Para tu caso específico del poster, sugiero:

  1. SVGs animados críticos (logo, texto): Mantenerlos inline en el HTML como símbolos para preservar las animaciones
  2. SVGs decorativos: Como archivos externos en CSS
  3. Íconos pequeños: Como data URI en CSS variables

  Esto porque:

• Las animaciones SVG complejas necesitan estar inline

• Los SVGs decorativos pueden ser externos

• Mantiene el balance entre rendimiento y mantenibilidad

╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ Ready to code? │ │ │ │ Here is Claude's plan: │ │ ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ │ Plan para optimizar la gestión de SVGs │ │ │ │ │ │ │ │ Estructura propuesta: │ │ │ │ │ │ │ │ 1. Crear archivo CSS con SVGs como data URI para íconos simples │ │ │ │ - Convertir SVGs pequeños a data URI │ │ │ │ - Usar CSS custom properties para reutilización │ │ │ │ 2. Mantener SVGs animados inline │ │ │ │ - Logo animado con ruedas giratorias │ │ │ │ - Texto "provisioning" con animaciones │ │ │ │ - Símbolo infinito animado │ │ │ │ 3. Crear archivo SVG sprite opcional │ │ │ │ - Para navegadores modernos que soporten fragment identifiers │ │ │ │ - Como fallback progresivo │ │ │ │ │ │ │ │ Implementación: │ │ │ │ │ │ │ │ - assets/css/svg-data.css - SVGs como data URI │ │ │ │ - assets/svg/decorative.svg - SVGs decorativos externos │ │ │ │ - Mantener símbolos animados en index.html │ │ │ │ │ │ │ │ Esta solución balancea: │ │ │ │ - Performance: Sin JavaScript, mínimos requests │ │ │ │ - Mantenibilidad: SVGs organizados por tipo │ │ │ │ - Compatibilidad: Funciona en todos los navegadores │ │ │ │ - Animaciones: Preserva todas las animaciones CSS/SVG │ │ │ ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │