# SVG Replacement Strategy for Comparison Pages


**Last Updated:** 2025-11-20

## Overview

This document outlines the strategy for replacing inline SVGs with external files to improve text-HTML ratio while maintaining functionality.

## Analysis Results

**Total SVGs:** 107 elements extracted
**Total Size:** ~550KB (73.1% of HTML size)
**Largest SVG:** 103KB (time-text illustration)

## SVG Categories

### 1. Interactive SVGs (Must Remain Inline)

These SVGs contain elements that are manipulated by JavaScript and must remain inline:

- **Large Illustration SVGs (103KB):** Contains `id="time-text"` elements updated by scroll handlers
- **Rotating Element SVGs (4.8KB):** Contains `id="rotating-element"` rotated by JavaScript
- **Progress Circle SVGs:** Contains `id="progress-circle"` animated by scroll
- **Euro Amount Display:** Contains `id="euro-amount"` updated dynamically

**Strategy:** Keep inline but optimize paths and remove unnecessary attributes.

### 2. Repeated Icon SVGs (Can Use Sprite)

These small SVGs are repeated multiple times:

- **Star Icons (177 bytes each):** Used 20+ times for ratings
- **Arrow Icons:** Used for navigation/indicators
- **Checkmark Icons:** Used in feature lists

**Strategy:** Use SVG sprite sheet (`/v2/img/svg/star-icons.svg`)

### 3. Static Decorative SVGs (Can Be Externalized)

These SVGs are purely decorative and don't interact with JavaScript:

- **Small Icons (<1KB):** Various decorative elements
- **Pattern SVGs:** Background patterns
- **Illustration Elements:** Non-interactive parts of illustrations

**Strategy:** Replace with `<img>` tags pointing to `/v2/img/svg/` files

## Implementation Priority

### Phase 1: Sprite Sheet (Completed ✅)
- Created `/v2/img/svg/star-icons.svg` with star symbols
- Ready for implementation in templates

### Phase 2: Static SVG Externalization (Recommended Next)
1. Identify all static SVGs (<1KB, no JavaScript interaction)
2. Replace with `<img>` tags:
   ```html
   <img src="/v2/img/svg/icon-name.svg" alt="Description" loading="lazy" width="20" height="20">
   ```
3. Estimated reduction: ~50-100KB

### Phase 3: Large SVG Optimization (Future)
1. Split large illustration SVGs into:
   - Static background (externalize)
   - Interactive elements (keep inline)
2. Use CSS background images for static parts
3. Estimated reduction: ~200-300KB

### Phase 4: Path Optimization (Ongoing)
1. Minify SVG paths
2. Remove unnecessary attributes
3. Use `<use>` elements for repeated patterns
4. Estimated reduction: ~50KB

## Code Examples

### Using Sprite Sheet

**Before:**
```html
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="#facc15">
  <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
```

**After:**
```html
<svg class="w-5 h-5">
  <use href="/v2/img/svg/star-icons.svg#star-filled"></use>
</svg>
```

### Externalizing Static SVGs

**Before:**
```html
<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="..."/>
</svg>
```

**After:**
```html
<img src="/v2/img/svg/icon-name.svg" alt="Icon" loading="lazy" width="20" height="20">
```

## Files Created

All SVGs have been extracted to `/v2/img/svg/` with naming convention:
- `compare_template_nodetails-{name}-{hash}.svg`
- `compare_template_details-{name}-{hash}.svg`

Mapping file: `scripts/svg-extraction-mapping.json`

## Testing Checklist

When replacing SVGs:

- [ ] Visual appearance unchanged
- [ ] Interactive elements still work (rotations, animations)
- [ ] Sprite sheet icons display correctly
- [ ] External SVG images load properly
- [ ] No console errors
- [ ] Performance improved (measure HTML size reduction)
- [ ] Text-HTML ratio improved

## Estimated Impact

**Current:** 549KB SVG content (73.1% of HTML)
**After Phase 1-2:** ~400KB (53% of HTML) - **27% reduction**
**After Phase 3:** ~200KB (27% of HTML) - **64% reduction**
**After Phase 4:** ~150KB (20% of HTML) - **73% reduction**

## Notes

- Interactive SVGs must remain inline for JavaScript access
- Sprite sheets reduce HTTP requests for repeated icons
- External SVGs can be cached separately
- Lazy loading can be applied to below-fold external SVGs