Merge branch 'migrate-svg-nametag-format' into web-app

old-new-diff.MD

@@ -0,0 +1,27 @@
+# Format Migration: Old to New 2.0
+
+## Format Comparison
+
+| Feature | Old Format (`nametags/`) | New 1.0 (`input/`) | **New 2.0 (`new/`) - Target** |
+|---------|------------------------|--------------------|--------------------------------|
+| **Grouping** | `<g>` layers (Illustrator) | Flat (no `<g>` tags) | **Semantic `<g>` tags with `id` attributes** |
+| **Coloring** | `<style>` + classes (`st1`) | Inline `fill="#00aeef"` | Inline `fill` |
+| **Classification Signal**| `class="st1"` / `st2` | `fill="#00aeef"` / `#fff` | **Parent `<g>` tag `id`** (`background`, `white-text`, `cyan-logo-text`) |
+
+## Key Differences Summary
+
+### Structural Changes
+- **Old**: Relies on `<g>` layers with Illustrator-generated classes like `st1`, `st2`
+- **New 1.0**: Flattened structure with inline color values but no semantic grouping
+- **New 2.0**: Semantic `<g>` tags with explicit `id` attributes on parent groups for robust classification
+
+### Classification Logic Changes
+- **Old Format**: Uses `class="st1"` / `st2` attribute checks
+- **New 1.0 Format**: Uses inline `fill` color hex values (`#00aeef` / `#fff`)
+- **New 2.0 Format**: Uses parent `<g>` tag `id` attributes with semantic names (`background`, `white-text`, `cyan-logo-text`)
+
+### Advantages of New 2.0 Format
+- Cleanest classification method using semantic grouping
+- More robust than exact color hex value matching
+- Better than relying on historical Illustrator class names (`st1`, `st2`)
+- Explicit functional layer grouping rather than color-based classification