1 line
5.7 KiB
Markdown
1 line
5.7 KiB
Markdown
|
# SVG Management System\n\nThis directory contains an optimized SVG management system that provides multiple ways to use SVGs without JavaScript while maintaining performance and compatibility.\n\n## 📁 File Structure\n\n```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\n*For complex animations that need to be inline*\n\n```html\n<!-- Keep in main HTML for animations -->\n<svg>\n <use href="assets/svg/symbols.svg#logo-black"></use>\n</svg>\n```\n\n**Use 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\n*For small, reusable icons*\n\n```css\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\n**Use for:**\n\n- Small icons (social, UI icons)\n- Repeated elements\n- Icons that need color theming\n\n### 3. **External Sprite Symbols**\n\n*For decorative, non-critical elements*\n\n```html\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\n**Use for:**\n\n- Background patterns\n- Decorative elements\n- Non-critical visual enhancements\n\n## 🚀 Usage Examples\n\n### Icon System\n\n```html\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\n```html\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\n```css\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
|