128 lines
8.1 KiB
Markdown
128 lines
8.1 KiB
Markdown
|
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
|
||
|
|
|
||
|
|
<img src="sprites.svg#logo" />
|
||
|
|
<object data="sprites.svg#icon"></object>
|
||
|
|
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,<svg>...</svg>');
|
||
|
|
}
|
||
|
|
.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:
|
||
|
|
<!-- SVGs críticos inline -->
|
||
|
|
<svg style="display:none">
|
||
|
|
<symbol id="logo">...</symbol>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<!-- SVGs secundarios como CSS backgrounds -->
|
||
|
|
.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 │ │
|
||
|
|
│ ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ │
|
||
|
|
│ │
|