5.7 KiB
5.7 KiB
plaintext\nassets/\n├── css/\n│ ├── poster.css # Main styles\n│ └── svg-data.css # SVG data URIs and utilities\n└── svg/\n ├── symbols.svg # Animated logo symbols (inline use)\n ├── decorative-sprites.svg # Decorative patterns and elements\n └── README.md # This documentation\n\n\n## 🎯 SVG Management Strategies\n\n### 1. Animated Symbols (Inline)\n\nFor complex animations that need to be inline\n\nhtml\n<!-- Keep in main HTML for animations -->\n<svg>\n <use href="assets/svg/symbols.svg#logo-black"></use>\n</svg>\n\n\nUse for:\n\n- Animated logos with CSS/SVG animations\n- Interactive elements requiring :hover states\n- Complex multi-element animations\n\n### 2. Data URI Icons (CSS)\n\nFor small, reusable icons\n\ncss\n/* Load the SVG data system */\n@import url('assets/css/svg-data.css');\n\n/* Use in HTML */\n<span class="icon icon-github icon-lg"></span>\n<span class="icon icon-email"></span>\n\n/* Or in CSS */\n.my-element::before {\n content: '';\n background-image: var(--icon-arrow-right);\n}\n\n\nUse for:\n\n- Small icons (social, UI icons)\n- Repeated elements\n- Icons that need color theming\n\n### 3. External Sprite Symbols\n\nFor decorative, non-critical elements\n\nhtml\n<!-- Modern browsers -->\n<svg class="decoration">\n <use href="assets/svg/decorative-sprites.svg#tech-grid"></use>\n</svg>\n\n<!-- CSS Background approach -->\n<div class="bg-circuit-pattern"></div>\n\n\nUse for:\n\n- Background patterns\n- Decorative elements\n- Non-critical visual enhancements\n\n## 🚀 Usage Examples\n\n### Icon System\n\nhtml\n<!-- Social icons with consistent sizing -->\n<div class="social-links">\n <a href="#"><span class="icon icon-github icon-xl"></span></a>\n <a href="#"><span class="icon icon-email icon-xl"></span></a>\n <a href="#"><span class="icon icon-web icon-xl"></span></a>\n</div>\n\n<!-- Event information with icons -->\n<div class="event-info">\n <span class="icon icon-calendar"></span> February 15, 2025\n <span class="icon icon-clock"></span> 18:00 - 20:00\n <span class="icon icon-location"></span> Las Palmas Tech Hub\n</div>\n\n\n### Pattern Backgrounds\n\nhtml\n<!-- Decorative background patterns -->\n<div class="section bg-pattern-hex">\n <div class="content">Your content here</div>\n</div>\n\n<div class="tech-section bg-pattern-circuit">\n <div class="overlay">Tech content</div>\n</div>\n\n\n### Custom Styling\n\ncss\n/* Theme icon colors */\n.theme-primary .icon { filter: hue-rotate(0deg); }\n.theme-secondary .icon { filter: hue-rotate(120deg); }\n\n/* Animated icons */\n.loading .icon { animation: icon-spin 1s linear infinite; }\n.notification .icon { animation: icon-pulse 2s infinite; }\n\n\n## 📊 Performance Comparison\n\n| Method | HTTP Requests | Cache | Size | Compatibility | Animations |\n|--------|---------------|-------|------|---------------|------------|\n| Inline SVG | 0 | ❌ | Larger HTML | ✅ 100% | ✅ Full |\n| Data URI | 0 | ✅ | +33% CSS | ✅ 100% | ❌ Limited |\n| External SVG | +1 per file | ✅ | Smaller | ✅ 95% | ✅ Full |\n| Sprite Symbols | +1 per sprite | ✅ | Optimal | ✅ 90% | ✅ Full |\n\n## 🎨 Icon Customization\n\n### Size Classes\n\n- .icon-sm - 0.875em (14px at 16px base)\n- .icon - 1em (16px at 16px base)\n- .icon-lg - 1.25em (20px at 16px base)\n- .icon-xl - 1.5em (24px at 16px base)\n- .icon-2xl - 2em (32px at 16px base)\n\n### Color Themes\n\n- .icon-primary - Default theme colors\n- .icon-secondary - Secondary theme colors\n- .icon-accent - Accent colors\n\n### Animations\n\n- .icon-rotate - Continuous rotation\n- .icon-pulse - Pulsing opacity effect\n\n## 🔧 Adding New SVGs\n\n### For Small Icons (Data URI)\n\n1. Optimize SVG (remove unnecessary attributes)\n2. URL encode the SVG\n3. Add to svg-data.css as CSS custom property\n4. Create utility class\n\ncss\n:root {\n --icon-new: url('data:image/svg+xml;utf8,<svg>...</svg>');\n}\n.icon-new { background-image: var(--icon-new); }\n\n\n### For Decorative Elements (Sprite)\n\n1. Add <symbol> to decorative-sprites.svg\n2. Use with <use href="...#symbol-id">\n\n### For Animated Elements (Inline)\n\n1. Keep in main HTML file\n2. Add to symbols.svg if reusable\n3. Reference with <use> elements\n\n## 🌐 Browser Support\n\n- Data URI: All modern browsers + IE9+\n- SVG Sprites: Modern browsers + IE9+ (with polyfill)\n- External SVG: All browsers with proper MIME types\n- Inline SVG: All modern browsers + IE9+\n\n## 💡 Best Practices\n\n1. Keep animated SVGs inline for full animation support\n2. Use data URIs for small, repeated icons (< 2KB)\n3. Use external sprites for decorative elements (> 2KB)\n4. Optimize SVGs before encoding (remove metadata, comments)\n5. Use CSS custom properties for easy theming\n6. Test with and without JavaScript to ensure fallbacks work\n7. Consider lazy loading for large decorative sprites\n\n## 🔍 Debugging\n\n### Common Issues\n\n- SVG not displaying: Check URL encoding, MIME types\n- Animations not working: Ensure SVG is inline, not in data URI\n- Colors not changing: Use currentColor in SVG or CSS filters\n- Scaling issues: Set proper viewBox and preserveAspectRatio\n\n### Testing\n\nbash\n# Test external SVG accessibility\ncurl -I "assets/svg/decorative-sprites.svg"\n\n# Validate SVG syntax\nxmllint --noout assets/svg/*.svg\n