1 line
No EOL
5.7 KiB
Markdown
1 line
No EOL
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 (remove unnecessary attributes)\n2. URL encode the SVG\n3. Add to `svg-data.css` as CSS custom property\n4. Create utility class\n\n```css\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\n```bash\n# Test external SVG accessibility\ncurl -I "assets/svg/decorative-sprites.svg"\n\n# Validate SVG syntax\nxmllint --noout assets/svg/*.svg\n``` |