Upload folder using huggingface_hub

.claude/settings.local.json

@@ -1,7 +1,11 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npx wrangler deploy:*)"
+      "Bash(node tools/colorrm-to-svg.cjs:*)",
+      "Bash(node -e:*)",
+      "Bash(node check_masks.cjs:*)",
+      "Bash(node tools/svg-to-colorrm.cjs:*)",
+      "Bash(python3 -c:*)"
     ]
   }
 }

check_images.cjs

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const content = fs.readFileSync('test_page_1.svg', 'utf8');
+
+// Find all image elements
+const imagePattern = /<image[^>]*>/g;
+let match;
+let idx = 0;
+while ((match = imagePattern.exec(content)) !== null) {
+    const elem = match[0];
+    const id = elem.match(/id="([^"]*)"/)?.[1] || 'no-id';
+    const w = elem.match(/width="([^"]*)"/)?.[1] || '?';
+    const h = elem.match(/height="([^"]*)"/)?.[1] || '?';
+    const href = elem.match(/href="([^"]{0,50})/)?.[1] || '?';
+    console.log(idx++, id, w+'x'+h, href.slice(0,40)+'...');
+}

check_structure.cjs

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const content = fs.readFileSync('test_page_1.svg', 'utf8');
+
+// Find defs section
+const defsMatch = content.match(/<defs>([\s\S]*?)<\/defs>/);
+if (defsMatch) {
+    const defsContent = defsMatch[1];
+    const imagesInDefs = (defsContent.match(/<image/g) || []).length;
+    console.log('Images inside <defs>:', imagesInDefs);
+}
+
+// Find images outside defs
+const withoutDefs = content.replace(/<defs>[\s\S]*?<\/defs>/g, '');
+const imagesOutside = (withoutDefs.match(/<image/g) || []).length;
+console.log('Images outside <defs>:', imagesOutside);
+
+// List all image IDs
+const imagePattern = /<image[^>]*id="([^"]*)"[^>]*/g;
+let m;
+console.log('\nAll images:');
+while ((m = imagePattern.exec(content)) !== null) {
+    const inDefs = defsMatch && defsMatch[0].includes(m[0]);
+    console.log(' -', m[1], inDefs ? '(in defs)' : '(outside)');
+}

compare_svg.py

@@ -0,0 +1,153 @@
+#!/usr/bin/env python3
+"""Compare original SVG with roundtrip SVG"""
+
+import re
+from xml.etree import ElementTree as ET
+from collections import defaultdict
+
+def parse_svg(path):
+    """Parse SVG and extract element details"""
+    with open(path, 'r') as f:
+        content = f.read()
+
+    # Parse XML
+    try:
+        root = ET.fromstring(content)
+    except:
+        # Fallback to regex if XML parsing fails
+        return parse_svg_regex(content)
+
+    ns = {'svg': 'http://www.w3.org/2000/svg', 'xlink': 'http://www.w3.org/1999/xlink'}
+
+    elements = defaultdict(list)
+
+    def process_elem(elem, depth=0):
+        tag = elem.tag.split('}')[-1]  # Remove namespace
+        attrs = dict(elem.attrib)
+
+        if tag in ['path', 'rect', 'circle', 'ellipse', 'polygon', 'polyline', 'line', 'image', 'text']:
+            info = {'tag': tag, 'depth': depth}
+
+            # Key attributes
+            for attr in ['fill', 'stroke', 'stroke-width', 'stroke-dasharray',
+                        'fill-opacity', 'stroke-opacity', 'opacity', 'transform']:
+                if attr in attrs:
+                    info[attr] = attrs[attr][:30] if len(attrs.get(attr, '')) > 30 else attrs.get(attr)
+
+            # Special handling
+            if 'd' in attrs:
+                info['d_len'] = len(attrs['d'])
+                info['d_cmds'] = len(re.findall(r'[MLHVCSQTAZ]', attrs['d'], re.I))
+            if 'points' in attrs:
+                info['points_count'] = len(attrs['points'].split())
+            if '{http://www.w3.org/1999/xlink}href' in attrs:
+                href = attrs['{http://www.w3.org/1999/xlink}href']
+                info['href'] = href[:40] + '...' if len(href) > 40 else href
+            if 'href' in attrs:
+                href = attrs['href']
+                info['href'] = href[:40] + '...' if len(href) > 40 else href
+
+            elements[tag].append(info)
+
+        for child in elem:
+            process_elem(child, depth + 1)
+
+    process_elem(root)
+    return elements
+
+def parse_svg_regex(content):
+    """Fallback regex parser"""
+    elements = defaultdict(list)
+
+    for tag in ['path', 'rect', 'circle', 'ellipse', 'polygon', 'polyline', 'line', 'image']:
+        pattern = rf'<{tag}\s+([^>]*)/?>'
+        for match in re.finditer(pattern, content, re.I):
+            attrs_str = match.group(1)
+            info = {'tag': tag}
+
+            for attr in ['fill', 'stroke', 'stroke-width', 'stroke-dasharray',
+                        'fill-opacity', 'stroke-opacity', 'opacity']:
+                m = re.search(rf'{attr}="([^"]*)"', attrs_str)
+                if m:
+                    val = m.group(1)
+                    info[attr] = val[:30] if len(val) > 30 else val
+
+            if tag == 'path':
+                m = re.search(r'd="([^"]*)"', attrs_str)
+                if m:
+                    info['d_len'] = len(m.group(1))
+                    info['d_cmds'] = len(re.findall(r'[MLHVCSQTAZ]', m.group(1), re.I))
+
+            if tag == 'polygon':
+                m = re.search(r'points="([^"]*)"', attrs_str)
+                if m:
+                    info['points_count'] = len(m.group(1).split())
+
+            elements[tag].append(info)
+
+    return elements
+
+def compare(orig_path, roundtrip_path):
+    print(f"Original: {orig_path}")
+    print(f"Roundtrip: {roundtrip_path}")
+    print("=" * 60)
+
+    orig = parse_svg(orig_path)
+    rt = parse_svg(roundtrip_path)
+
+    all_tags = set(orig.keys()) | set(rt.keys())
+
+    print("\n### ELEMENT COUNTS ###")
+    print(f"{'Tag':<12} {'Original':>10} {'Roundtrip':>10} {'Diff':>10}")
+    print("-" * 44)
+    for tag in sorted(all_tags):
+        o_count = len(orig.get(tag, []))
+        r_count = len(rt.get(tag, []))
+        diff = r_count - o_count
+        diff_str = f"+{diff}" if diff > 0 else str(diff)
+        print(f"{tag:<12} {o_count:>10} {r_count:>10} {diff_str:>10}")
+
+    print("\n### ORIGINAL ELEMENTS ###")
+    for tag in sorted(orig.keys()):
+        print(f"\n[{tag.upper()}] ({len(orig[tag])} elements)")
+        for i, elem in enumerate(orig[tag][:5]):  # Show first 5
+            attrs = {k: v for k, v in elem.items() if k != 'tag' and k != 'depth'}
+            print(f"  {i}: {attrs}")
+        if len(orig[tag]) > 5:
+            print(f"  ... and {len(orig[tag]) - 5} more")
+
+    print("\n### ROUNDTRIP ELEMENTS ###")
+    for tag in sorted(rt.keys()):
+        print(f"\n[{tag.upper()}] ({len(rt[tag])} elements)")
+        for i, elem in enumerate(rt[tag][:5]):  # Show first 5
+            attrs = {k: v for k, v in elem.items() if k != 'tag' and k != 'depth'}
+            print(f"  {i}: {attrs}")
+        if len(rt[tag]) > 5:
+            print(f"  ... and {len(rt[tag]) - 5} more")
+
+    # Attribute comparison
+    print("\n### ATTRIBUTE ANALYSIS ###")
+
+    # Check fills
+    orig_fills = [e.get('fill') for t in orig.values() for e in t if e.get('fill')]
+    rt_fills = [e.get('fill') for t in rt.values() for e in t if e.get('fill')]
+    print(f"\nFills - Original: {len(orig_fills)}, Roundtrip: {len(rt_fills)}")
+    print(f"  Orig unique: {set(orig_fills)}")
+    print(f"  RT unique: {set(rt_fills)}")
+
+    # Check strokes
+    orig_strokes = [e.get('stroke') for t in orig.values() for e in t if e.get('stroke')]
+    rt_strokes = [e.get('stroke') for t in rt.values() for e in t if e.get('stroke')]
+    print(f"\nStrokes - Original: {len(orig_strokes)}, Roundtrip: {len(rt_strokes)}")
+
+    # Check dash arrays
+    orig_dash = [e.get('stroke-dasharray') for t in orig.values() for e in t if e.get('stroke-dasharray')]
+    rt_dash = [e.get('stroke-dasharray') for t in rt.values() for e in t if e.get('stroke-dasharray')]
+    print(f"\nDash arrays - Original: {len(orig_dash)}, Roundtrip: {len(rt_dash)}")
+    if orig_dash:
+        print(f"  Orig: {orig_dash[:3]}...")
+    if rt_dash:
+        print(f"  RT: {rt_dash[:3]}...")
+
+if __name__ == '__main__':
+    compare('test_page_1.svg', 'test_page_1.roundtrip.svg')

docs/COLORRM_DATA_FORMAT_V2.md

@@ -0,0 +1,422 @@
+# ColorRM Data Format v2
+
+This document describes the ColorRM JSON data format version 2, used for storing and rendering drawings.
+
+## Format Overview
+
+```json
+{
+  "metadata": { ... },
+  "history": [ ... ]
+}
+```
+
+## Metadata
+
+```json
+{
+  "version": 2,
+  "sourceType": "svg",
+  "width": 800,
+  "height": 600,
+  "viewBox": { "x": 0, "y": 0, "w": 800, "h": 600 },
+  "elementCount": 42,
+  "statistics": {
+    "pen": 10,
+    "highlighter": 5,
+    "shape": 8,
+    "text": 15,
+    "image": 4
+  },
+  "backgroundCount": 1
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `version` | number | Format version (2 for this spec) |
+| `sourceType` | string | Source format ("svg", "native") |
+| `width` | number | Document width in pixels |
+| `height` | number | Document height in pixels |
+| `viewBox` | object | SVG viewBox (if from SVG source) |
+| `elementCount` | number | Total number of elements |
+| `statistics` | object | Count per tool type |
+| `backgroundCount` | number | Number of detected background images |
+
+## History Elements
+
+The `history` array contains drawing elements in z-order (first = bottom, last = top).
+
+### Common Properties (all elements)
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | string | Yes | Unique element ID |
+| `lastMod` | number | Yes | Last modification timestamp |
+| `tool` | string | Yes | Tool type (see below) |
+| `deleted` | boolean | No | If true, element is hidden |
+
+### Tool Types
+
+---
+
+## 1. Pen (`tool: "pen"`)
+
+Freehand strokes with solid color.
+
+```json
+{
+  "id": "abc123",
+  "lastMod": 1704067200000,
+  "tool": "pen",
+  "pts": [
+    { "x": 100, "y": 200 },
+    { "x": 105, "y": 202 },
+    { "x": 110, "y": 205 }
+  ],
+  "color": "#000000",
+  "size": 2,
+  "opacity": 1,
+  "lineCap": "round",
+  "lineJoin": "round",
+  "rotation": 0,
+  "deleted": false
+}
+```
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `pts` | array | Required | Array of {x, y} points |
+| `color` | string | "#000000" | Stroke color (hex) |
+| `size` | number | 2 | Stroke width in pixels |
+| `opacity` | number | 1 | Opacity (0-1) |
+| `lineCap` | string | "round" | Line cap style |
+| `lineJoin` | string | "round" | Line join style |
+
+---
+
+## 2. Highlighter (`tool: "highlighter"`)
+
+Semi-transparent strokes, typically wider.
+
+```json
+{
+  "id": "def456",
+  "tool": "highlighter",
+  "pts": [...],
+  "color": "#FFFF00",
+  "size": 20,
+  "opacity": 0.4
+}
+```
+
+Same properties as `pen`, but typically:
+- Larger `size` (10-40)
+- Lower `opacity` (0.2-0.5)
+
+---
+
+## 3. Shape (`tool: "shape"`)
+
+Geometric shapes with fill and border.
+
+```json
+{
+  "id": "ghi789",
+  "tool": "shape",
+  "shapeType": "rectangle",
+  "x": 50,
+  "y": 100,
+  "w": 200,
+  "h": 150,
+  "fillColor": "#FFCC00",
+  "borderColor": "#000000",
+  "fillOpacity": 0.5,
+  "borderOpacity": 1,
+  "borderSize": 2,
+  "borderType": "solid",
+  "rotation": 0
+}
+```
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `shapeType` | string | "rectangle" | Shape type (see below) |
+| `x`, `y` | number | 0 | Position |
+| `w`, `h` | number | 100 | Dimensions |
+| `fillColor` | string | "transparent" | Fill color |
+| `borderColor` | string | "#000000" | Border color |
+| `fillOpacity` | number | 1 | Fill opacity |
+| `borderOpacity` | number | 1 | Border opacity |
+| `borderSize` | number | 2 | Border width |
+| `borderType` | string | "solid" | Border style |
+| `rotation` | number | 0 | Rotation in degrees |
+
+### Shape Types
+- `rectangle` - Rectangular shape
+- `ellipse` - Ellipse/oval
+- `circle` - Perfect circle
+- `triangle` - Triangle
+- `arrow` - Arrow shape
+- `line` - Straight line
+- `polygon` - Custom polygon (uses `pts`)
+
+### Border Types
+- `solid` - Solid line
+- `dashed` - Dashed line (stroke-dasharray: "10,5")
+- `dotted` - Dotted line (stroke-dasharray: "2,3")
+
+### Polygon Shape
+
+When `shapeType: "polygon"`, uses normalized points:
+
+```json
+{
+  "shapeType": "polygon",
+  "x": 100,
+  "y": 100,
+  "w": 200,
+  "h": 150,
+  "pts": [
+    { "x": 0.5, "y": 0 },
+    { "x": 1, "y": 1 },
+    { "x": 0, "y": 1 }
+  ]
+}
+```
+
+Points are normalized (0-1) relative to bounding box.
+
+---
+
+## 4. Text (`tool: "text"`)
+
+Text elements with optional SVG data for precise rendering.
+
+```json
+{
+  "id": "jkl012",
+  "tool": "text",
+  "text": "Hello World",
+  "x": 100,
+  "y": 200,
+  "size": 16,
+  "color": "#000000",
+  "fontFamily": "Calibri",
+  "w": 120,
+  "h": 20,
+  "rotation": 0,
+  "svgData": {
+    "transform": "matrix(1,0,0,1,0,792)",
+    "xmlSpace": "preserve",
+    "fontSize": "11.04",
+    "fontFamily": "Calibri",
+    "fill": "#000000",
+    "innerContent": "<tspan y=\"-745\" x=\"54 61 67\">Hi</tspan>"
+  }
+}
+```
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `text` | string | "" | Plain text content |
+| `x`, `y` | number | 0 | Position (transformed) |
+| `size` | number | 16 | Font size |
+| `color` | string | "#000000" | Text color |
+| `fontFamily` | string | "sans-serif" | Font family |
+| `w`, `h` | number | auto | Bounding box |
+| `svgData` | object | null | Original SVG for precise rendering |
+
+### svgData Object (v2 feature)
+
+For imported SVGs, preserves original formatting:
+
+| Property | Description |
+|----------|-------------|
+| `transform` | SVG transform attribute |
+| `xmlSpace` | xml:space attribute |
+| `fontSize` | Original font-size |
+| `fontFamily` | Original font-family |
+| `fill` | Original fill color |
+| `innerContent` | Original tspan/text content |
+
+**Rendering Priority:**
+1. If `svgData` exists, render using original SVG structure
+2. Otherwise, render using simplified properties
+
+---
+
+## 5. Image (`tool: "image"`)
+
+Embedded or referenced images with optional masking.
+
+```json
+{
+  "id": "mno345",
+  "tool": "image",
+  "x": 0,
+  "y": 0,
+  "w": 800,
+  "h": 600,
+  "src": "data:image/jpeg;base64,...",
+  "rotation": 0,
+  "opacity": 1,
+  "isBackground": true,
+  "mask": {
+    "id": "mask_2",
+    "type": "luminance",
+    "src": "data:image/png;base64,..."
+  }
+}
+```
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `x`, `y` | number | 0 | Position |
+| `w`, `h` | number | 100 | Dimensions |
+| `src` | string | Required | Image source (data URL or URL) |
+| `rotation` | number | 0 | Rotation in degrees |
+| `opacity` | number | 1 | Opacity |
+| `isBackground` | boolean | false | True if full-document size |
+| `mask` | object | null | Mask definition |
+
+### Mask Object (v2 feature)
+
+```json
+{
+  "id": "mask_2",
+  "type": "luminance",
+  "src": "data:image/png;base64,..."
+}
+```
+
+| Property | Description |
+|----------|-------------|
+| `id` | Original mask ID from SVG |
+| `type` | Mask type ("luminance" or "alpha") |
+| `src` | Mask image (grayscale for luminance) |
+
+**Luminance Mask Rendering:**
+- White pixels = fully visible
+- Black pixels = fully transparent
+- Gray pixels = partial transparency
+
+---
+
+## 6. Group (`tool: "group"`)
+
+Container for grouping elements.
+
+```json
+{
+  "id": "pqr678",
+  "tool": "group",
+  "children": ["abc123", "def456"],
+  "x": 50,
+  "y": 50,
+  "w": 300,
+  "h": 200,
+  "rotation": 0,
+  "opacity": 1
+}
+```
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `children` | array | Array of element IDs or inline elements |
+| `x`, `y`, `w`, `h` | number | Bounding box |
+
+---
+
+## Backwards Compatibility
+
+### Reading Old Data (v1)
+
+- If `metadata.version` is missing, assume v1
+- v1 data lacks: `svgData`, `mask`, `isBackground`
+- Renderer should handle missing properties with defaults
+
+### Version Detection
+
+```javascript
+function getVersion(data) {
+  return data.metadata?.version || 1;
+}
+
+function isV2(data) {
+  return getVersion(data) >= 2;
+}
+```
+
+---
+
+## Rendering Order
+
+1. **Background images** (`isBackground: true`) - render first
+2. **Regular elements** - render in history order (z-index)
+3. **Masked images** - apply mask during render
+
+---
+
+## Canvas Rendering Guidelines
+
+### Images with Masks
+
+```javascript
+function renderMaskedImage(ctx, item) {
+  if (!item.mask) {
+    // Simple image render
+    ctx.drawImage(img, item.x, item.y, item.w, item.h);
+    return;
+  }
+
+  // Create offscreen canvas for masking
+  const offscreen = new OffscreenCanvas(item.w, item.h);
+  const offCtx = offscreen.getContext('2d');
+
+  // Draw content image
+  offCtx.drawImage(contentImg, 0, 0, item.w, item.h);
+
+  // Apply luminance mask using globalCompositeOperation
+  offCtx.globalCompositeOperation = 'destination-in';
+  offCtx.drawImage(maskImg, 0, 0, item.w, item.h);
+
+  // Draw result to main canvas
+  ctx.drawImage(offscreen, item.x, item.y);
+}
+```
+
+### Text with svgData
+
+For precise text rendering (imported SVGs):
+
+```javascript
+function renderText(ctx, item) {
+  if (item.svgData) {
+    // Use SVG rendering for precise positioning
+    // Create inline SVG and render to canvas
+    const svgStr = `<svg>...</svg>`;
+    // Use canvg or similar library
+  } else {
+    // Simple canvas text
+    ctx.font = `${item.size}px ${item.fontFamily}`;
+    ctx.fillStyle = item.color;
+    ctx.fillText(item.text, item.x, item.y);
+  }
+}
+```
+
+---
+
+## Migration Notes
+
+### From v1 to v2
+
+No migration needed - v2 is backwards compatible. New properties are optional.
+
+### For New Imports
+
+SVG imports will generate v2 data with:
+- `svgData` for text elements with complex formatting
+- `mask` for masked images
+- `isBackground` for full-size images

public/color_rm.html

@@ -812,7 +812,7 @@
         </div>
     </div>
 
-    <input type="file" id="fileIn" accept="image/*,.pdf" style="display:none" multiple>
+    <input type="file" id="fileIn" accept="image/*,.pdf,.svg" style="display:none" multiple>
     <input type="file" id="splitViewFileIn" accept=".pdf" style="display:none">
 
     <!-- PDF Library Target Selection Modal -->

public/scripts/ColorRmApp.js

@@ -6,6 +6,7 @@ import { ColorRmUI } from './modules/ColorRmUI.js';
 import { ColorRmSession } from './modules/ColorRmSession.js';
 import { ColorRmExport } from './modules/ColorRmExport.js';
 import { PerformanceManager } from './modules/ColorRmPerformance.js';
+import { ColorRmSvgImporter } from './modules/ColorRmSvgImporter.js';
 
 export class ColorRmApp {
     constructor(config = {}) {
@@ -979,6 +980,9 @@ Object.assign(ColorRmApp.prototype, ColorRmUI);
 Object.assign(ColorRmApp.prototype, ColorRmSession);
 Object.assign(ColorRmApp.prototype, ColorRmExport);
 
+// Make SVG importer available for importing SVG files
+ColorRmApp.prototype.svgImporter = ColorRmSvgImporter;
+
 // Ensure the app instance has access to export methods for other modules
 ColorRmApp.prototype.sanitizeFilename = ColorRmExport.sanitizeFilename;
 

public/scripts/modules/ColorRmRenderer.js

@@ -578,7 +578,13 @@ export const ColorRmRenderer = {
     renderObject(ctx, st, dx, dy) {
         if (!st) return; // Safety check
         ctx.save();
-        if(st.rotation && st.tool!=='pen') {
+
+        // Apply global opacity if set
+        if (st.opacity !== undefined && st.opacity < 1) {
+            ctx.globalAlpha = st.opacity;
+        }
+
+        if(st.rotation && st.tool!=='pen' && st.tool!=='highlighter') {
             const cx = st.x + st.w/2 + dx;
             const cy = st.y + st.h/2 + dy;
             ctx.translate(cx, cy);
@@ -604,14 +610,63 @@ export const ColorRmRenderer = {
             return;
         }
 
+        // Handle image objects (v2 feature)
+        if(st.tool === 'image') {
+            this._renderImage(ctx, st);
+            ctx.restore();
+            return;
+        }
+
         if(st.tool === 'text') {
-            ctx.fillStyle = st.color;
-            ctx.font = `${st.size}px sans-serif`;
-            ctx.textBaseline = 'top';
-            ctx.fillText(st.text, st.x, st.y);
+            // Check for svgData (v2 feature) for precise rendering
+            if (st.svgData && st.svgData.innerContent) {
+                this._renderSvgText(ctx, st);
+            } else {
+                // Fallback to simple canvas text
+                ctx.fillStyle = st.color || '#000000';
+                ctx.font = `${st.size || 16}px ${st.fontFamily || 'sans-serif'}`;
+                ctx.textBaseline = 'top';
+                ctx.fillText(st.text, st.x, st.y);
+            }
         } else if(st.tool === 'shape') {
-            ctx.strokeStyle = st.border; ctx.lineWidth = st.width;
-            if(st.fill!=='transparent') { ctx.fillStyle=st.fill; }
+            // Handle border/stroke with separate opacity
+            const borderColor = st.border || '#000000';
+            if (st.borderOpacity !== undefined && st.borderOpacity < 1 && borderColor.startsWith('#')) {
+                const r = parseInt(borderColor.slice(1, 3), 16);
+                const g = parseInt(borderColor.slice(3, 5), 16);
+                const b = parseInt(borderColor.slice(5, 7), 16);
+                ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${st.borderOpacity})`;
+            } else {
+                ctx.strokeStyle = borderColor;
+            }
+            ctx.lineWidth = st.width;
+
+            // Handle border/stroke dash pattern
+            if (st.borderType === 'dashed') {
+                ctx.setLineDash([st.width * 4, st.width * 2]);
+            } else if (st.borderType === 'dotted') {
+                ctx.setLineDash([st.width, st.width * 2]);
+            } else {
+                ctx.setLineDash([]);
+            }
+
+            // Handle fill with separate opacity
+            if(st.fill!=='transparent') {
+                if (st.fillOpacity !== undefined && st.fillOpacity < 1) {
+                    // Apply fill opacity by modifying the fill color
+                    const fillColor = st.fill;
+                    if (fillColor.startsWith('#')) {
+                        const r = parseInt(fillColor.slice(1, 3), 16);
+                        const g = parseInt(fillColor.slice(3, 5), 16);
+                        const b = parseInt(fillColor.slice(5, 7), 16);
+                        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${st.fillOpacity})`;
+                    } else {
+                        ctx.fillStyle = fillColor;
+                    }
+                } else {
+                    ctx.fillStyle = st.fill;
+                }
+            }
             ctx.beginPath();
             const {x,y,w,h} = st;
             const cx = x + w/2, cy = y + h/2;
@@ -664,6 +719,14 @@ export const ColorRmRenderer = {
             else if(st.shapeType==='octagon') {
                 this._drawPolygon(ctx, cx, cy, Math.min(rx, ry), 8);
             }
+            else if(st.shapeType==='polygon' && st.pts && st.pts.length >= 3) {
+                // Custom polygon with normalized points
+                ctx.moveTo(x + st.pts[0].x * w, y + st.pts[0].y * h);
+                for(let i = 1; i < st.pts.length; i++) {
+                    ctx.lineTo(x + st.pts[i].x * w, y + st.pts[i].y * h);
+                }
+                ctx.closePath();
+            }
 
             if(st.fill!=='transparent' && !['line','arrow'].includes(st.shapeType)) ctx.fill();
             ctx.stroke();
@@ -671,10 +734,29 @@ export const ColorRmRenderer = {
                 ctx.beginPath(); ctx.strokeStyle = '#f472b6'; ctx.setLineDash([2,2]); ctx.lineWidth=1;
                 ctx.moveTo(x,y); ctx.lineTo(x+w, y+h); ctx.stroke();
             }
+        } else if(st.tool === 'highlighter') {
+            // Highlighter: semi-transparent wide stroke
+            if (st.pts && st.pts.length > 0) {
+                ctx.lineCap = st.lineCap || 'round';
+                ctx.lineJoin = st.lineJoin || 'round';
+                ctx.lineWidth = st.size || 20;
+                ctx.strokeStyle = st.color || '#ffff00';
+                // Highlighter gets additional opacity if not already set via globalAlpha
+                if (st.opacity === undefined) {
+                    ctx.globalAlpha = 0.4;
+                }
+                ctx.beginPath();
+                ctx.moveTo(st.pts[0].x, st.pts[0].y);
+                for(let i=1; i<st.pts.length; i++) ctx.lineTo(st.pts[i].x, st.pts[i].y);
+                ctx.stroke();
+            }
         } else {
-            // Safety check for points
+            // Pen, eraser, and other stroke-based tools
             if (st.pts && st.pts.length > 0) {
-                ctx.lineCap='round'; ctx.lineJoin='round'; ctx.lineWidth=st.size;
+                // Use custom lineCap/lineJoin if provided, otherwise default to round
+                ctx.lineCap = st.lineCap || 'round';
+                ctx.lineJoin = st.lineJoin || 'round';
+                ctx.lineWidth = st.size;
                 ctx.strokeStyle = st.tool==='eraser' ? '#000' : st.color;
                 if(st.tool==='eraser') ctx.globalCompositeOperation='destination-out';
                 ctx.beginPath();
@@ -841,6 +923,121 @@ export const ColorRmRenderer = {
         return { minX, minY, maxX, maxY, w: maxX - minX, h: maxY - minY };
     },
 
+    // Image cache for loaded images
+    _imageCache: new Map(),
+
+    // Helper to render images (v2 feature)
+    _renderImage(ctx, st) {
+        const cacheKey = st.src;
+        let img = this._imageCache.get(cacheKey);
+
+        if (!img) {
+            // Load image asynchronously
+            img = new Image();
+            img.onload = () => {
+                this._imageCache.set(cacheKey, img);
+                img._loaded = true;
+                // Trigger re-render
+                this.invalidateCache();
+            };
+            img.onerror = () => {
+                console.warn('Failed to load image:', st.src?.substring(0, 50));
+            };
+            img.src = st.src;
+            this._imageCache.set(cacheKey, img);
+            return; // Don't render until loaded
+        }
+
+        if (!img._loaded) return; // Still loading
+
+        // Check if image has a mask (v2 feature)
+        if (st.mask && st.mask.src) {
+            this._renderMaskedImage(ctx, st, img);
+        } else {
+            // Simple image render
+            ctx.drawImage(img, st.x, st.y, st.w, st.h);
+        }
+    },
+
+    // Helper to render masked images (v2 feature)
+    _renderMaskedImage(ctx, st, contentImg) {
+        const maskCacheKey = st.mask.src;
+        let maskImg = this._imageCache.get(maskCacheKey);
+
+        if (!maskImg) {
+            maskImg = new Image();
+            maskImg.onload = () => {
+                this._imageCache.set(maskCacheKey, maskImg);
+                maskImg._loaded = true;
+                this.invalidateCache();
+            };
+            maskImg.src = st.mask.src;
+            this._imageCache.set(maskCacheKey, maskImg);
+            return;
+        }
+
+        if (!maskImg._loaded) return;
+
+        // Create offscreen canvas for masking
+        const offscreen = document.createElement('canvas');
+        offscreen.width = st.w;
+        offscreen.height = st.h;
+        const offCtx = offscreen.getContext('2d');
+
+        // Draw content image
+        offCtx.drawImage(contentImg, 0, 0, st.w, st.h);
+
+        // Apply luminance mask using globalCompositeOperation
+        // In luminance mask: white = visible, black = transparent
+        offCtx.globalCompositeOperation = 'destination-in';
+        offCtx.drawImage(maskImg, 0, 0, st.w, st.h);
+
+        // Draw result to main canvas
+        ctx.drawImage(offscreen, st.x, st.y);
+    },
+
+    // Helper to render text with SVG data (v2 feature)
+    _renderSvgText(ctx, st) {
+        // For now, fall back to simple text rendering
+        // Full SVG text rendering would require parsing transforms and tspans
+        // This is a simplified version that handles common cases
+
+        const svg = st.svgData;
+        ctx.fillStyle = svg.fill || st.color || '#000000';
+        ctx.font = `${svg.fontSize || st.size || 16}px ${svg.fontFamily || st.fontFamily || 'sans-serif'}`;
+        ctx.textBaseline = 'top';
+
+        // If we have a matrix transform, try to apply it
+        if (svg.transform && svg.transform.startsWith('matrix(')) {
+            const match = svg.transform.match(/matrix\(([^)]+)\)/);
+            if (match) {
+                const values = match[1].split(/[\s,]+/).map(parseFloat);
+                if (values.length >= 6) {
+                    // Save current transform
+                    ctx.save();
+                    // Apply matrix transform
+                    ctx.transform(values[0], values[1], values[2], values[3], values[4], values[5]);
+
+                    // Extract text from innerContent (strip tspan tags)
+                    const text = svg.innerContent.replace(/<[^>]*>/g, '').trim();
+
+                    // Get y position from tspan
+                    const yMatch = svg.innerContent.match(/y="([^"]+)"/);
+                    const xMatch = svg.innerContent.match(/x="([^"]+)"/);
+                    const y = yMatch ? parseFloat(yMatch[1]) : 0;
+                    const x = xMatch ? parseFloat(xMatch[1].split(/\s+/)[0]) : 0;
+
+                    ctx.fillText(text, x, y);
+                    ctx.restore();
+                    return;
+                }
+            }
+        }
+
+        // Fallback: use computed position
+        ctx.fillText(st.text, st.x, st.y);
+    },
+
     rgbToLab(r,g,b) {
         let r_=r/255, g_=g/255, b_=b/255;
         r_ = r_>0.04045 ? Math.pow((r_+0.055)/1.055, 2.4) : r_/12.92;

public/scripts/modules/ColorRmSession.js

@@ -1027,6 +1027,50 @@ export const ColorRmSession = {
                         console.error(e);
                         this.ui.showToast("Failed to load PDF");
                     }
+                } else if (f.type === 'image/svg+xml' || f.name?.toLowerCase().endsWith('.svg')) {
+                    // SVG import - convert to ColorRM format
+                    try {
+                        const svgContent = await f.text();
+                        const result = await this.svgImporter.importSvg(svgContent);
+
+                        if (result.metadata.error) {
+                            this.ui.showToast(`SVG import error: ${result.metadata.error}`);
+                        } else {
+                            // Create a blank canvas as the background based on SVG dimensions
+                            const svgWidth = result.metadata.width || 800;
+                            const svgHeight = result.metadata.height || 600;
+
+                            const cvs = document.createElement('canvas');
+                            cvs.width = svgWidth;
+                            cvs.height = svgHeight;
+                            const ctx = cvs.getContext('2d');
+                            ctx.fillStyle = '#ffffff';
+                            ctx.fillRect(0, 0, svgWidth, svgHeight);
+
+                            const blob = await new Promise(r => cvs.toBlob(r, 'image/png'));
+
+                            const pageId = this._generatePageId('user');
+                            const pageObj = {
+                                id: `${this.state.sessionId}_${idx}`,
+                                sessionId: this.state.sessionId,
+                                pageIndex: idx,
+                                pageId: pageId,
+                                blob: blob,
+                                history: result.history,
+                                svgMetadata: result.metadata
+                            };
+                            await this.dbPut('pages', pageObj);
+                            this.state.images.push(pageObj);
+                            if (this.state.images.length === 1) await this.loadPage(0, false);
+                            if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
+                            idx++;
+
+                            console.log(`SVG imported: ${result.metadata.elementCount} elements`);
+                        }
+                    } catch (e) {
+                        console.error('SVG import error:', e);
+                        this.ui.showToast("Failed to import SVG");
+                    }
                 } else {
                     const pageId = this._generatePageId('user');
                     const pageObj = {

public/scripts/modules/ColorRmSvgImporter.js

@@ -0,0 +1,759 @@
+/**
+ * ColorRmSvgImporter - Browser-compatible SVG to ColorRM converter
+ *
+ * Converts SVG files to ColorRM format for import into the drawing app.
+ * Supports: paths, shapes, text, images, masks, transforms
+ *
+ * Usage:
+ *   import { ColorRmSvgImporter } from './modules/ColorRmSvgImporter.js';
+ *   const result = await ColorRmSvgImporter.importSvg(svgString);
+ *   // result = { metadata: {...}, history: [...] }
+ */
+
+export const ColorRmSvgImporter = {
+    // Configuration
+    CONFIG: {
+        defaultStroke: '#000000',
+        defaultFill: 'transparent',
+        base64WarnSize: 500000
+    },
+
+    // Counter for unique IDs
+    _idCounter: 0,
+
+    // Mask definitions storage
+    _maskDefinitions: {},
+
+    /**
+     * Generate unique ID
+     */
+    generateId() {
+        return `svg_${Date.now()}_${++this._idCounter}`;
+    },
+
+    /**
+     * Parse color string to hex
+     */
+    parseColor(colorStr) {
+        if (!colorStr || colorStr === 'none') return null;
+        if (colorStr.startsWith('#')) return colorStr;
+        if (colorStr.startsWith('rgb')) {
+            const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            if (match) {
+                const r = parseInt(match[1]).toString(16).padStart(2, '0');
+                const g = parseInt(match[2]).toString(16).padStart(2, '0');
+                const b = parseInt(match[3]).toString(16).padStart(2, '0');
+                return `#${r}${g}${b}`;
+            }
+        }
+        // Named colors
+        const colors = {
+            black: '#000000', white: '#ffffff', red: '#ff0000',
+            green: '#00ff00', blue: '#0000ff', yellow: '#ffff00',
+            orange: '#ffa500', purple: '#800080', pink: '#ffc0cb'
+        };
+        return colors[colorStr.toLowerCase()] || colorStr;
+    },
+
+    /**
+     * Parse opacity value
+     */
+    parseOpacity(val) {
+        if (val === undefined || val === null || val === '') return 1;
+        const num = parseFloat(val);
+        return isNaN(num) ? 1 : Math.max(0, Math.min(1, num));
+    },
+
+    /**
+     * Parse transform attribute to matrix
+     */
+    parseTransform(transformStr) {
+        if (!transformStr) return [1, 0, 0, 1, 0, 0];
+
+        let matrix = [1, 0, 0, 1, 0, 0];
+        const transforms = transformStr.match(/(\w+)\(([^)]+)\)/g) || [];
+
+        for (const t of transforms) {
+            const match = t.match(/(\w+)\(([^)]+)\)/);
+            if (!match) continue;
+
+            const type = match[1];
+            const values = match[2].split(/[\s,]+/).map(parseFloat);
+
+            let m;
+            switch (type) {
+                case 'matrix':
+                    m = values.length >= 6 ? values.slice(0, 6) : [1, 0, 0, 1, 0, 0];
+                    break;
+                case 'translate':
+                    m = [1, 0, 0, 1, values[0] || 0, values[1] || 0];
+                    break;
+                case 'scale':
+                    const sx = values[0] || 1;
+                    const sy = values.length > 1 ? values[1] : sx;
+                    m = [sx, 0, 0, sy, 0, 0];
+                    break;
+                case 'rotate':
+                    const angle = (values[0] || 0) * Math.PI / 180;
+                    const cos = Math.cos(angle);
+                    const sin = Math.sin(angle);
+                    if (values.length === 3) {
+                        const cx = values[1], cy = values[2];
+                        m = [cos, sin, -sin, cos, cx - cx * cos + cy * sin, cy - cx * sin - cy * cos];
+                    } else {
+                        m = [cos, sin, -sin, cos, 0, 0];
+                    }
+                    break;
+                default:
+                    continue;
+            }
+            matrix = this.multiplyMatrix(matrix, m);
+        }
+
+        return matrix;
+    },
+
+    /**
+     * Multiply two transformation matrices
+     */
+    multiplyMatrix(a, b) {
+        return [
+            a[0] * b[0] + a[2] * b[1],
+            a[1] * b[0] + a[3] * b[1],
+            a[0] * b[2] + a[2] * b[3],
+            a[1] * b[2] + a[3] * b[3],
+            a[0] * b[4] + a[2] * b[5] + a[4],
+            a[1] * b[4] + a[3] * b[5] + a[5]
+        ];
+    },
+
+    /**
+     * Transform a point using a matrix
+     */
+    transformPoint(x, y, matrix) {
+        return {
+            x: matrix[0] * x + matrix[2] * y + matrix[4],
+            y: matrix[1] * x + matrix[3] * y + matrix[5]
+        };
+    },
+
+    /**
+     * Get scale factor from matrix
+     */
+    getMatrixScale(matrix) {
+        return Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+    },
+
+    /**
+     * Parse SVG path d attribute to points
+     */
+    parsePathD(d) {
+        if (!d) return [];
+
+        const points = [];
+        let x = 0, y = 0;
+        let startX = 0, startY = 0;
+
+        const commands = d.match(/[MmLlHhVvCcSsQqTtAaZz][^MmLlHhVvCcSsQqTtAaZz]*/g) || [];
+
+        for (const cmd of commands) {
+            const type = cmd[0];
+            const args = cmd.slice(1).trim().split(/[\s,]+/).map(parseFloat).filter(n => !isNaN(n));
+
+            switch (type) {
+                case 'M':
+                    x = args[0]; y = args[1];
+                    startX = x; startY = y;
+                    points.push({ x, y });
+                    for (let i = 2; i < args.length; i += 2) {
+                        x = args[i]; y = args[i + 1];
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'm':
+                    x += args[0]; y += args[1];
+                    startX = x; startY = y;
+                    points.push({ x, y });
+                    for (let i = 2; i < args.length; i += 2) {
+                        x += args[i]; y += args[i + 1];
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'L':
+                    for (let i = 0; i < args.length; i += 2) {
+                        x = args[i]; y = args[i + 1];
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'l':
+                    for (let i = 0; i < args.length; i += 2) {
+                        x += args[i]; y += args[i + 1];
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'H':
+                    for (const arg of args) {
+                        x = arg;
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'h':
+                    for (const arg of args) {
+                        x += arg;
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'V':
+                    for (const arg of args) {
+                        y = arg;
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'v':
+                    for (const arg of args) {
+                        y += arg;
+                        points.push({ x, y });
+                    }
+                    break;
+                case 'C':
+                    for (let i = 0; i < args.length; i += 6) {
+                        // Cubic bezier - sample points
+                        const x1 = args[i], y1 = args[i + 1];
+                        const x2 = args[i + 2], y2 = args[i + 3];
+                        const x3 = args[i + 4], y3 = args[i + 5];
+                        for (let t = 0.25; t <= 1; t += 0.25) {
+                            const px = Math.pow(1 - t, 3) * x + 3 * Math.pow(1 - t, 2) * t * x1 +
+                                3 * (1 - t) * t * t * x2 + t * t * t * x3;
+                            const py = Math.pow(1 - t, 3) * y + 3 * Math.pow(1 - t, 2) * t * y1 +
+                                3 * (1 - t) * t * t * y2 + t * t * t * y3;
+                            points.push({ x: px, y: py });
+                        }
+                        x = x3; y = y3;
+                    }
+                    break;
+                case 'c':
+                    for (let i = 0; i < args.length; i += 6) {
+                        const x1 = x + args[i], y1 = y + args[i + 1];
+                        const x2 = x + args[i + 2], y2 = y + args[i + 3];
+                        const x3 = x + args[i + 4], y3 = y + args[i + 5];
+                        for (let t = 0.25; t <= 1; t += 0.25) {
+                            const px = Math.pow(1 - t, 3) * x + 3 * Math.pow(1 - t, 2) * t * x1 +
+                                3 * (1 - t) * t * t * x2 + t * t * t * x3;
+                            const py = Math.pow(1 - t, 3) * y + 3 * Math.pow(1 - t, 2) * t * y1 +
+                                3 * (1 - t) * t * t * y2 + t * t * t * y3;
+                            points.push({ x: px, y: py });
+                        }
+                        x = x3; y = y3;
+                    }
+                    break;
+                case 'Q':
+                    for (let i = 0; i < args.length; i += 4) {
+                        const x1 = args[i], y1 = args[i + 1];
+                        const x2 = args[i + 2], y2 = args[i + 3];
+                        for (let t = 0.33; t <= 1; t += 0.33) {
+                            const px = Math.pow(1 - t, 2) * x + 2 * (1 - t) * t * x1 + t * t * x2;
+                            const py = Math.pow(1 - t, 2) * y + 2 * (1 - t) * t * y1 + t * t * y2;
+                            points.push({ x: px, y: py });
+                        }
+                        x = x2; y = y2;
+                    }
+                    break;
+                case 'q':
+                    for (let i = 0; i < args.length; i += 4) {
+                        const x1 = x + args[i], y1 = y + args[i + 1];
+                        const x2 = x + args[i + 2], y2 = y + args[i + 3];
+                        for (let t = 0.33; t <= 1; t += 0.33) {
+                            const px = Math.pow(1 - t, 2) * x + 2 * (1 - t) * t * x1 + t * t * x2;
+                            const py = Math.pow(1 - t, 2) * y + 2 * (1 - t) * t * y1 + t * t * y2;
+                            points.push({ x: px, y: py });
+                        }
+                        x = x2; y = y2;
+                    }
+                    break;
+                case 'Z':
+                case 'z':
+                    if (startX !== x || startY !== y) {
+                        points.push({ x: startX, y: startY });
+                    }
+                    x = startX; y = startY;
+                    break;
+            }
+        }
+
+        return points;
+    },
+
+    /**
+     * Main import function
+     * @param {string} svgContent - SVG string content
+     * @returns {Promise<{metadata: Object, history: Array}>}
+     */
+    async importSvg(svgContent) {
+        this._idCounter = 0;
+        this._maskDefinitions = {};
+
+        const history = [];
+        const warnings = [];
+
+        // Parse SVG
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgContent, 'image/svg+xml');
+        const svg = doc.querySelector('svg');
+
+        if (!svg) {
+            return { metadata: { error: 'No SVG element found' }, history: [] };
+        }
+
+        // Get dimensions
+        const viewBox = svg.getAttribute('viewBox');
+        let svgWidth = parseFloat(svg.getAttribute('width')) || 800;
+        let svgHeight = parseFloat(svg.getAttribute('height')) || 600;
+        let viewBoxData = null;
+
+        if (viewBox) {
+            const parts = viewBox.split(/[\s,]+/).map(parseFloat);
+            viewBoxData = { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+            svgWidth = svgWidth || viewBoxData.w;
+            svgHeight = svgHeight || viewBoxData.h;
+        }
+
+        // First pass: collect mask definitions
+        this._collectMasks(svg);
+
+        // Second pass: collect all elements
+        const elements = this._collectElements(svg, [1, 0, 0, 1, 0, 0], null);
+
+        // Convert elements
+        for (const elem of elements) {
+            try {
+                const item = this._convertElement(elem, svgWidth, svgHeight);
+                if (item) history.push(item);
+            } catch (e) {
+                warnings.push(`${elem.tagName} conversion error: ${e.message}`);
+            }
+        }
+
+        // Detect background images
+        const TOLERANCE = 0.05;
+        for (const item of history) {
+            if (item.tool === 'image') {
+                const widthRatio = item.w / svgWidth;
+                const heightRatio = item.h / svgHeight;
+                const xNearZero = Math.abs(item.x) < svgWidth * TOLERANCE;
+                const yNearZero = Math.abs(item.y) < svgHeight * TOLERANCE;
+                const widthMatch = widthRatio > (1 - TOLERANCE) && widthRatio < (1 + TOLERANCE);
+                const heightMatch = heightRatio > (1 - TOLERANCE) && heightRatio < (1 + TOLERANCE);
+
+                if (xNearZero && yNearZero && widthMatch && heightMatch) {
+                    item.isBackground = true;
+                }
+            }
+        }
+
+        // Statistics
+        const stats = { pen: 0, highlighter: 0, shape: 0, text: 0, image: 0 };
+        history.forEach(item => { if (stats[item.tool] !== undefined) stats[item.tool]++; });
+
+        const backgroundCount = history.filter(i => i.isBackground).length;
+
+        return {
+            metadata: {
+                version: 2,
+                sourceType: 'svg',
+                width: svgWidth,
+                height: svgHeight,
+                viewBox: viewBoxData,
+                elementCount: history.length,
+                statistics: stats,
+                backgroundCount
+            },
+            history
+        };
+    },
+
+    /**
+     * Collect mask definitions from SVG
+     */
+    _collectMasks(svg) {
+        const masks = svg.querySelectorAll('mask');
+        for (const mask of masks) {
+            const id = mask.getAttribute('id');
+            if (!id) continue;
+
+            const image = mask.querySelector('image');
+            if (image) {
+                const href = image.getAttribute('href') || image.getAttribute('xlink:href');
+                if (href) {
+                    this._maskDefinitions[id] = {
+                        imageData: href,
+                        type: 'luminance'
+                    };
+                }
+            }
+        }
+    },
+
+    /**
+     * Recursively collect elements from SVG
+     */
+    _collectElements(parent, transform, maskId) {
+        const elements = [];
+        const drawableTags = ['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'text', 'image'];
+
+        for (const child of parent.children) {
+            const tagName = child.tagName.toLowerCase();
+
+            // Skip defs, mask, clippath, style, etc.
+            if (['defs', 'mask', 'clippath', 'style', 'script', 'title', 'desc'].includes(tagName)) {
+                continue;
+            }
+
+            // Parse element transform
+            const elemTransform = this.parseTransform(child.getAttribute('transform'));
+            const combinedTransform = this.multiplyMatrix(transform, elemTransform);
+
+            // Check for mask on groups
+            let currentMaskId = maskId;
+            const maskAttr = child.getAttribute('mask');
+            if (maskAttr) {
+                const match = maskAttr.match(/url\(#([^)]+)\)/);
+                if (match) currentMaskId = match[1];
+            }
+
+            if (tagName === 'g' || tagName === 'svg') {
+                // Recurse into groups
+                const childElements = this._collectElements(child, combinedTransform, currentMaskId);
+                elements.push(...childElements);
+            } else if (drawableTags.includes(tagName)) {
+                elements.push({
+                    element: child,
+                    tagName,
+                    transform: combinedTransform,
+                    maskId: currentMaskId
+                });
+            }
+        }
+
+        return elements;
+    },
+
+    /**
+     * Convert a single element to ColorRM format
+     */
+    _convertElement(elemData, docWidth, docHeight) {
+        const { element, tagName, transform, maskId } = elemData;
+
+        switch (tagName) {
+            case 'path':
+                return this._convertPath(element, transform);
+            case 'rect':
+                return this._convertRect(element, transform);
+            case 'circle':
+            case 'ellipse':
+                return this._convertEllipse(element, transform);
+            case 'line':
+                return this._convertLine(element, transform);
+            case 'polyline':
+            case 'polygon':
+                return this._convertPolyline(element, transform, tagName === 'polygon');
+            case 'text':
+                return this._convertText(element, transform);
+            case 'image':
+                return this._convertImage(element, transform, maskId);
+            default:
+                return null;
+        }
+    },
+
+    /**
+     * Get attribute with style fallback
+     */
+    _getAttr(element, name) {
+        let val = element.getAttribute(name);
+        if (val) return val;
+
+        // Check style attribute
+        const style = element.getAttribute('style');
+        if (style) {
+            const match = style.match(new RegExp(`${name}:\\s*([^;]+)`));
+            if (match) return match[1].trim();
+        }
+
+        return null;
+    },
+
+    /**
+     * Convert path element
+     */
+    _convertPath(element, transform) {
+        const d = element.getAttribute('d');
+        if (!d) return null;
+
+        const pts = this.parsePathD(d);
+        if (pts.length < 2) return null;
+
+        // Transform points
+        const transformedPts = pts.map(p => this.transformPoint(p.x, p.y, transform));
+
+        const stroke = this._getAttr(element, 'stroke');
+        const fill = this._getAttr(element, 'fill');
+        const strokeWidth = parseFloat(this._getAttr(element, 'stroke-width')) || 1;
+        const opacity = this.parseOpacity(this._getAttr(element, 'opacity'));
+        const strokeOpacity = this.parseOpacity(this._getAttr(element, 'stroke-opacity'));
+
+        // Determine tool type
+        let tool = 'pen';
+        const effectiveOpacity = opacity * strokeOpacity;
+        if (effectiveOpacity < 0.6 && effectiveOpacity > 0.1) {
+            tool = 'highlighter';
+        }
+
+        return {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool,
+            pts: transformedPts,
+            color: this.parseColor(stroke) || this.CONFIG.defaultStroke,
+            size: strokeWidth * this.getMatrixScale(transform),
+            opacity: effectiveOpacity < 1 ? effectiveOpacity : undefined,
+            lineCap: this._getAttr(element, 'stroke-linecap') || 'round',
+            lineJoin: this._getAttr(element, 'stroke-linejoin') || 'round',
+            deleted: false
+        };
+    },
+
+    /**
+     * Convert rect element
+     */
+    _convertRect(element, transform) {
+        const x = parseFloat(element.getAttribute('x')) || 0;
+        const y = parseFloat(element.getAttribute('y')) || 0;
+        const w = parseFloat(element.getAttribute('width')) || 0;
+        const h = parseFloat(element.getAttribute('height')) || 0;
+
+        if (w === 0 || h === 0) return null;
+
+        const topLeft = this.transformPoint(x, y, transform);
+        const bottomRight = this.transformPoint(x + w, y + h, transform);
+
+        return {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'shape',
+            shapeType: 'rectangle',
+            x: topLeft.x,
+            y: topLeft.y,
+            w: bottomRight.x - topLeft.x,
+            h: bottomRight.y - topLeft.y,
+            fill: this.parseColor(this._getAttr(element, 'fill')) || 'transparent',
+            border: this.parseColor(this._getAttr(element, 'stroke')) || '#000000',
+            width: parseFloat(this._getAttr(element, 'stroke-width')) || 1,
+            fillOpacity: this.parseOpacity(this._getAttr(element, 'fill-opacity')),
+            borderOpacity: this.parseOpacity(this._getAttr(element, 'stroke-opacity')),
+            deleted: false
+        };
+    },
+
+    /**
+     * Convert circle/ellipse element
+     */
+    _convertEllipse(element, transform) {
+        let cx, cy, rx, ry;
+
+        if (element.tagName.toLowerCase() === 'circle') {
+            cx = parseFloat(element.getAttribute('cx')) || 0;
+            cy = parseFloat(element.getAttribute('cy')) || 0;
+            rx = ry = parseFloat(element.getAttribute('r')) || 0;
+        } else {
+            cx = parseFloat(element.getAttribute('cx')) || 0;
+            cy = parseFloat(element.getAttribute('cy')) || 0;
+            rx = parseFloat(element.getAttribute('rx')) || 0;
+            ry = parseFloat(element.getAttribute('ry')) || 0;
+        }
+
+        if (rx === 0 || ry === 0) return null;
+
+        const topLeft = this.transformPoint(cx - rx, cy - ry, transform);
+        const bottomRight = this.transformPoint(cx + rx, cy + ry, transform);
+
+        return {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'shape',
+            shapeType: 'circle',
+            x: topLeft.x,
+            y: topLeft.y,
+            w: bottomRight.x - topLeft.x,
+            h: bottomRight.y - topLeft.y,
+            fill: this.parseColor(this._getAttr(element, 'fill')) || 'transparent',
+            border: this.parseColor(this._getAttr(element, 'stroke')) || '#000000',
+            width: parseFloat(this._getAttr(element, 'stroke-width')) || 1,
+            deleted: false
+        };
+    },
+
+    /**
+     * Convert line element
+     */
+    _convertLine(element, transform) {
+        const x1 = parseFloat(element.getAttribute('x1')) || 0;
+        const y1 = parseFloat(element.getAttribute('y1')) || 0;
+        const x2 = parseFloat(element.getAttribute('x2')) || 0;
+        const y2 = parseFloat(element.getAttribute('y2')) || 0;
+
+        const p1 = this.transformPoint(x1, y1, transform);
+        const p2 = this.transformPoint(x2, y2, transform);
+
+        return {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'pen',
+            pts: [p1, p2],
+            color: this.parseColor(this._getAttr(element, 'stroke')) || this.CONFIG.defaultStroke,
+            size: parseFloat(this._getAttr(element, 'stroke-width')) || 1,
+            deleted: false
+        };
+    },
+
+    /**
+     * Convert polyline/polygon element
+     */
+    _convertPolyline(element, transform, isClosed) {
+        const pointsStr = element.getAttribute('points');
+        if (!pointsStr) return null;
+
+        const coords = pointsStr.trim().split(/[\s,]+/).map(parseFloat);
+        const pts = [];
+        for (let i = 0; i < coords.length - 1; i += 2) {
+            const p = this.transformPoint(coords[i], coords[i + 1], transform);
+            pts.push(p);
+        }
+
+        if (pts.length < 2) return null;
+
+        if (isClosed && (pts[0].x !== pts[pts.length - 1].x || pts[0].y !== pts[pts.length - 1].y)) {
+            pts.push({ ...pts[0] });
+        }
+
+        return {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'pen',
+            pts,
+            color: this.parseColor(this._getAttr(element, 'stroke')) || this.CONFIG.defaultStroke,
+            size: parseFloat(this._getAttr(element, 'stroke-width')) || 1,
+            deleted: false
+        };
+    },
+
+    /**
+     * Convert text element
+     */
+    _convertText(element, transform) {
+        const text = element.textContent.trim();
+        if (!text) return null;
+
+        // Get position from tspan or text element
+        let x = 0, y = 0;
+        const tspan = element.querySelector('tspan');
+        if (tspan) {
+            const tspanX = tspan.getAttribute('x');
+            const tspanY = tspan.getAttribute('y');
+            x = parseFloat(tspanX?.split(/\s+/)[0]) || 0;
+            y = parseFloat(tspanY) || 0;
+        } else {
+            x = parseFloat(element.getAttribute('x')) || 0;
+            y = parseFloat(element.getAttribute('y')) || 0;
+        }
+
+        const pos = this.transformPoint(x, y, transform);
+        const fontSize = parseFloat(this._getAttr(element, 'font-size')) || 16;
+        const fontFamily = this._getAttr(element, 'font-family');
+        const fill = this._getAttr(element, 'fill');
+        const elemTransform = element.getAttribute('transform');
+
+        const result = {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'text',
+            text,
+            x: pos.x,
+            y: pos.y,
+            size: fontSize * this.getMatrixScale(transform),
+            color: this.parseColor(fill) || this.CONFIG.defaultStroke,
+            fontFamily: fontFamily || 'sans-serif',
+            w: text.length * fontSize * 0.6,
+            h: fontSize * 1.2,
+            deleted: false
+        };
+
+        // Store original SVG data for precise rendering
+        if (elemTransform || element.innerHTML.includes('<tspan')) {
+            result.svgData = {
+                transform: elemTransform,
+                xmlSpace: element.getAttribute('xml:space'),
+                fontSize: this._getAttr(element, 'font-size'),
+                fontFamily: fontFamily,
+                fill: fill,
+                innerContent: element.innerHTML
+            };
+        }
+
+        return result;
+    },
+
+    /**
+     * Convert image element
+     */
+    _convertImage(element, transform, maskId) {
+        const x = parseFloat(element.getAttribute('x')) || 0;
+        const y = parseFloat(element.getAttribute('y')) || 0;
+        const w = parseFloat(element.getAttribute('width')) || 0;
+        const h = parseFloat(element.getAttribute('height')) || 0;
+        const href = element.getAttribute('href') || element.getAttribute('xlink:href');
+
+        if (!href || w === 0 || h === 0) return null;
+
+        const topLeft = this.transformPoint(x, y, transform);
+        const bottomRight = this.transformPoint(x + w, y + h, transform);
+
+        const result = {
+            id: this.generateId(),
+            lastMod: Date.now(),
+            tool: 'image',
+            x: topLeft.x,
+            y: topLeft.y,
+            w: Math.abs(bottomRight.x - topLeft.x),
+            h: Math.abs(bottomRight.y - topLeft.y),
+            src: href,
+            rotation: 0,
+            deleted: false
+        };
+
+        // Add mask data if present
+        if (maskId && this._maskDefinitions[maskId]) {
+            result.mask = {
+                id: maskId,
+                type: this._maskDefinitions[maskId].type,
+                src: this._maskDefinitions[maskId].imageData
+            };
+        }
+
+        return result;
+    },
+
+    /**
+     * Import SVG from File object
+     * @param {File} file - SVG file
+     * @returns {Promise<{metadata: Object, history: Array}>}
+     */
+    async importSvgFile(file) {
+        const content = await file.text();
+        return this.importSvg(content);
+    }
+};
+
+// Make available globally for non-module usage
+if (typeof window !== 'undefined') {
+    window.ColorRmSvgImporter = ColorRmSvgImporter;
+}

tools/colorrm-to-svg.cjs

@@ -0,0 +1,540 @@
+#!/usr/bin/env node
+/**
+ * ColorRM to SVG Converter - Pro Version
+ *
+ * Converts ColorRM JSON format back to SVG for round-trip testing.
+ * Handles all ColorRM properties including:
+ * - opacity (global alpha)
+ * - lineCap, lineJoin
+ * - highlighter tool
+ * - shapes, text, images, groups
+ *
+ * Usage: node colorrm-to-svg.cjs input.json [output.svg]
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Convert a color object or string to SVG color
+function toSvgColor(color) {
+    if (!color) return 'black';
+    if (typeof color === 'string') return color;
+    if (color.r !== undefined) {
+        const a = color.a !== undefined ? color.a : 1;
+        if (a < 1) {
+            return `rgba(${color.r},${color.g},${color.b},${a})`;
+        }
+        return `rgb(${color.r},${color.g},${color.b})`;
+    }
+    return 'black';
+}
+
+// Build opacity attribute string
+function opacityAttr(item) {
+    if (item.opacity !== undefined && item.opacity < 1) {
+        return ` opacity="${item.opacity.toFixed(4)}"`;
+    }
+    return '';
+}
+
+// Build stroke properties string
+function strokeProps(item, defaultCap = 'round', defaultJoin = 'round') {
+    const lineCap = item.lineCap || defaultCap;
+    const lineJoin = item.lineJoin || defaultJoin;
+    return ` stroke-linecap="${lineCap}" stroke-linejoin="${lineJoin}"`;
+}
+
+// Convert pen stroke to SVG path
+function penToSvg(item) {
+    if (!item.pts || item.pts.length === 0) return '';
+
+    const color = toSvgColor(item.color);
+    const strokeWidth = item.size || 2;
+
+    // Build path d attribute
+    let d = `M ${item.pts[0].x.toFixed(2)} ${item.pts[0].y.toFixed(2)}`;
+    for (let i = 1; i < item.pts.length; i++) {
+        d += ` L ${item.pts[i].x.toFixed(2)} ${item.pts[i].y.toFixed(2)}`;
+    }
+
+    const transform = item.rotation ? ` transform="rotate(${item.rotation})"` : '';
+    const opacity = opacityAttr(item);
+    const strokeAttrs = strokeProps(item);
+
+    return `  <path d="${d}" stroke="${color}" stroke-width="${strokeWidth}" fill="none"${strokeAttrs}${opacity}${transform}/>`;
+}
+
+// Convert highlighter stroke to SVG path with opacity
+function highlighterToSvg(item) {
+    if (!item.pts || item.pts.length === 0) return '';
+
+    const color = toSvgColor(item.color);
+    const strokeWidth = item.size || 20;
+
+    let d = `M ${item.pts[0].x.toFixed(2)} ${item.pts[0].y.toFixed(2)}`;
+    for (let i = 1; i < item.pts.length; i++) {
+        d += ` L ${item.pts[i].x.toFixed(2)} ${item.pts[i].y.toFixed(2)}`;
+    }
+
+    const transform = item.rotation ? ` transform="rotate(${item.rotation})"` : '';
+    const strokeAttrs = strokeProps(item);
+
+    // Highlighter uses its own opacity or defaults to 0.4
+    const effectiveOpacity = item.opacity !== undefined ? item.opacity : 0.4;
+
+    return `  <path d="${d}" stroke="${color}" stroke-width="${strokeWidth}" fill="none"${strokeAttrs} opacity="${effectiveOpacity.toFixed(4)}"${transform}/>`;
+}
+
+// Convert shape to SVG element
+function shapeToSvg(item) {
+    const x = item.x || 0;
+    const y = item.y || 0;
+    const w = item.width || item.w || 100;
+    const h = item.height || item.h || 100;
+    const strokeWidth = item.borderSize || item.width || 2;
+    const rotation = item.rotation || 0;
+
+    // Handle fill with separate opacity (support both fillColor and fill)
+    let fill = 'none';
+    const fillColorVal = item.fillColor || item.fill;
+    if (fillColorVal && fillColorVal !== 'transparent') {
+        if (item.fillOpacity !== undefined && item.fillOpacity < 1) {
+            // Apply fill opacity using rgba
+            const fillColor = fillColorVal;
+            if (fillColor.startsWith('#')) {
+                const r = parseInt(fillColor.slice(1, 3), 16);
+                const g = parseInt(fillColor.slice(3, 5), 16);
+                const b = parseInt(fillColor.slice(5, 7), 16);
+                fill = `rgba(${r},${g},${b},${item.fillOpacity.toFixed(4)})`;
+            } else {
+                fill = toSvgColor(fillColor);
+            }
+        } else {
+            fill = toSvgColor(fillColorVal);
+        }
+    }
+
+    // Handle border with separate opacity (support both borderColor and border)
+    const borderColorVal = item.borderColor || item.border || '#000000';
+    let border = toSvgColor(borderColorVal);
+    if (item.borderOpacity !== undefined && item.borderOpacity < 1) {
+        if (borderColorVal && borderColorVal.startsWith('#')) {
+            const r = parseInt(borderColorVal.slice(1, 3), 16);
+            const g = parseInt(borderColorVal.slice(3, 5), 16);
+            const b = parseInt(borderColorVal.slice(5, 7), 16);
+            border = `rgba(${r},${g},${b},${item.borderOpacity.toFixed(4)})`;
+        }
+    }
+
+    // Handle border dash pattern
+    let strokeDasharray = '';
+    if (item.borderType === 'dashed') {
+        strokeDasharray = ` stroke-dasharray="${strokeWidth * 4},${strokeWidth * 2}"`;
+    } else if (item.borderType === 'dotted') {
+        strokeDasharray = ` stroke-dasharray="${strokeWidth},${strokeWidth * 2}"`;
+    }
+
+    const opacity = opacityAttr(item);
+
+    // Calculate center for rotation
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const transform = rotation ? ` transform="rotate(${rotation} ${cx} ${cy})"` : '';
+
+    switch (item.shapeType) {
+        case 'rectangle':
+        case 'roundedRect':
+            return `  <rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'ellipse':
+        case 'circle':
+            const rx = w / 2;
+            const ry = h / 2;
+            return `  <ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'triangle':
+            const p1 = `${cx},${y}`;
+            const p2 = `${x},${y + h}`;
+            const p3 = `${x + w},${y + h}`;
+            return `  <polygon points="${p1} ${p2} ${p3}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'diamond':
+            const d1 = `${cx},${y}`;
+            const d2 = `${x + w},${cy}`;
+            const d3 = `${cx},${y + h}`;
+            const d4 = `${x},${cy}`;
+            return `  <polygon points="${d1} ${d2} ${d3} ${d4}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'star':
+            // 5-pointed star
+            const starPoints = [];
+            const outerR = Math.min(w, h) / 2;
+            const innerR = outerR * 0.4;
+            for (let i = 0; i < 10; i++) {
+                const angle = (i * 36 - 90) * Math.PI / 180;
+                const r = i % 2 === 0 ? outerR : innerR;
+                starPoints.push(`${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`);
+            }
+            return `  <polygon points="${starPoints.join(' ')}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'hexagon':
+            const hexPoints = [];
+            const hexR = Math.min(w, h) / 2;
+            for (let i = 0; i < 6; i++) {
+                const angle = (i * 60 - 30) * Math.PI / 180;
+                hexPoints.push(`${(cx + hexR * Math.cos(angle)).toFixed(2)},${(cy + hexR * Math.sin(angle)).toFixed(2)}`);
+            }
+            return `  <polygon points="${hexPoints.join(' ')}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'pentagon':
+            const pentPoints = [];
+            const pentR = Math.min(w, h) / 2;
+            for (let i = 0; i < 5; i++) {
+                const angle = (i * 72 - 90) * Math.PI / 180;
+                pentPoints.push(`${(cx + pentR * Math.cos(angle)).toFixed(2)},${(cy + pentR * Math.sin(angle)).toFixed(2)}`);
+            }
+            return `  <polygon points="${pentPoints.join(' ')}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'octagon':
+            const octPoints = [];
+            const octR = Math.min(w, h) / 2;
+            for (let i = 0; i < 8; i++) {
+                const angle = (i * 45 - 22.5) * Math.PI / 180;
+                octPoints.push(`${(cx + octR * Math.cos(angle)).toFixed(2)},${(cy + octR * Math.sin(angle)).toFixed(2)}`);
+            }
+            return `  <polygon points="${octPoints.join(' ')}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'polygon':
+            // Custom polygon with normalized points
+            if (item.pts && item.pts.length >= 3) {
+                const polyPoints = item.pts.map(p =>
+                    `${(x + p.x * w).toFixed(2)},${(y + p.y * h).toFixed(2)}`
+                );
+                return `  <polygon points="${polyPoints.join(' ')}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+            }
+            // Fallback to rectangle if no points
+            return `  <rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'arrow':
+            // Arrow pointing right
+            const arrowPath = `M ${x} ${y + h*0.3} L ${x + w*0.6} ${y + h*0.3} L ${x + w*0.6} ${y} L ${x + w} ${y + h/2} L ${x + w*0.6} ${y + h} L ${x + w*0.6} ${y + h*0.7} L ${x} ${y + h*0.7} Z`;
+            return `  <path d="${arrowPath}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        case 'line':
+            return `  <line x1="${x}" y1="${y}" x2="${x + w}" y2="${y + h}" stroke="${border}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+
+        default:
+            // Default to rectangle
+            return `  <rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${border}" fill="${fill}" stroke-width="${strokeWidth}"${strokeDasharray}${opacity}${transform}/>`;
+    }
+}
+
+// Convert text to SVG text element
+function textToSvg(item) {
+    // If we have original SVG data, use it for precise reproduction
+    if (item.svgData) {
+        const svg = item.svgData;
+        let attrs = '';
+        if (svg.xmlSpace) attrs += ` xml:space="${svg.xmlSpace}"`;
+        if (svg.transform) attrs += ` transform="${svg.transform}"`;
+        if (svg.fontSize) attrs += ` font-size="${svg.fontSize}"`;
+        if (svg.fontFamily) attrs += ` font-family="${svg.fontFamily}"`;
+        if (svg.fill) attrs += ` fill="${svg.fill}"`;
+
+        return `  <text${attrs}>${svg.innerContent}</text>`;
+    }
+
+    // Fallback to simple text rendering
+    const x = item.x || 0;
+    const y = item.y || 0;
+    const fontSize = item.size || 16;
+    const color = toSvgColor(item.color);
+    const text = item.text || '';
+    const rotation = item.rotation || 0;
+    const opacity = opacityAttr(item);
+    const fontFamily = item.fontFamily || 'sans-serif';
+
+    const transform = rotation ? ` transform="rotate(${rotation} ${x} ${y})"` : '';
+
+    // Escape XML special characters
+    const escapedText = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+
+    // Handle multi-line text
+    const lines = escapedText.split('\n');
+    if (lines.length === 1) {
+        return `  <text x="${x}" y="${y + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" fill="${color}"${opacity}${transform}>${escapedText}</text>`;
+    }
+
+    // Multi-line text using tspan
+    let svgText = `  <text x="${x}" y="${y + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" fill="${color}"${opacity}${transform}>`;
+    lines.forEach((line, i) => {
+        if (i === 0) {
+            svgText += `<tspan>${line}</tspan>`;
+        } else {
+            svgText += `<tspan x="${x}" dy="${fontSize * 1.2}">${line}</tspan>`;
+        }
+    });
+    svgText += '</text>';
+    return svgText;
+}
+
+// Convert image to SVG image element
+// Returns { svg: string, maskDef: string|null, maskId: string|null }
+function imageToSvg(item) {
+    const x = item.x || 0;
+    const y = item.y || 0;
+    const w = item.w || 100;
+    const h = item.h || 100;
+    const src = item.src || '';
+    const rotation = item.rotation || 0;
+    const opacity = opacityAttr(item);
+
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const transform = rotation ? ` transform="rotate(${rotation} ${cx} ${cy})"` : '';
+
+    let imageSvg = `  <image x="${x}" y="${y}" width="${w}" height="${h}" href="${src}"${opacity}${transform}/>`;
+
+    // If this image has a mask, return mask info for defs
+    if (item.mask && item.mask.src) {
+        const maskId = item.mask.id || `mask_${item.id}`;
+        // Mask definition - image inside mask element
+        const maskDef = `    <mask id="${maskId}">
+      <image x="${x}" y="${y}" width="${w}" height="${h}" href="${item.mask.src}"/>
+    </mask>`;
+        // Wrap the image in a group with the mask
+        imageSvg = `  <g mask="url(#${maskId})">
+    <image x="${x}" y="${y}" width="${w}" height="${h}" href="${src}"${opacity}${transform}/>
+  </g>`;
+        return { svg: imageSvg, maskDef, maskId };
+    }
+
+    return { svg: imageSvg, maskDef: null, maskId: null };
+}
+
+// Convert group to SVG group element
+// Note: Returns string only - mask defs from children won't be captured here
+// (Groups with masked images would need more complex handling)
+function groupToSvg(item, allItems) {
+    if (!item.children || item.children.length === 0) return '';
+
+    const rotation = item.rotation || 0;
+    const x = item.x || 0;
+    const y = item.y || 0;
+    const w = item.w || 0;
+    const h = item.h || 0;
+    const opacity = opacityAttr(item);
+
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const transform = rotation ? ` transform="rotate(${rotation} ${cx} ${cy})"` : '';
+
+    let content = '';
+    for (const child of item.children) {
+        // Children can be inline objects or IDs referencing allItems
+        let childItem = child;
+        if (typeof child === 'string' || typeof child === 'number') {
+            childItem = allItems.find(it => it.id === child);
+        }
+        if (childItem && !childItem.deleted) {
+            const result = itemToSvg(childItem, allItems);
+            content += '\n' + result.svg;
+        }
+    }
+
+    return `  <g id="${item.id}"${opacity}${transform}>${content}\n  </g>`;
+}
+
+// Convert any item to SVG
+// Returns { svg: string, maskDef: string|null } for items that may have masks
+function itemToSvg(item, allItems) {
+    if (!item || item.deleted) return { svg: '', maskDef: null };
+
+    switch (item.tool) {
+        case 'pen':
+            return { svg: penToSvg(item), maskDef: null };
+        case 'highlighter':
+            return { svg: highlighterToSvg(item), maskDef: null };
+        case 'shape':
+            return { svg: shapeToSvg(item), maskDef: null };
+        case 'text':
+            return { svg: textToSvg(item), maskDef: null };
+        case 'image':
+            return imageToSvg(item);  // Already returns { svg, maskDef, maskId }
+        case 'group':
+            return { svg: groupToSvg(item, allItems), maskDef: null };
+        default:
+            // Try to handle as pen if it has pts
+            if (item.pts) return { svg: penToSvg(item), maskDef: null };
+            return { svg: '', maskDef: null };
+    }
+}
+
+// Main conversion function
+function convertToSvg(colorrmData) {
+    const metadata = colorrmData.metadata || {};
+    const history = colorrmData.history || [];
+
+    // Get canvas dimensions
+    const width = metadata.width || 1920;
+    const height = metadata.height || 1080;
+    const title = metadata.title || 'ColorRM Export';
+
+    // Collect mask definitions and SVG content
+    const maskDefs = [];
+    const svgElements = [];
+
+    // Track which items are children of groups (to avoid double-rendering)
+    const groupChildren = new Set();
+    for (const item of history) {
+        if (item.tool === 'group' && item.children) {
+            for (const child of item.children) {
+                // Handle both inline objects and ID references
+                if (typeof child === 'object' && child.id) {
+                    groupChildren.add(child.id);
+                } else {
+                    groupChildren.add(child);
+                }
+            }
+        }
+    }
+
+    // Convert each item (skip group children as they're rendered inside groups)
+    for (const item of history) {
+        if (item.deleted) continue;
+        if (groupChildren.has(item.id)) continue; // Skip, will be rendered in group
+
+        const result = itemToSvg(item, history);
+        if (result.svg) {
+            svgElements.push(result.svg);
+        }
+        if (result.maskDef) {
+            maskDefs.push(result.maskDef);
+        }
+    }
+
+    // Build final SVG with defs section if we have masks
+    let svgContent = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+  <title>${title}</title>
+  <desc>Exported from ColorRM - Pro Version</desc>
+`;
+
+    // Add defs section if we have mask definitions
+    if (maskDefs.length > 0) {
+        svgContent += `  <defs>\n${maskDefs.join('\n')}\n  </defs>\n`;
+    }
+
+    // Add all SVG elements
+    svgContent += svgElements.join('\n') + '\n';
+
+    svgContent += '</svg>';
+    return svgContent;
+}
+
+// CLI interface
+function main() {
+    const args = process.argv.slice(2);
+
+    if (args.length === 0) {
+        console.log(`
+ColorRM to SVG Converter - Pro Version
+======================================
+
+Usage:
+  node colorrm-to-svg.cjs input.json [output.svg]
+
+Converts ColorRM JSON format back to SVG.
+If no output file is specified, uses input filename with .roundtrip.svg extension.
+
+Supported Features:
+  ✓ Pen strokes with lineCap/lineJoin
+  ✓ Highlighter strokes with opacity
+  ✓ All shape types (rectangle, ellipse, triangle, etc.)
+  ✓ Text elements
+  ✓ Images (including base64)
+  ✓ Groups with nested items
+  ✓ Opacity/transparency
+  ✓ Rotation transforms
+`);
+        process.exit(0);
+    }
+
+    const inputFile = args[0];
+    const outputFile = args[1] || inputFile.replace(/\.(json|colorrm\.json)$/i, '') + '.roundtrip.svg';
+
+    // Read input file
+    console.log(`Reading: ${inputFile}`);
+    let content;
+    try {
+        content = fs.readFileSync(inputFile, 'utf-8');
+    } catch (err) {
+        console.error(`Error reading file: ${err.message}`);
+        process.exit(1);
+    }
+
+    // Parse JSON
+    let colorrmData;
+    try {
+        colorrmData = JSON.parse(content);
+    } catch (err) {
+        console.error(`Error parsing JSON: ${err.message}`);
+        process.exit(1);
+    }
+
+    // Convert
+    console.log('Converting ColorRM to SVG format...');
+    const history = colorrmData.history || [];
+
+    // Count elements by type
+    const counts = {};
+    for (const item of history) {
+        if (!item.deleted) {
+            const tool = item.tool || 'unknown';
+            counts[tool] = (counts[tool] || 0) + 1;
+        }
+    }
+
+    console.log('Element statistics:');
+    for (const [tool, count] of Object.entries(counts)) {
+        console.log(`  ${tool}: ${count} elements`);
+    }
+
+    const svgContent = convertToSvg(colorrmData);
+
+    // Write output
+    console.log(`\nWriting: ${outputFile}`);
+    try {
+        fs.writeFileSync(outputFile, svgContent, 'utf-8');
+    } catch (err) {
+        console.error(`Error writing file: ${err.message}`);
+        process.exit(1);
+    }
+
+    const outputSize = fs.statSync(outputFile).size;
+    console.log(`Output size: ${Math.round(outputSize / 1024)}KB`);
+    console.log('Done!');
+}
+
+// Run if called directly
+if (require.main === module) {
+    main();
+}
+
+// Export for programmatic use
+module.exports = {
+    convertToSvg,
+    itemToSvg,
+    penToSvg,
+    highlighterToSvg,
+    shapeToSvg,
+    textToSvg,
+    imageToSvg,
+    groupToSvg
+};

tools/svg-deep-analysis.py

@@ -0,0 +1,185 @@
+#!/usr/bin/env python3
+"""
+SVG Deep Analysis Tool
+
+Deeper analysis of the original SVG structure to understand the exact pattern
+"""
+
+import re
+import sys
+from collections import defaultdict
+
+def extract_paths_with_details(svg_content, limit=50):
+    """Extract detailed path information"""
+    # More robust pattern for paths
+    path_pattern = r'<(?:\w+:)?path\s+([^>]*)/?>'
+
+    paths = []
+    for i, match in enumerate(re.finditer(path_pattern, svg_content, re.IGNORECASE)):
+        if i >= limit:
+            break
+
+        attrs_str = match.group(1)
+
+        # Parse all attributes
+        attrs = {}
+        for attr_match in re.finditer(r'(\w+(?:-\w+)*)="([^"]*)"', attrs_str):
+            attrs[attr_match.group(1)] = attr_match.group(2)
+
+        # Get d length
+        d = attrs.get('d', '')
+        attrs['_d_length'] = len(d)
+        attrs['_d_preview'] = d[:100] + '...' if len(d) > 100 else d
+
+        paths.append({
+            'index': i,
+            'position': match.start(),
+            'attrs': attrs
+        })
+
+    return paths
+
+def analyze_path_patterns(paths):
+    """Analyze patterns in path definitions"""
+    patterns = []
+
+    for i in range(0, min(len(paths), 20), 2):
+        if i + 1 < len(paths):
+            p1 = paths[i]['attrs']
+            p2 = paths[i + 1]['attrs']
+
+            same_d = p1.get('d', '') == paths[i+1]['attrs'].get('d', '') if '_d_length' not in p1 else p1.get('_d_length') == p2.get('_d_length')
+
+            pattern = {
+                'pair': f"{i} & {i+1}",
+                'same_path_data': same_d,
+                'path1': {
+                    'fill': p1.get('fill'),
+                    'stroke': p1.get('stroke'),
+                    'opacity': p1.get('opacity'),
+                    'fill-opacity': p1.get('fill-opacity'),
+                    'stroke-width': p1.get('stroke-width')
+                },
+                'path2': {
+                    'fill': p2.get('fill'),
+                    'stroke': p2.get('stroke'),
+                    'opacity': p2.get('opacity'),
+                    'fill-opacity': p2.get('fill-opacity'),
+                    'stroke-width': p2.get('stroke-width')
+                }
+            }
+            patterns.append(pattern)
+
+    return patterns
+
+def find_group_structure(svg_content):
+    """Analyze group nesting structure"""
+    # Find all groups and their attributes
+    group_pattern = r'<(?:\w+:)?g\s+([^>]*)>'
+
+    groups = []
+    for match in re.finditer(group_pattern, svg_content, re.IGNORECASE):
+        attrs_str = match.group(1)
+        attrs = {}
+        for attr_match in re.finditer(r'(\w+(?:-\w+)*)="([^"]*)"', attrs_str):
+            attrs[attr_match.group(1)] = attr_match.group(2)
+
+        groups.append({
+            'position': match.start(),
+            'attrs': attrs
+        })
+
+    return groups
+
+def main():
+    if len(sys.argv) < 2:
+        print("Usage: python svg-deep-analysis.py <file.svg>")
+        sys.exit(1)
+
+    filepath = sys.argv[1]
+    with open(filepath, 'r') as f:
+        content = f.read()
+
+    print(f"\n{'='*70}")
+    print(f"DEEP SVG ANALYSIS: {filepath}")
+    print('='*70)
+
+    # Analyze groups
+    groups = find_group_structure(content)
+    print(f"\n📁 GROUPS ({len(groups)}):")
+    for i, g in enumerate(groups[:10]):
+        print(f"   Group {i}: {g['attrs']}")
+
+    # Analyze paths in detail
+    paths = extract_paths_with_details(content, limit=30)
+
+    print(f"\n📝 FIRST 30 PATHS DETAILS:")
+    for p in paths[:30]:
+        attrs = p['attrs']
+        print(f"\n   Path {p['index']}:")
+        print(f"      fill: {attrs.get('fill', 'NONE')}")
+        print(f"      stroke: {attrs.get('stroke', 'NONE')}")
+        print(f"      stroke-width: {attrs.get('stroke-width', 'NONE')}")
+        print(f"      opacity: {attrs.get('opacity', 'NONE')}")
+        print(f"      fill-opacity: {attrs.get('fill-opacity', 'NONE')}")
+        print(f"      d length: {attrs.get('_d_length')}")
+
+    # Analyze patterns
+    patterns = analyze_path_patterns(paths)
+    print(f"\n🔍 PATH PAIR PATTERNS (checking if paths come in fill+stroke pairs):")
+    for p in patterns:
+        print(f"\n   {p['pair']}:")
+        print(f"      Same path data: {p['same_path_data']}")
+        print(f"      Path 1: fill={p['path1']['fill']}, stroke={p['path1']['stroke']}, opacity={p['path1']['opacity']}")
+        print(f"      Path 2: fill={p['path2']['fill']}, stroke={p['path2']['stroke']}, sw={p['path2']['stroke-width']}")
+
+    # Look for image elements
+    image_pattern = r'<(?:\w+:)?image\s+([^>]*)/?>'
+    images = list(re.finditer(image_pattern, content, re.IGNORECASE))
+    print(f"\n🖼️  IMAGES ({len(images)}):")
+    for i, img in enumerate(images):
+        attrs_str = img.group(1)
+        # Extract key attrs
+        x = re.search(r'x="([^"]*)"', attrs_str)
+        y = re.search(r'y="([^"]*)"', attrs_str)
+        w = re.search(r'width="([^"]*)"', attrs_str)
+        h = re.search(r'height="([^"]*)"', attrs_str)
+        mask = re.search(r'mask="([^"]*)"', attrs_str)
+
+        print(f"   Image {i} at position {img.start()}:")
+        print(f"      x={x.group(1) if x else 'N/A'}, y={y.group(1) if y else 'N/A'}")
+        print(f"      w={w.group(1) if w else 'N/A'}, h={h.group(1) if h else 'N/A'}")
+        print(f"      mask={mask.group(1) if mask else 'NONE'}")
+
+    print("\n" + "="*70)
+    print("DIAGNOSIS SUMMARY")
+    print("="*70)
+
+    print("""
+Based on this analysis, the SVG structure is:
+
+1. PATHS COME IN PAIRS:
+   - First path: Colored FILL with low opacity (e.g., fill=#ff7d2e opacity=.03)
+                 This creates the "highlighter" effect
+   - Second path: Same geometry with STROKE only (stroke=#000000 stroke-width=2)
+                 This creates a thin outline
+
+2. ISSUE WITH CONVERTER:
+   - We're treating filled paths and stroked paths separately
+   - We should recognize these as a SINGLE stroke with:
+     * color from the fill
+     * stroke-width from the companion stroke path (or default to 2)
+     * opacity from the fill-opacity or opacity
+
+3. IMAGES:
+   - Images appear EARLY in the document (as backgrounds)
+   - Our converter outputs them LAST (covering content)
+
+FIX NEEDED:
+   - Detect fill+stroke path pairs (same d attribute)
+   - Merge them into single ColorRM item
+   - Preserve element order (images first = background)
+""")
+
+if __name__ == '__main__':
+    main()

tools/svg-diagnosis.py

@@ -0,0 +1,367 @@
+#!/usr/bin/env python3
+"""
+SVG Diagnosis Tool
+
+Analyzes SVG files to understand structure, layering, and potential issues.
+"""
+
+import re
+import sys
+import json
+from collections import defaultdict
+
+def parse_viewbox(svg_content):
+    """Extract viewBox dimensions"""
+    match = re.search(r'viewBox="([^"]*)"', svg_content)
+    if match:
+        parts = match.group(1).split()
+        if len(parts) >= 4:
+            return {
+                'minX': float(parts[0]),
+                'minY': float(parts[1]),
+                'width': float(parts[2]),
+                'height': float(parts[3])
+            }
+    return None
+
+def parse_dimensions(svg_content):
+    """Extract width/height"""
+    width_match = re.search(r'width="([^"]*)"', svg_content)
+    height_match = re.search(r'height="([^"]*)"', svg_content)
+    return {
+        'width': width_match.group(1) if width_match else None,
+        'height': height_match.group(1) if height_match else None
+    }
+
+def find_elements_with_order(svg_content):
+    """Find all elements in order of appearance (z-order)"""
+    # Pattern matches opening tags of drawable elements
+    pattern = r'<((?:\w+:)?(?:path|rect|circle|ellipse|line|polyline|polygon|text|image|g))\s+([^>]*)(?:>|/>)'
+
+    elements = []
+    for i, match in enumerate(re.finditer(pattern, svg_content, re.IGNORECASE)):
+        tag = match.group(1)
+        attrs = match.group(2)
+
+        # Extract key attributes
+        elem_info = {
+            'order': i,
+            'tag': tag,
+            'position': match.start()
+        }
+
+        # Get fill
+        fill_match = re.search(r'fill="([^"]*)"', attrs)
+        if fill_match:
+            elem_info['fill'] = fill_match.group(1)
+
+        # Get stroke
+        stroke_match = re.search(r'stroke="([^"]*)"', attrs)
+        if stroke_match:
+            elem_info['stroke'] = stroke_match.group(1)
+
+        # Get stroke-width
+        sw_match = re.search(r'stroke-width="([^"]*)"', attrs)
+        if sw_match:
+            elem_info['stroke-width'] = sw_match.group(1)
+
+        # Get opacity
+        opacity_match = re.search(r'opacity="([^"]*)"', attrs)
+        if opacity_match:
+            elem_info['opacity'] = opacity_match.group(1)
+
+        # Get fill-opacity
+        fill_opacity_match = re.search(r'fill-opacity="([^"]*)"', attrs)
+        if fill_opacity_match:
+            elem_info['fill-opacity'] = fill_opacity_match.group(1)
+
+        # Get id
+        id_match = re.search(r'id="([^"]*)"', attrs)
+        if id_match:
+            elem_info['id'] = id_match.group(1)
+
+        # Check for mask/clip
+        if 'mask=' in attrs:
+            elem_info['has_mask'] = True
+        if 'clip-path=' in attrs:
+            elem_info['has_clip'] = True
+
+        # Get d attribute length for paths
+        if 'path' in tag.lower():
+            d_match = re.search(r'd="([^"]*)"', attrs)
+            if d_match:
+                elem_info['path_length'] = len(d_match.group(1))
+                # Count path commands
+                commands = len(re.findall(r'[MLHVCSQTAZ]', d_match.group(1), re.IGNORECASE))
+                elem_info['path_commands'] = commands
+
+        elements.append(elem_info)
+
+    return elements
+
+def analyze_stroke_widths(elements, viewbox):
+    """Analyze stroke widths relative to canvas size"""
+    stroke_analysis = []
+    canvas_size = max(viewbox['width'], viewbox['height']) if viewbox else 1000
+
+    for elem in elements:
+        if 'stroke-width' in elem:
+            sw = elem['stroke-width']
+            try:
+                sw_val = float(sw)
+                relative = (sw_val / canvas_size) * 100
+                stroke_analysis.append({
+                    'tag': elem['tag'],
+                    'order': elem['order'],
+                    'stroke-width': sw_val,
+                    'relative_percent': round(relative, 2),
+                    'assessment': 'VERY THICK' if relative > 1 else 'THICK' if relative > 0.5 else 'NORMAL'
+                })
+            except ValueError:
+                pass
+
+    return stroke_analysis
+
+def find_potential_background_elements(elements):
+    """Find elements that might be acting as backgrounds (solid fills, early in order)"""
+    backgrounds = []
+
+    for elem in elements[:10]:  # Check first 10 elements
+        fill = elem.get('fill', '')
+        stroke = elem.get('stroke', '')
+
+        # Large filled rect early in document could be background
+        if 'rect' in elem['tag'].lower():
+            if fill and fill != 'none' and fill != 'transparent':
+                backgrounds.append({
+                    'order': elem['order'],
+                    'tag': elem['tag'],
+                    'fill': fill,
+                    'issue': 'Filled rect early in document - may cover content'
+                })
+
+        # Image early in document
+        if 'image' in elem['tag'].lower():
+            backgrounds.append({
+                'order': elem['order'],
+                'tag': elem['tag'],
+                'issue': 'Image early in document - may cover content if large'
+            })
+
+    return backgrounds
+
+def analyze_layering(elements):
+    """Analyze element layering/z-order"""
+    layer_stats = defaultdict(list)
+
+    for elem in elements:
+        tag_type = elem['tag'].split(':')[-1].lower()  # Remove namespace
+        layer_stats[tag_type].append(elem['order'])
+
+    report = {}
+    for tag, orders in layer_stats.items():
+        report[tag] = {
+            'count': len(orders),
+            'first_appearance': min(orders),
+            'last_appearance': max(orders),
+            'range': f"positions {min(orders)}-{max(orders)}"
+        }
+
+    return report
+
+def check_namespace_issues(svg_content):
+    """Check for namespace prefixes that might cause rendering issues"""
+    namespaces = re.findall(r'xmlns:(\w+)="([^"]*)"', svg_content)
+    prefixed_elements = re.findall(r'<(\w+):', svg_content)
+
+    return {
+        'declared_namespaces': namespaces,
+        'prefixed_element_count': len(prefixed_elements),
+        'unique_prefixes': list(set(prefixed_elements))
+    }
+
+def compare_two_svgs(file1, file2):
+    """Compare two SVG files"""
+    with open(file1, 'r') as f:
+        content1 = f.read()
+    with open(file2, 'r') as f:
+        content2 = f.read()
+
+    elements1 = find_elements_with_order(content1)
+    elements2 = find_elements_with_order(content2)
+
+    viewbox1 = parse_viewbox(content1)
+    viewbox2 = parse_viewbox(content2)
+
+    comparison = {
+        'file1': {
+            'name': file1,
+            'size': len(content1),
+            'element_count': len(elements1),
+            'viewbox': viewbox1
+        },
+        'file2': {
+            'name': file2,
+            'size': len(content2),
+            'element_count': len(elements2),
+            'viewbox': viewbox2
+        }
+    }
+
+    # Compare stroke widths
+    strokes1 = analyze_stroke_widths(elements1, viewbox1)
+    strokes2 = analyze_stroke_widths(elements2, viewbox2)
+
+    comparison['stroke_width_comparison'] = {
+        'file1_thick_strokes': [s for s in strokes1 if s['assessment'] in ['THICK', 'VERY THICK']],
+        'file2_thick_strokes': [s for s in strokes2 if s['assessment'] in ['THICK', 'VERY THICK']]
+    }
+
+    # Compare layering
+    comparison['layering'] = {
+        'file1': analyze_layering(elements1),
+        'file2': analyze_layering(elements2)
+    }
+
+    return comparison
+
+def analyze_svg(filepath):
+    """Main analysis function"""
+    print(f"\n{'='*60}")
+    print(f"SVG DIAGNOSIS: {filepath}")
+    print('='*60)
+
+    with open(filepath, 'r') as f:
+        content = f.read()
+
+    print(f"\n📊 FILE SIZE: {len(content):,} bytes ({len(content)//1024} KB)")
+
+    # Dimensions
+    dims = parse_dimensions(content)
+    viewbox = parse_viewbox(content)
+    print(f"\n📐 DIMENSIONS:")
+    print(f"   Width: {dims['width']}")
+    print(f"   Height: {dims['height']}")
+    if viewbox:
+        print(f"   ViewBox: {viewbox['minX']} {viewbox['minY']} {viewbox['width']} {viewbox['height']}")
+
+    # Namespace issues
+    ns_info = check_namespace_issues(content)
+    if ns_info['prefixed_element_count'] > 0:
+        print(f"\n⚠️  NAMESPACE PREFIXES DETECTED:")
+        print(f"   Prefixed elements: {ns_info['prefixed_element_count']}")
+        print(f"   Prefixes used: {ns_info['unique_prefixes']}")
+        print(f"   Note: Some browsers may not render prefixed elements correctly!")
+
+    # Elements
+    elements = find_elements_with_order(content)
+    print(f"\n📦 ELEMENTS FOUND: {len(elements)}")
+
+    # Layering analysis
+    layering = analyze_layering(elements)
+    print(f"\n🔢 ELEMENT LAYERING (z-order):")
+    for tag, info in sorted(layering.items(), key=lambda x: x[1]['first_appearance']):
+        print(f"   {tag}: {info['count']} elements, {info['range']}")
+
+    # Background issues
+    bg_issues = find_potential_background_elements(elements)
+    if bg_issues:
+        print(f"\n⚠️  POTENTIAL BACKGROUND/LAYERING ISSUES:")
+        for issue in bg_issues:
+            print(f"   Order {issue['order']}: {issue['tag']} - {issue['issue']}")
+            if 'fill' in issue:
+                print(f"      Fill: {issue['fill']}")
+
+    # Stroke width analysis
+    stroke_analysis = analyze_stroke_widths(elements, viewbox)
+    thick_strokes = [s for s in stroke_analysis if s['assessment'] in ['THICK', 'VERY THICK']]
+    if thick_strokes:
+        print(f"\n⚠️  THICK STROKE WIDTHS DETECTED ({len(thick_strokes)} elements):")
+        for s in thick_strokes[:10]:  # Show first 10
+            print(f"   Order {s['order']}: {s['tag']} - width={s['stroke-width']} ({s['relative_percent']}% of canvas)")
+        if len(thick_strokes) > 10:
+            print(f"   ... and {len(thick_strokes) - 10} more")
+
+    # Sample elements
+    print(f"\n📋 FIRST 10 ELEMENTS (in z-order):")
+    for elem in elements[:10]:
+        parts = [f"Order {elem['order']}: <{elem['tag']}>"]
+        if 'fill' in elem:
+            parts.append(f"fill={elem['fill']}")
+        if 'stroke' in elem:
+            parts.append(f"stroke={elem['stroke']}")
+        if 'stroke-width' in elem:
+            parts.append(f"sw={elem['stroke-width']}")
+        if 'opacity' in elem:
+            parts.append(f"opacity={elem['opacity']}")
+        if 'path_length' in elem:
+            parts.append(f"d_len={elem['path_length']}")
+        print(f"   {' | '.join(parts)}")
+
+    # Last 5 elements (top of z-order)
+    if len(elements) > 10:
+        print(f"\n📋 LAST 5 ELEMENTS (top of z-order):")
+        for elem in elements[-5:]:
+            parts = [f"Order {elem['order']}: <{elem['tag']}>"]
+            if 'fill' in elem:
+                parts.append(f"fill={elem['fill']}")
+            if 'stroke' in elem:
+                parts.append(f"stroke={elem['stroke']}")
+            if 'stroke-width' in elem:
+                parts.append(f"sw={elem['stroke-width']}")
+            print(f"   {' | '.join(parts)}")
+
+    return {
+        'filepath': filepath,
+        'size': len(content),
+        'dimensions': dims,
+        'viewbox': viewbox,
+        'element_count': len(elements),
+        'namespaces': ns_info,
+        'layering': layering,
+        'thick_strokes': thick_strokes,
+        'background_issues': bg_issues
+    }
+
+def main():
+    if len(sys.argv) < 2:
+        print("""
+SVG Diagnosis Tool
+==================
+
+Usage:
+  python svg-diagnosis.py <file.svg>           # Analyze single SVG
+  python svg-diagnosis.py <file1.svg> <file2.svg>  # Compare two SVGs
+
+Diagnoses:
+  - Stroke width issues (too thick)
+  - Layering/z-order problems (background covering content)
+  - Namespace prefix issues
+  - ViewBox problems
+""")
+        sys.exit(0)
+
+    if len(sys.argv) == 2:
+        analyze_svg(sys.argv[1])
+    elif len(sys.argv) >= 3:
+        print("\n" + "="*60)
+        print("COMPARING TWO SVG FILES")
+        print("="*60)
+
+        analyze_svg(sys.argv[1])
+        analyze_svg(sys.argv[2])
+
+        comparison = compare_two_svgs(sys.argv[1], sys.argv[2])
+
+        print("\n" + "="*60)
+        print("COMPARISON SUMMARY")
+        print("="*60)
+        print(f"\nFile 1: {comparison['file1']['element_count']} elements, {comparison['file1']['size']//1024}KB")
+        print(f"File 2: {comparison['file2']['element_count']} elements, {comparison['file2']['size']//1024}KB")
+
+        thick1 = comparison['stroke_width_comparison']['file1_thick_strokes']
+        thick2 = comparison['stroke_width_comparison']['file2_thick_strokes']
+        print(f"\nThick strokes: File1={len(thick1)}, File2={len(thick2)}")
+
+if __name__ == '__main__':
+    main()

tools/svg-group-analysis.py

@@ -0,0 +1,195 @@
+#!/usr/bin/env python3
+"""
+Deep SVG Group Analysis - Find what's being missed
+"""
+
+import re
+import sys
+
+def analyze_groups(svg_content):
+    """Analyze group structure and transforms"""
+
+    # Find all groups
+    group_pattern = r'<(?:\w+:)?g\s+([^>]*)>'
+    groups = []
+
+    for match in re.finditer(group_pattern, svg_content, re.IGNORECASE):
+        attrs = match.group(1)
+        pos = match.start()
+
+        # Extract transform
+        transform_match = re.search(r'transform="([^"]*)"', attrs)
+        transform = transform_match.group(1) if transform_match else None
+
+        groups.append({
+            'position': pos,
+            'attrs': attrs,
+            'transform': transform
+        })
+
+    return groups
+
+def find_elements_in_groups(svg_content):
+    """Find which elements are inside groups vs top-level"""
+
+    # Count total elements
+    all_paths = len(re.findall(r'<(?:\w+:)?path\s+', svg_content, re.IGNORECASE))
+    all_images = len(re.findall(r'<(?:\w+:)?image\s+', svg_content, re.IGNORECASE))
+
+    # Remove group content and count remaining
+    no_groups = re.sub(r'<(?:\w+:)?g[^>]*>[\s\S]*?</(?:\w+:)?g>', '', svg_content)
+    top_level_paths = len(re.findall(r'<(?:\w+:)?path\s+', no_groups, re.IGNORECASE))
+    top_level_images = len(re.findall(r'<(?:\w+:)?image\s+', no_groups, re.IGNORECASE))
+
+    return {
+        'total_paths': all_paths,
+        'paths_in_groups': all_paths - top_level_paths,
+        'top_level_paths': top_level_paths,
+        'total_images': all_images,
+        'images_in_groups': all_images - top_level_images,
+        'top_level_images': top_level_images
+    }
+
+def find_bounding_boxes(svg_content):
+    """Find coordinate ranges to detect if lower half is missing"""
+
+    # Extract all Y coordinates from paths
+    y_coords = []
+
+    # From path d attributes - look for M, L, V commands with Y values
+    path_pattern = r'd="([^"]*)"'
+    for match in re.finditer(path_pattern, svg_content):
+        d = match.group(1)
+        # Extract numbers after M, L commands (every second number is Y)
+        coords = re.findall(r'[ML]\s*([-\d.]+)\s+([-\d.]+)', d, re.IGNORECASE)
+        for x, y in coords:
+            try:
+                y_coords.append(float(y))
+            except:
+                pass
+
+    if y_coords:
+        return {
+            'min_y': min(y_coords),
+            'max_y': max(y_coords),
+            'y_range': max(y_coords) - min(y_coords)
+        }
+    return None
+
+def analyze_nested_groups(svg_content):
+    """Find deeply nested groups"""
+
+    # Find group opening/closing tags
+    opens = [(m.start(), 'open') for m in re.finditer(r'<(?:\w+:)?g\s+[^>]*>', svg_content, re.IGNORECASE)]
+    closes = [(m.start(), 'close') for m in re.finditer(r'</(?:\w+:)?g>', svg_content, re.IGNORECASE)]
+
+    all_tags = sorted(opens + closes, key=lambda x: x[0])
+
+    max_depth = 0
+    current_depth = 0
+    depth_counts = {}
+
+    for pos, tag_type in all_tags:
+        if tag_type == 'open':
+            current_depth += 1
+            max_depth = max(max_depth, current_depth)
+            depth_counts[current_depth] = depth_counts.get(current_depth, 0) + 1
+        else:
+            current_depth -= 1
+
+    return {
+        'max_nesting_depth': max_depth,
+        'groups_at_each_depth': depth_counts
+    }
+
+def check_transform_types(svg_content):
+    """Check what transform types are used"""
+
+    transforms = re.findall(r'transform="([^"]*)"', svg_content)
+
+    types = {
+        'matrix': 0,
+        'translate': 0,
+        'scale': 0,
+        'rotate': 0,
+        'skew': 0
+    }
+
+    for t in transforms:
+        if 'matrix' in t:
+            types['matrix'] += 1
+        if 'translate' in t:
+            types['translate'] += 1
+        if 'scale' in t:
+            types['scale'] += 1
+        if 'rotate' in t:
+            types['rotate'] += 1
+        if 'skew' in t:
+            types['skew'] += 1
+
+    return types
+
+def main():
+    if len(sys.argv) < 2:
+        print("Usage: python svg-group-analysis.py <file.svg>")
+        sys.exit(1)
+
+    filepath = sys.argv[1]
+    with open(filepath, 'r') as f:
+        content = f.read()
+
+    print(f"\n{'='*60}")
+    print(f"SVG GROUP ANALYSIS: {filepath}")
+    print('='*60)
+
+    # Basic counts
+    elem_counts = find_elements_in_groups(content)
+    print(f"\n📊 ELEMENT DISTRIBUTION:")
+    print(f"   Total paths: {elem_counts['total_paths']}")
+    print(f"   - In groups: {elem_counts['paths_in_groups']}")
+    print(f"   - Top level: {elem_counts['top_level_paths']}")
+    print(f"   Total images: {elem_counts['total_images']}")
+    print(f"   - In groups: {elem_counts['images_in_groups']}")
+    print(f"   - Top level: {elem_counts['top_level_images']}")
+
+    # Group nesting
+    nesting = analyze_nested_groups(content)
+    print(f"\n📁 GROUP NESTING:")
+    print(f"   Max depth: {nesting['max_nesting_depth']}")
+    print(f"   Groups at each depth: {nesting['groups_at_each_depth']}")
+
+    # Transforms
+    transforms = check_transform_types(content)
+    print(f"\n🔄 TRANSFORMS USED:")
+    for t, count in transforms.items():
+        if count > 0:
+            print(f"   {t}: {count}")
+
+    # Groups with transforms
+    groups = analyze_groups(content)
+    groups_with_transforms = [g for g in groups if g['transform']]
+    print(f"\n🔧 GROUPS WITH TRANSFORMS: {len(groups_with_transforms)}")
+    for g in groups_with_transforms[:5]:
+        print(f"   transform: {g['transform'][:60]}...")
+
+    # Bounding box
+    bbox = find_bounding_boxes(content)
+    if bbox:
+        print(f"\n📐 Y-COORDINATE RANGE:")
+        print(f"   Min Y: {bbox['min_y']:.2f}")
+        print(f"   Max Y: {bbox['max_y']:.2f}")
+        print(f"   Range: {bbox['y_range']:.2f}")
+
+    # ViewBox
+    viewbox_match = re.search(r'viewBox="([^"]*)"', content)
+    if viewbox_match:
+        vb = viewbox_match.group(1).split()
+        if len(vb) >= 4:
+            vb_height = float(vb[3])
+            print(f"   ViewBox height: {vb_height}")
+            if bbox:
+                coverage = (bbox['max_y'] - bbox['min_y']) / vb_height * 100
+                print(f"   Content covers: {coverage:.1f}% of viewBox height")
+
+if __name__ == '__main__':
+    main()

tools/svg-to-colorrm.cjs

@@ -0,0 +1,1640 @@
+#!/usr/bin/env node
+/**
+ * SVG to ColorRM Converter - Pro Version v3
+ *
+ * FIXES in v3:
+ * 1. Recursively processes elements inside groups
+ * 2. Applies inherited transforms from parent groups
+ * 3. Applies per-element transforms
+ * 4. Disabled simplification to preserve hand-drawn curves
+ * 5. Always preserves opacity values for highlighters
+ *
+ * PREVIOUS FIXES (v2):
+ * 1. Preserves element order (z-order) from original SVG
+ * 2. Detects fill+stroke path pairs and merges them
+ * 3. Extracts color from fill paths, stroke-width from stroke paths
+ * 4. Properly handles highlighter (low fill-opacity)
+ *
+ * Usage: node svg-to-colorrm.cjs input.svg [output.json]
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ============================================
+// CONFIGURATION
+// ============================================
+
+const CONFIG = {
+    simplifyTolerance: 0,  // Disabled - preserve original path shapes
+    maxPointsPerStroke: 5000,  // Increased to allow more points
+    highlighterOpacityThreshold: 0.5,
+    bezierPointsPerPixel: 0.2,
+    minBezierSegments: 8,
+    maxBezierSegments: 100,
+    base64WarnSize: 500000,
+    defaultStrokeWidth: 2,
+    defaultStroke: '#000000',
+    defaultFill: 'transparent',
+    skipSimplification: true  // New flag to skip simplification entirely
+};
+
+// ============================================
+// UTILITY FUNCTIONS
+// ============================================
+
+function perpendicularDistance(point, lineStart, lineEnd) {
+    const dx = lineEnd.x - lineStart.x;
+    const dy = lineEnd.y - lineStart.y;
+    if (dx === 0 && dy === 0) {
+        return Math.sqrt((point.x - lineStart.x) ** 2 + (point.y - lineStart.y) ** 2);
+    }
+    const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
+    return Math.sqrt((point.x - (lineStart.x + t * dx)) ** 2 + (point.y - (lineStart.y + t * dy)) ** 2);
+}
+
+function simplifyPath(points, tolerance = CONFIG.simplifyTolerance) {
+    if (points.length <= 2) return points;
+    let maxDist = 0, maxIndex = 0;
+    const first = points[0], last = points[points.length - 1];
+    for (let i = 1; i < points.length - 1; i++) {
+        const dist = perpendicularDistance(points[i], first, last);
+        if (dist > maxDist) { maxDist = dist; maxIndex = i; }
+    }
+    if (maxDist > tolerance) {
+        const left = simplifyPath(points.slice(0, maxIndex + 1), tolerance);
+        const right = simplifyPath(points.slice(maxIndex), tolerance);
+        return left.slice(0, -1).concat(right);
+    }
+    return [first, last];
+}
+
+function enforceMaxPoints(points, maxPoints = CONFIG.maxPointsPerStroke) {
+    if (points.length <= maxPoints) return points;
+    let tolerance = CONFIG.simplifyTolerance;
+    let simplified = points;
+    while (simplified.length > maxPoints && tolerance < 50) {
+        tolerance *= 1.5;
+        simplified = simplifyPath(points, tolerance);
+    }
+    if (simplified.length > maxPoints) {
+        const step = simplified.length / maxPoints;
+        const result = [];
+        for (let i = 0; i < maxPoints; i++) result.push(simplified[Math.floor(i * step)]);
+        result.push(simplified[simplified.length - 1]);
+        return result;
+    }
+    return simplified;
+}
+
+// Compute bounding box of points
+function computeBounds(pts) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of pts) {
+        if (p.x < minX) minX = p.x;
+        if (p.y < minY) minY = p.y;
+        if (p.x > maxX) maxX = p.x;
+        if (p.y > maxY) maxY = p.y;
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// Check if a path is a closed rectangle (4 corners, axis-aligned-ish)
+function isClosedRectangle(pts) {
+    if (pts.length < 4 || pts.length > 6) return false;  // Allow 4-5 points (closed rect might have duplicate endpoint)
+
+    // Get unique corners (remove duplicate close point if present)
+    const corners = [];
+    for (let i = 0; i < pts.length; i++) {
+        const p = pts[i];
+        const isDup = corners.some(c => Math.abs(c.x - p.x) < 1 && Math.abs(c.y - p.y) < 1);
+        if (!isDup) corners.push(p);
+    }
+
+    if (corners.length !== 4) return false;
+
+    // Check if corners form axis-aligned rectangle
+    const bounds = computeBounds(corners);
+    const tolerance = 2;  // pixels
+
+    // Each corner should be at a corner of the bounding box
+    let cornersAtBounds = 0;
+    for (const c of corners) {
+        const atLeft = Math.abs(c.x - bounds.x) < tolerance;
+        const atRight = Math.abs(c.x - (bounds.x + bounds.width)) < tolerance;
+        const atTop = Math.abs(c.y - bounds.y) < tolerance;
+        const atBottom = Math.abs(c.y - (bounds.y + bounds.height)) < tolerance;
+
+        if ((atLeft || atRight) && (atTop || atBottom)) cornersAtBounds++;
+    }
+
+    return cornersAtBounds >= 4;
+}
+
+// Determine border type from stroke-dasharray value
+function getBorderTypeFromDasharray(strokeDasharray) {
+    if (!strokeDasharray || strokeDasharray === 'none') return 'solid';
+    const parts = strokeDasharray.split(/[\s,]+/).map(parseFloat).filter(n => !isNaN(n));
+    if (parts.length >= 2) {
+        // Dotted: small gaps ratio > 1, Dashed: otherwise
+        const ratio = parts[1] / parts[0];
+        return ratio > 1 ? 'dotted' : 'dashed';
+    }
+    return parts.length === 1 ? 'dashed' : 'solid';
+}
+
+// ============================================
+// BEZIER INTERPOLATION
+// ============================================
+
+function curveLength(x0, y0, x1, y1, x2, y2, x3, y3) {
+    const chord = Math.sqrt((x3 - x0) ** 2 + (y3 - y0) ** 2);
+    const poly = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) +
+                 Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) +
+                 Math.sqrt((x3 - x2) ** 2 + (y3 - y2) ** 2);
+    return (chord + poly) / 2;
+}
+
+function adaptiveSegments(length) {
+    const segments = Math.ceil(length * CONFIG.bezierPointsPerPixel);
+    return Math.max(CONFIG.minBezierSegments, Math.min(CONFIG.maxBezierSegments, segments));
+}
+
+function cubicBezier(x0, y0, x1, y1, x2, y2, x3, y3) {
+    const segments = adaptiveSegments(curveLength(x0, y0, x1, y1, x2, y2, x3, y3));
+    const pts = [];
+    for (let i = 0; i <= segments; i++) {
+        const t = i / segments, mt = 1 - t;
+        pts.push({
+            x: mt*mt*mt*x0 + 3*mt*mt*t*x1 + 3*mt*t*t*x2 + t*t*t*x3,
+            y: mt*mt*mt*y0 + 3*mt*mt*t*y1 + 3*mt*t*t*y2 + t*t*t*y3
+        });
+    }
+    return pts;
+}
+
+function quadBezier(x0, y0, x1, y1, x2, y2) {
+    const length = Math.sqrt((x2 - x0) ** 2 + (y2 - y0) ** 2);
+    const segments = adaptiveSegments(length);
+    const pts = [];
+    for (let i = 0; i <= segments; i++) {
+        const t = i / segments, mt = 1 - t;
+        pts.push({ x: mt*mt*x0 + 2*mt*t*x1 + t*t*x2, y: mt*mt*y0 + 2*mt*t*y1 + t*t*y2 });
+    }
+    return pts;
+}
+
+function arcPoints(x0, y0, rx, ry, rotation, largeArc, sweep, x1, y1) {
+    if (rx === 0 || ry === 0) return [{ x: x0, y: y0 }, { x: x1, y: y1 }];
+    const phi = rotation * Math.PI / 180;
+    const cosPhi = Math.cos(phi), sinPhi = Math.sin(phi);
+    const dx = (x0 - x1) / 2, dy = (y0 - y1) / 2;
+    const x1p = cosPhi * dx + sinPhi * dy, y1p = -sinPhi * dx + cosPhi * dy;
+    let rxSq = rx * rx, rySq = ry * ry;
+    const x1pSq = x1p * x1p, y1pSq = y1p * y1p;
+    const lambda = x1pSq / rxSq + y1pSq / rySq;
+    if (lambda > 1) { rx *= Math.sqrt(lambda); ry *= Math.sqrt(lambda); rxSq = rx*rx; rySq = ry*ry; }
+    let sq = (rxSq*rySq - rxSq*y1pSq - rySq*x1pSq) / (rxSq*y1pSq + rySq*x1pSq);
+    sq = sq < 0 ? 0 : sq;
+    const coef = (largeArc !== sweep ? 1 : -1) * Math.sqrt(sq);
+    const cxp = coef * rx * y1p / ry, cyp = coef * -ry * x1p / rx;
+    const mx = (x0 + x1) / 2, my = (y0 + y1) / 2;
+    const cx = cosPhi * cxp - sinPhi * cyp + mx, cy = sinPhi * cxp + cosPhi * cyp + my;
+    const ux = (x1p - cxp) / rx, uy = (y1p - cyp) / ry;
+    const n = Math.sqrt(ux*ux + uy*uy);
+    let theta = (uy < 0 ? -1 : 1) * Math.acos(ux / n);
+    const vx = (-x1p - cxp) / rx, vy = (-y1p - cyp) / ry;
+    const nn = Math.sqrt((ux*ux + uy*uy) * (vx*vx + vy*vy));
+    let dTheta = (ux*vy - uy*vx < 0 ? -1 : 1) * Math.acos((ux*vx + uy*vy) / nn);
+    if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI;
+    if (sweep && dTheta < 0) dTheta += 2 * Math.PI;
+    const arcLen = Math.abs(dTheta) * Math.max(rx, ry);
+    const segments = adaptiveSegments(arcLen);
+    const pts = [];
+    for (let i = 0; i <= segments; i++) {
+        const t = i / segments, angle = theta + t * dTheta;
+        const xr = rx * Math.cos(angle), yr = ry * Math.sin(angle);
+        pts.push({ x: cosPhi * xr - sinPhi * yr + cx, y: sinPhi * xr + cosPhi * yr + cy });
+    }
+    return pts;
+}
+
+// ============================================
+// PATH PARSER
+// ============================================
+
+function parsePathD(d) {
+    if (!d) return [];
+    const points = [];
+    let currentX = 0, currentY = 0, startX = 0, startY = 0;
+    let lastControlX = 0, lastControlY = 0, lastCommand = '';
+    const tokens = d.match(/[a-zA-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g) || [];
+    let i = 0;
+    const getNum = () => i < tokens.length ? (parseFloat(tokens[i++]) || 0) : 0;
+    const addPt = (x, y) => {
+        if (points.length === 0 || points[points.length-1].x !== x || points[points.length-1].y !== y)
+            points.push({ x, y });
+    };
+    while (i < tokens.length) {
+        let cmd = tokens[i];
+        if (/[a-zA-Z]/.test(cmd)) { i++; lastCommand = cmd; }
+        else { cmd = lastCommand; if (cmd === 'M') cmd = 'L'; if (cmd === 'm') cmd = 'l'; }
+        const rel = cmd === cmd.toLowerCase(), C = cmd.toUpperCase();
+        switch (C) {
+            case 'M': { let x = getNum(), y = getNum(); if (rel) { x += currentX; y += currentY; }
+                currentX = x; currentY = y; startX = x; startY = y; addPt(x, y); break; }
+            case 'L': { let x = getNum(), y = getNum(); if (rel) { x += currentX; y += currentY; }
+                currentX = x; currentY = y; addPt(x, y); break; }
+            case 'H': { let x = getNum(); if (rel) x += currentX; currentX = x; addPt(currentX, currentY); break; }
+            case 'V': { let y = getNum(); if (rel) y += currentY; currentY = y; addPt(currentX, currentY); break; }
+            case 'C': { let x1 = getNum(), y1 = getNum(), x2 = getNum(), y2 = getNum(), x = getNum(), y = getNum();
+                if (rel) { x1 += currentX; y1 += currentY; x2 += currentX; y2 += currentY; x += currentX; y += currentY; }
+                cubicBezier(currentX, currentY, x1, y1, x2, y2, x, y).slice(1).forEach(p => addPt(p.x, p.y));
+                lastControlX = x2; lastControlY = y2; currentX = x; currentY = y; break; }
+            case 'S': { let x1 = currentX*2 - lastControlX, y1 = currentY*2 - lastControlY;
+                let x2 = getNum(), y2 = getNum(), x = getNum(), y = getNum();
+                if (rel) { x2 += currentX; y2 += currentY; x += currentX; y += currentY; }
+                if (!'CScs'.includes(lastCommand)) { x1 = currentX; y1 = currentY; }
+                cubicBezier(currentX, currentY, x1, y1, x2, y2, x, y).slice(1).forEach(p => addPt(p.x, p.y));
+                lastControlX = x2; lastControlY = y2; currentX = x; currentY = y; break; }
+            case 'Q': { let x1 = getNum(), y1 = getNum(), x = getNum(), y = getNum();
+                if (rel) { x1 += currentX; y1 += currentY; x += currentX; y += currentY; }
+                quadBezier(currentX, currentY, x1, y1, x, y).slice(1).forEach(p => addPt(p.x, p.y));
+                lastControlX = x1; lastControlY = y1; currentX = x; currentY = y; break; }
+            case 'T': { let x1 = currentX*2 - lastControlX, y1 = currentY*2 - lastControlY;
+                let x = getNum(), y = getNum(); if (rel) { x += currentX; y += currentY; }
+                if (!'QTqt'.includes(lastCommand)) { x1 = currentX; y1 = currentY; }
+                quadBezier(currentX, currentY, x1, y1, x, y).slice(1).forEach(p => addPt(p.x, p.y));
+                lastControlX = x1; lastControlY = y1; currentX = x; currentY = y; break; }
+            case 'A': { const rxV = Math.abs(getNum()), ryV = Math.abs(getNum()), rot = getNum();
+                const la = !!getNum(), sw = !!getNum(); let x = getNum(), y = getNum();
+                if (rel) { x += currentX; y += currentY; }
+                arcPoints(currentX, currentY, rxV, ryV, rot, la, sw, x, y).slice(1).forEach(p => addPt(p.x, p.y));
+                currentX = x; currentY = y; break; }
+            case 'Z': { if (currentX !== startX || currentY !== startY) addPt(startX, startY);
+                currentX = startX; currentY = startY; break; }
+            default: i++;
+        }
+        lastCommand = cmd;
+    }
+    return points;
+}
+
+// ============================================
+// TRANSFORM MATRIX
+// ============================================
+
+function identityMatrix() { return [1, 0, 0, 1, 0, 0]; }
+
+function multiplyMatrix(a, b) {
+    return [
+        a[0]*b[0] + a[2]*b[1], a[1]*b[0] + a[3]*b[1],
+        a[0]*b[2] + a[2]*b[3], a[1]*b[2] + a[3]*b[3],
+        a[0]*b[4] + a[2]*b[5] + a[4], a[1]*b[4] + a[3]*b[5] + a[5]
+    ];
+}
+
+function parseTransform(transform) {
+    if (!transform) return identityMatrix();
+    let matrix = identityMatrix();
+    const transforms = transform.match(/(\w+)\s*\([^)]+\)/g) || [];
+    for (const t of transforms) {
+        const match = t.match(/(\w+)\s*\(([^)]+)\)/);
+        if (!match) continue;
+        const type = match[1], values = match[2].split(/[\s,]+/).map(parseFloat);
+        let m;
+        switch (type) {
+            case 'matrix': if (values.length >= 6) m = values.slice(0, 6); break;
+            case 'translate': m = [1, 0, 0, 1, values[0] || 0, values[1] || 0]; break;
+            case 'scale': const sx = values[0] || 1, sy = values[1] !== undefined ? values[1] : sx;
+                m = [sx, 0, 0, sy, 0, 0]; break;
+            case 'rotate': const angle = (values[0] || 0) * Math.PI / 180;
+                const cos = Math.cos(angle), sin = Math.sin(angle);
+                if (values.length >= 3) { const cx = values[1], cy = values[2];
+                    m = [cos, sin, -sin, cos, cx - cos*cx + sin*cy, cy - sin*cx - cos*cy];
+                } else m = [cos, sin, -sin, cos, 0, 0]; break;
+            case 'skewX': m = [1, 0, Math.tan((values[0]||0)*Math.PI/180), 1, 0, 0]; break;
+            case 'skewY': m = [1, Math.tan((values[0]||0)*Math.PI/180), 0, 1, 0, 0]; break;
+        }
+        if (m) matrix = multiplyMatrix(matrix, m);
+    }
+    return matrix;
+}
+
+function transformPoint(x, y, m) { return { x: m[0]*x + m[2]*y + m[4], y: m[1]*x + m[3]*y + m[5] }; }
+function getMatrixScale(m) { return Math.sqrt(Math.abs(m[0]*m[3] - m[1]*m[2])); }
+
+// ============================================
+// COLOR PARSING
+// ============================================
+
+function parseColor(color) {
+    if (!color || color === 'none' || color === 'transparent') return null;
+    if (color === 'currentColor') return '#000000';
+    if (color.startsWith('#')) {
+        if (color.length === 4) return '#' + color[1]+color[1] + color[2]+color[2] + color[3]+color[3];
+        return color;
+    }
+    const rgb = color.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgb) return '#' + parseInt(rgb[1]).toString(16).padStart(2,'0') +
+        parseInt(rgb[2]).toString(16).padStart(2,'0') + parseInt(rgb[3]).toString(16).padStart(2,'0');
+    const named = { black:'#000000', white:'#ffffff', red:'#ff0000', green:'#008000', blue:'#0000ff',
+        yellow:'#ffff00', cyan:'#00ffff', magenta:'#ff00ff', orange:'#ffa500', purple:'#800080' };
+    return named[color.toLowerCase()] || '#000000';
+}
+
+function parseOpacity(value) {
+    if (value === undefined || value === null || value === '') return 1;
+    const num = parseFloat(value);
+    return isNaN(num) ? 1 : Math.max(0, Math.min(1, num));
+}
+
+// ============================================
+// ATTRIBUTE EXTRACTION
+// ============================================
+
+const NS = '(?:\\w+:)?';
+
+function getAttr(element, attr) {
+    const patterns = [new RegExp(`\\s${attr}="([^"]*)"`, 'i'), new RegExp(`\\s\\w+:${attr}="([^"]*)"`, 'i')];
+    for (const p of patterns) { const m = element.match(p); if (m) return m[1]; }
+    return null;
+}
+
+function parseStyle(style) {
+    if (!style) return {};
+    const result = {};
+    style.split(';').forEach(r => { const [p, v] = r.split(':').map(s => s.trim()); if (p && v) result[p] = v; });
+    return result;
+}
+
+// ============================================
+// SIMPLE XML ELEMENT PARSER (no regex for structure)
+// ============================================
+
+/**
+ * Parse SVG content into a tree structure
+ * This is more robust than regex-based parsing
+ */
+function parseXMLElements(content) {
+    const elements = [];
+    let i = 0;
+    const len = content.length;
+
+    while (i < len) {
+        // Skip until we find a tag
+        const tagStart = content.indexOf('<', i);
+        if (tagStart === -1) break;
+
+        // Skip comments and CDATA
+        if (content.slice(tagStart, tagStart + 4) === '<!--') {
+            const commentEnd = content.indexOf('-->', tagStart);
+            i = commentEnd === -1 ? len : commentEnd + 3;
+            continue;
+        }
+        if (content.slice(tagStart, tagStart + 9) === '<![CDATA[') {
+            const cdataEnd = content.indexOf(']]>', tagStart);
+            i = cdataEnd === -1 ? len : cdataEnd + 3;
+            continue;
+        }
+
+        // Skip closing tags
+        if (content[tagStart + 1] === '/') {
+            const closeEnd = content.indexOf('>', tagStart);
+            i = closeEnd === -1 ? len : closeEnd + 1;
+            continue;
+        }
+
+        // Skip processing instructions and doctype
+        if (content[tagStart + 1] === '?' || content[tagStart + 1] === '!') {
+            const piEnd = content.indexOf('>', tagStart);
+            i = piEnd === -1 ? len : piEnd + 1;
+            continue;
+        }
+
+        // Find tag name end
+        let j = tagStart + 1;
+        while (j < len && /[a-zA-Z0-9:_-]/.test(content[j])) j++;
+        const tagName = content.slice(tagStart + 1, j);
+
+        if (!tagName) {
+            i = tagStart + 1;
+            continue;
+        }
+
+        // Find end of opening tag (either /> or >)
+        let inQuote = false;
+        let quoteChar = '';
+        let k = j;
+        while (k < len) {
+            const ch = content[k];
+            if (inQuote) {
+                if (ch === quoteChar) inQuote = false;
+            } else {
+                if (ch === '"' || ch === "'") {
+                    inQuote = true;
+                    quoteChar = ch;
+                } else if (ch === '>') {
+                    break;
+                }
+            }
+            k++;
+        }
+
+        if (k >= len) break;
+
+        const isSelfClosing = content[k - 1] === '/';
+        const attrsStr = content.slice(j, isSelfClosing ? k - 1 : k).trim();
+        const tagEnd = k + 1;
+
+        // Parse attributes
+        const attrs = parseAttributes(attrsStr);
+
+        let innerContent = '';
+        let elementEnd = tagEnd;
+
+        // If not self-closing, find the closing tag
+        if (!isSelfClosing) {
+            const closeTag = findClosingTag(content, tagEnd, tagName);
+            if (closeTag.end !== -1) {
+                innerContent = content.slice(tagEnd, closeTag.start);
+                elementEnd = closeTag.end;
+            } else {
+                elementEnd = tagEnd;
+            }
+        }
+
+        elements.push({
+            position: tagStart,
+            tagName: tagName.replace(/^\w+:/, '').toLowerCase(),
+            rawTagName: tagName,
+            attrs,
+            attrsStr,
+            innerContent,
+            selfClosing: isSelfClosing,
+            end: elementEnd
+        });
+
+        i = elementEnd;
+    }
+
+    return elements;
+}
+
+/**
+ * Parse attribute string into object
+ */
+function parseAttributes(attrsStr) {
+    const attrs = {};
+    const attrPattern = /([a-zA-Z0-9:_-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+    let match;
+    while ((match = attrPattern.exec(attrsStr)) !== null) {
+        attrs[match[1]] = match[2] !== undefined ? match[2] : match[3];
+    }
+    return attrs;
+}
+
+/**
+ * Find the matching closing tag, handling nesting
+ * Handles namespaced tags (e.g., svg:g) by matching both with and without namespace
+ */
+function findClosingTag(content, start, tagName) {
+    // Strip namespace from tagName for pattern matching
+    const baseName = tagName.replace(/^\w+:/, '');
+
+    // Match both namespaced and non-namespaced versions
+    const escapedName = baseName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const openPattern = new RegExp(`<(?:\\w+:)?${escapedName}(?:\\s|>)`, 'gi');
+    const closePattern = new RegExp(`</(?:\\w+:)?${escapedName}>`, 'gi');
+
+    let depth = 1;
+    let pos = start;
+
+    while (depth > 0 && pos < content.length) {
+        openPattern.lastIndex = pos;
+        closePattern.lastIndex = pos;
+
+        const openMatch = openPattern.exec(content);
+        const closeMatch = closePattern.exec(content);
+
+        if (!closeMatch) {
+            // No closing tag found - try to find end of content
+            return { start: -1, end: -1 };
+        }
+
+        // Check if there's an opening tag before the closing tag
+        if (openMatch && openMatch.index < closeMatch.index) {
+            // Check if it's not a self-closing tag
+            const tagEnd = content.indexOf('>', openMatch.index);
+            if (tagEnd !== -1 && content[tagEnd - 1] !== '/') {
+                depth++;
+            }
+            pos = openMatch.index + openMatch[0].length;
+        } else {
+            depth--;
+            if (depth === 0) {
+                return { start: closeMatch.index, end: closeMatch.index + closeMatch[0].length };
+            }
+            pos = closeMatch.index + closeMatch[0].length;
+        }
+    }
+
+    return { start: -1, end: -1 };
+}
+
+// ============================================
+// ELEMENT COLLECTION (using proper parser)
+// ============================================
+
+// Global mask definitions storage
+let maskDefinitions = {};
+
+function collectAllElementsRecursive(content, parentTransform = identityMatrix(), depth = 0, parentMaskId = null) {
+    const elements = [];
+    const parsedElements = parseXMLElements(content);
+
+    const drawableElements = ['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'text', 'image'];
+
+    for (const elem of parsedElements) {
+        const tagLower = elem.tagName;
+
+        if (tagLower === 'g') {
+            // It's a group - parse transform and recurse
+            const groupTransformStr = elem.attrs.transform || null;
+            const groupMatrix = parseTransform(groupTransformStr);
+            const combinedTransform = multiplyMatrix(parentTransform, groupMatrix);
+
+            // Also inherit style attributes
+            const groupOpacity = elem.attrs.opacity;
+
+            // Check for mask attribute on this group
+            let maskId = parentMaskId;
+            const maskAttr = elem.attrs.mask;
+            if (maskAttr) {
+                // Extract mask ID from url(#mask_id)
+                const maskMatch = maskAttr.match(/url\(#([^)]+)\)/);
+                if (maskMatch) {
+                    maskId = maskMatch[1];
+                }
+            }
+
+            // Recursively process group contents with mask inheritance
+            const childElements = collectAllElementsRecursive(elem.innerContent, combinedTransform, depth + 1, maskId);
+
+            // Apply group opacity to children if set
+            if (groupOpacity !== undefined) {
+                childElements.forEach(child => {
+                    if (child.groupOpacity === undefined) {
+                        child.groupOpacity = parseFloat(groupOpacity);
+                    } else {
+                        child.groupOpacity *= parseFloat(groupOpacity);
+                    }
+                });
+            }
+
+            elements.push(...childElements);
+
+        } else if (tagLower === 'mask') {
+            // Store mask definition - extract image data from inside
+            const maskId = elem.attrs.id;
+            if (maskId) {
+                // Find image inside the mask
+                const maskContent = elem.innerContent;
+                const imageMatch = maskContent.match(/<image[^>]*(?:xlink:)?href="([^"]+)"[^>]*>/);
+                if (imageMatch) {
+                    // Store the mask image data
+                    maskDefinitions[maskId] = {
+                        imageData: imageMatch[1],
+                        type: 'luminance'  // SVG masks default to luminance
+                    };
+                }
+            }
+            // Don't add mask content as drawable elements
+            continue;
+
+        } else if (tagLower === 'clippath') {
+            // Skip clippath content
+            continue;
+
+        } else if (tagLower === 'defs') {
+            // Process defs - this will capture masks inside
+            const childElements = collectAllElementsRecursive(elem.innerContent, parentTransform, depth + 1, parentMaskId);
+            // Don't add defs content to drawable elements
+            continue;
+
+        } else if (drawableElements.includes(tagLower)) {
+            // It's a drawable element
+            const elemData = {
+                position: elem.position,
+                tag: tagLower,
+                fullMatch: content.slice(elem.position, elem.end),
+                attrs: elem.attrsStr,
+                attrsObj: elem.attrs,
+                innerContent: elem.innerContent,
+                inheritedTransform: parentTransform
+            };
+
+            // Add mask reference if this element is inside a masked group
+            if (parentMaskId) {
+                elemData.maskId = parentMaskId;
+            }
+
+            elements.push(elemData);
+        }
+    }
+
+    return elements;
+}
+
+function collectAllElements(content) {
+    // Reset mask definitions for each conversion
+    maskDefinitions = {};
+    console.log('Using recursive element collection with transform inheritance...');
+    return collectAllElementsRecursive(content);
+}
+
+// ============================================
+// PATH PAIR DETECTION & MERGING
+// ============================================
+
+function detectPathPairs(elements) {
+    const merged = [];
+    const used = new Set();
+
+    // Helper to get attribute from attrsObj or fallback to getAttr
+    const getElemAttr = (elem, attr) => {
+        if (elem.attrsObj && elem.attrsObj[attr] !== undefined) {
+            return elem.attrsObj[attr];
+        }
+        return getAttr(`<${elem.tag} ${elem.attrs}>`, attr);
+    };
+
+    for (let i = 0; i < elements.length; i++) {
+        if (used.has(i)) continue;
+
+        const elem = elements[i];
+
+        if (elem.tag === 'path') {
+            const d = getElemAttr(elem, 'd');
+            const fill = getElemAttr(elem, 'fill');
+            const stroke = getElemAttr(elem, 'stroke');
+            const fillOpacity = getElemAttr(elem, 'fill-opacity');
+            const strokeWidth = getElemAttr(elem, 'stroke-width');
+            const styleStr = getElemAttr(elem, 'style');
+            const style = parseStyle(styleStr);
+
+            // Check if this is a fill-only path (potential first of pair)
+            const isFillPath = fill && fill !== 'none' && (!stroke || stroke === 'none');
+
+            if (isFillPath && i + 1 < elements.length) {
+                const nextElem = elements[i + 1];
+                if (nextElem.tag === 'path') {
+                    const nextD = getElemAttr(nextElem, 'd');
+                    const nextFill = getElemAttr(nextElem, 'fill');
+                    const nextStroke = getElemAttr(nextElem, 'stroke');
+                    const nextStrokeWidth = getElemAttr(nextElem, 'stroke-width');
+                    const nextStrokeOpacity = getElemAttr(nextElem, 'stroke-opacity');
+                    const nextStrokeDasharray = getElemAttr(nextElem, 'stroke-dasharray');
+
+                    // Check if next path is stroke-only with same d
+                    const isStrokePath = (!nextFill || nextFill === 'none') && nextStroke && nextStroke !== 'none';
+
+                    if (isStrokePath && d === nextD) {
+                        const fillOp = parseFloat(fillOpacity || style['fill-opacity'] || '1');
+                        const strokeOp = parseFloat(nextStrokeOpacity || '1');
+
+                        // CASE 1: Visible fill WITH solid stroke (like filled box with border)
+                        // DON'T merge - keep both as separate elements (a fill shape + border)
+                        if (fillOp >= 0.01 && strokeOp >= 0.99) {
+                            // Mark both as used but create a SHAPE instead of stroke
+                            used.add(i);
+                            used.add(i + 1);
+
+                            // Create a filled shape with border
+                            merged.push({
+                                ...elem,
+                                isPair: true,
+                                isFillWithBorder: true,  // New flag for shapes with fill + border
+                                mergedFillColor: fill,
+                                mergedFillOpacity: fillOp,
+                                mergedStrokeColor: nextStroke,
+                                mergedStrokeWidth: nextStrokeWidth || strokeWidth || '2',
+                                mergedStrokeOpacity: strokeOp,
+                                mergedStrokeDasharray: nextStrokeDasharray
+                            });
+                            continue;
+                        }
+
+                        // CASE 2: Invisible fill (fillOp < 0.01) - eraser/highlighter pattern
+                        // Use stroke color and stroke-opacity
+                        if (fillOp < 0.01) {
+                            used.add(i);
+                            used.add(i + 1);
+                            merged.push({
+                                ...elem,
+                                isPair: true,
+                                mergedColor: nextStroke,
+                                mergedStrokeWidth: nextStrokeWidth || strokeWidth || '2',
+                                mergedOpacity: strokeOp,  // Use stroke-opacity from companion path
+                                originalStrokeColor: nextStroke,
+                                isEraser: fillOp < 0.01 && strokeOp >= 1
+                            });
+                            continue;
+                        }
+
+                        // CASE 3: Semi-transparent fill with semi-transparent stroke (highlighter)
+                        // Merge into single highlighter stroke
+                        used.add(i);
+                        used.add(i + 1);
+                        merged.push({
+                            ...elem,
+                            isPair: true,
+                            mergedColor: fill,
+                            mergedStrokeWidth: nextStrokeWidth || strokeWidth || '2',
+                            mergedOpacity: fillOp,
+                            originalStrokeColor: nextStroke
+                        });
+                        continue;
+                    }
+                }
+            }
+        }
+
+        // Not a pair, add as-is
+        merged.push(elem);
+        used.add(i);
+    }
+
+    return merged;
+}
+
+// ============================================
+// ELEMENT CONVERTERS
+// ============================================
+
+let itemIdCounter = Date.now();
+function generateId() { return itemIdCounter++; }
+
+// Helper to get attribute from element (prefers parsed attrsObj, falls back to regex)
+function getElemAttr(elem, attr) {
+    if (elem.attrsObj && elem.attrsObj[attr] !== undefined) {
+        return elem.attrsObj[attr];
+    }
+    return getAttr(`<${elem.tag} ${elem.attrs}>`, attr);
+}
+
+function convertPath(elem, globalTransform) {
+    const d = getElemAttr(elem, 'd');
+    if (!d) return null;
+
+    let pts = parsePathD(d);
+    if (pts.length < 2) return null;
+
+    // Combine inherited transform (from groups) with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    // Apply group opacity if inherited
+    let groupOpacityMultiplier = elem.groupOpacity !== undefined ? elem.groupOpacity : 1;
+
+    pts = pts.map(p => transformPoint(p.x, p.y, transform));
+
+    // Skip simplification if configured
+    if (!CONFIG.skipSimplification && CONFIG.simplifyTolerance > 0) {
+        pts = simplifyPath(pts);
+    }
+    pts = enforceMaxPoints(pts);
+    if (pts.length < 2) return null;
+
+    // Handle merged pair - fillWithBorder case (visible fill + solid stroke)
+    if (elem.isPair && elem.isFillWithBorder) {
+        const fillOpacity = elem.mergedFillOpacity * groupOpacityMultiplier;
+        const strokeOpacity = elem.mergedStrokeOpacity * groupOpacityMultiplier;
+        const strokeWidth = parseFloat(elem.mergedStrokeWidth) * getMatrixScale(transform);
+        const borderType = getBorderTypeFromDasharray(elem.mergedStrokeDasharray);
+
+        // Try to detect if this is a rectangle-like shape (closed path with 4 corners)
+        const isRectLike = isClosedRectangle(pts);
+
+        if (isRectLike) {
+            // Convert to rectangle shape
+            const bounds = computeBounds(pts);
+            return {
+                id: generateId(),
+                lastMod: Date.now(),
+                tool: 'shape',
+                shapeType: 'rectangle',
+                x: bounds.x,
+                y: bounds.y,
+                width: bounds.width,
+                height: bounds.height,
+                borderColor: parseColor(elem.mergedStrokeColor) || CONFIG.defaultStroke,
+                fillColor: parseColor(elem.mergedFillColor) || '#ffffff',
+                fillOpacity: fillOpacity,
+                borderOpacity: strokeOpacity,
+                borderSize: strokeWidth,
+                borderType: borderType,
+                deleted: false
+            };
+        } else {
+            // Create a polygon shape for non-rectangular paths
+            const bounds = computeBounds(pts);
+            const normalizedPts = pts.map(p => ({
+                x: bounds.width > 0 ? (p.x - bounds.x) / bounds.width : 0,
+                y: bounds.height > 0 ? (p.y - bounds.y) / bounds.height : 0
+            }));
+
+            return {
+                id: generateId(),
+                lastMod: Date.now(),
+                tool: 'shape',
+                shapeType: 'polygon',
+                x: bounds.x,
+                y: bounds.y,
+                width: bounds.width,
+                height: bounds.height,
+                pts: normalizedPts,
+                borderColor: parseColor(elem.mergedStrokeColor) || CONFIG.defaultStroke,
+                fillColor: parseColor(elem.mergedFillColor) || '#ffffff',
+                fillOpacity: fillOpacity,
+                borderOpacity: strokeOpacity,
+                borderSize: strokeWidth,
+                borderType: borderType,
+                deleted: false
+            };
+        }
+    }
+
+    // Handle merged pair - highlighter/eraser case
+    if (elem.isPair) {
+        const opacity = elem.mergedOpacity * groupOpacityMultiplier;
+        const tool = opacity < CONFIG.highlighterOpacityThreshold ? 'highlighter' : 'pen';
+        const strokeWidth = parseFloat(elem.mergedStrokeWidth) * getMatrixScale(transform);
+
+        return {
+            id: generateId(),
+            lastMod: Date.now(),
+            tool,
+            pts,
+            color: parseColor(elem.mergedColor) || CONFIG.defaultStroke,
+            size: strokeWidth,
+            opacity: opacity,  // Always include opacity
+            lineCap: 'round',
+            lineJoin: 'round',
+            deleted: false
+        };
+    }
+
+    // Single path
+    const fill = getElemAttr(elem, 'fill');
+    const stroke = getElemAttr(elem, 'stroke');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+    const fillOpacity = getElemAttr(elem, 'fill-opacity');
+    const strokeOpacity = getElemAttr(elem, 'stroke-opacity');
+    const opacity = getElemAttr(elem, 'opacity');
+    const lineCap = getElemAttr(elem, 'stroke-linecap');
+    const lineJoin = getElemAttr(elem, 'stroke-linejoin');
+    const strokeDasharray = getElemAttr(elem, 'stroke-dasharray');
+
+    // Check if this is a stroke-only path with a dash pattern (dashed/dotted border)
+    // If so, and it looks like a closed rectangle, convert to a shape instead of stroke
+    const isStrokeOnly = (!fill || fill === 'none') && stroke && stroke !== 'none';
+    const hasDashPattern = strokeDasharray && strokeDasharray !== 'none';
+
+    if (isStrokeOnly && hasDashPattern && isClosedRectangle(pts)) {
+        // Convert to rectangle shape with dashed border and no fill
+        const bounds = computeBounds(pts);
+        const borderType = getBorderTypeFromDasharray(strokeDasharray);
+        const strokeOp = parseFloat(strokeOpacity || opacity || '1') * groupOpacityMultiplier;
+        const sw = (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform);
+
+        return {
+            id: generateId(),
+            lastMod: Date.now(),
+            tool: 'shape',
+            shapeType: 'rectangle',
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            borderColor: parseColor(stroke) || CONFIG.defaultStroke,
+            fillColor: 'transparent',
+            fillOpacity: 0,
+            borderOpacity: strokeOp,
+            borderSize: sw,
+            borderType: borderType,
+            deleted: false
+        };
+    }
+
+    // Check if stroke-only with dash pattern but not rectangular - make polygon
+    if (isStrokeOnly && hasDashPattern && pts.length >= 3) {
+        const bounds = computeBounds(pts);
+        const normalizedPts = pts.map(p => ({
+            x: bounds.width > 0 ? (p.x - bounds.x) / bounds.width : 0,
+            y: bounds.height > 0 ? (p.y - bounds.y) / bounds.height : 0
+        }));
+        const borderType = getBorderTypeFromDasharray(strokeDasharray);
+        const strokeOp = parseFloat(strokeOpacity || opacity || '1') * groupOpacityMultiplier;
+        const sw = (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform);
+
+        return {
+            id: generateId(),
+            lastMod: Date.now(),
+            tool: 'shape',
+            shapeType: 'polygon',
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            pts: normalizedPts,
+            borderColor: parseColor(stroke) || CONFIG.defaultStroke,
+            fillColor: 'transparent',
+            fillOpacity: 0,
+            borderOpacity: strokeOp,
+            borderSize: sw,
+            borderType: borderType,
+            deleted: false
+        };
+    }
+
+    const effectiveOpacity = parseOpacity(opacity) * parseOpacity(fillOpacity) * groupOpacityMultiplier;
+    const tool = effectiveOpacity < CONFIG.highlighterOpacityThreshold ? 'highlighter' : 'pen';
+    const color = parseColor(stroke) || parseColor(fill) || CONFIG.defaultStroke;
+    const sw = (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform);
+
+    return {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool,
+        pts,
+        color,
+        size: sw,
+        opacity: effectiveOpacity,  // Always include opacity
+        lineCap: lineCap || 'round',
+        lineJoin: lineJoin || 'round',
+        deleted: false
+    };
+}
+
+function convertRect(elem, globalTransform) {
+    const x = parseFloat(getElemAttr(elem, 'x')) || 0;
+    const y = parseFloat(getElemAttr(elem, 'y')) || 0;
+    const w = parseFloat(getElemAttr(elem, 'width')) || 0;
+    const h = parseFloat(getElemAttr(elem, 'height')) || 0;
+    if (w === 0 || h === 0) return null;
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const fill = getElemAttr(elem, 'fill');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+    const fillOpacity = getElemAttr(elem, 'fill-opacity');
+    const strokeOpacity = getElemAttr(elem, 'stroke-opacity');
+    const strokeDasharray = getElemAttr(elem, 'stroke-dasharray');
+
+    // Determine border type from stroke-dasharray
+    let borderType = 'solid';
+    if (strokeDasharray && strokeDasharray !== 'none') {
+        const parts = strokeDasharray.split(/[\s,]+/).map(parseFloat);
+        if (parts.length >= 2) {
+            // Dotted: small gaps, Dashed: larger gaps
+            const ratio = parts[1] / parts[0];
+            borderType = ratio > 1 ? 'dotted' : 'dashed';
+        }
+    }
+
+    const corners = [
+        transformPoint(x, y, transform),
+        transformPoint(x + w, y, transform),
+        transformPoint(x + w, y + h, transform),
+        transformPoint(x, y + h, transform)
+    ];
+    const xs = corners.map(c => c.x), ys = corners.map(c => c.y);
+    const minX = Math.min(...xs), maxX = Math.max(...xs);
+    const minY = Math.min(...ys), maxY = Math.max(...ys);
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'shape',
+        shapeType: 'rectangle',
+        x: minX, y: minY, w: maxX - minX, h: maxY - minY,
+        border: parseColor(stroke) || CONFIG.defaultStroke,
+        fill: parseColor(fill) || CONFIG.defaultFill,
+        width: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform),
+        rotation: 0,
+        deleted: false
+    };
+
+    // Add separate opacities
+    if (fillOpacity !== undefined && parseFloat(fillOpacity) < 1) {
+        result.fillOpacity = parseFloat(fillOpacity);
+    }
+    if (strokeOpacity !== undefined && parseFloat(strokeOpacity) < 1) {
+        result.borderOpacity = parseFloat(strokeOpacity);
+    }
+    if (borderType !== 'solid') {
+        result.borderType = borderType;
+    }
+
+    return result;
+}
+
+function convertCircle(elem, globalTransform) {
+    const cx = parseFloat(getElemAttr(elem, 'cx')) || 0;
+    const cy = parseFloat(getElemAttr(elem, 'cy')) || 0;
+    const r = parseFloat(getElemAttr(elem, 'r')) || 0;
+    if (r === 0) return null;
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const fill = getElemAttr(elem, 'fill');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+    const fillOpacity = getElemAttr(elem, 'fill-opacity');
+    const strokeOpacity = getElemAttr(elem, 'stroke-opacity');
+    const strokeDasharray = getElemAttr(elem, 'stroke-dasharray');
+
+    let borderType = 'solid';
+    if (strokeDasharray && strokeDasharray !== 'none') {
+        const parts = strokeDasharray.split(/[\s,]+/).map(parseFloat);
+        if (parts.length >= 2) {
+            borderType = parts[1] / parts[0] > 1 ? 'dotted' : 'dashed';
+        }
+    }
+
+    const center = transformPoint(cx, cy, transform);
+    const scaledR = r * getMatrixScale(transform);
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'shape',
+        shapeType: 'circle',
+        x: center.x - scaledR, y: center.y - scaledR, w: scaledR * 2, h: scaledR * 2,
+        border: parseColor(stroke) || CONFIG.defaultStroke,
+        fill: parseColor(fill) || CONFIG.defaultFill,
+        width: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform),
+        rotation: 0,
+        deleted: false
+    };
+
+    if (fillOpacity !== undefined && parseFloat(fillOpacity) < 1) {
+        result.fillOpacity = parseFloat(fillOpacity);
+    }
+    if (strokeOpacity !== undefined && parseFloat(strokeOpacity) < 1) {
+        result.borderOpacity = parseFloat(strokeOpacity);
+    }
+    if (borderType !== 'solid') {
+        result.borderType = borderType;
+    }
+
+    return result;
+}
+
+function convertEllipse(elem, globalTransform) {
+    const cx = parseFloat(getElemAttr(elem, 'cx')) || 0;
+    const cy = parseFloat(getElemAttr(elem, 'cy')) || 0;
+    const rx = parseFloat(getElemAttr(elem, 'rx')) || 0;
+    const ry = parseFloat(getElemAttr(elem, 'ry')) || 0;
+    if (rx === 0 || ry === 0) return null;
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const fill = getElemAttr(elem, 'fill');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+    const fillOpacity = getElemAttr(elem, 'fill-opacity');
+    const strokeOpacity = getElemAttr(elem, 'stroke-opacity');
+    const strokeDasharray = getElemAttr(elem, 'stroke-dasharray');
+
+    let borderType = 'solid';
+    if (strokeDasharray && strokeDasharray !== 'none') {
+        const parts = strokeDasharray.split(/[\s,]+/).map(parseFloat);
+        if (parts.length >= 2) {
+            borderType = parts[1] / parts[0] > 1 ? 'dotted' : 'dashed';
+        }
+    }
+
+    const center = transformPoint(cx, cy, transform);
+    const scale = getMatrixScale(transform);
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'shape',
+        shapeType: 'ellipse',
+        x: center.x - rx * scale, y: center.y - ry * scale, w: rx * 2 * scale, h: ry * 2 * scale,
+        border: parseColor(stroke) || CONFIG.defaultStroke,
+        fill: parseColor(fill) || CONFIG.defaultFill,
+        width: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * scale,
+        rotation: 0,
+        deleted: false
+    };
+
+    if (fillOpacity !== undefined && parseFloat(fillOpacity) < 1) {
+        result.fillOpacity = parseFloat(fillOpacity);
+    }
+    if (strokeOpacity !== undefined && parseFloat(strokeOpacity) < 1) {
+        result.borderOpacity = parseFloat(strokeOpacity);
+    }
+    if (borderType !== 'solid') {
+        result.borderType = borderType;
+    }
+
+    return result;
+}
+
+function convertLine(elem, globalTransform) {
+    const x1 = parseFloat(getElemAttr(elem, 'x1')) || 0;
+    const y1 = parseFloat(getElemAttr(elem, 'y1')) || 0;
+    const x2 = parseFloat(getElemAttr(elem, 'x2')) || 0;
+    const y2 = parseFloat(getElemAttr(elem, 'y2')) || 0;
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+
+    return {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'pen',
+        pts: [transformPoint(x1, y1, transform), transformPoint(x2, y2, transform)],
+        color: parseColor(stroke) || CONFIG.defaultStroke,
+        size: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform),
+        lineCap: 'round',
+        lineJoin: 'round',
+        deleted: false
+    };
+}
+
+function convertPolyline(elem, globalTransform, close = false) {
+    const pointsStr = getElemAttr(elem, 'points') || '';
+    const nums = pointsStr.match(/[-+]?(?:\d+\.?\d*|\.\d+)/g) || [];
+    if (nums.length < 4) return null;
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    let pts = [];
+    for (let i = 0; i < nums.length - 1; i += 2) {
+        pts.push(transformPoint(parseFloat(nums[i]), parseFloat(nums[i + 1]), transform));
+    }
+    if (close && pts.length > 0 && (pts[0].x !== pts[pts.length-1].x || pts[0].y !== pts[pts.length-1].y)) {
+        pts.push({ x: pts[0].x, y: pts[0].y });
+    }
+
+    if (!CONFIG.skipSimplification && CONFIG.simplifyTolerance > 0) {
+        pts = simplifyPath(pts);
+    }
+    pts = enforceMaxPoints(pts);
+    if (pts.length < 2) return null;
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+
+    return {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'pen',
+        pts,
+        color: parseColor(stroke) || CONFIG.defaultStroke,
+        size: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform),
+        lineCap: 'round',
+        lineJoin: 'round',
+        deleted: false
+    };
+}
+
+// Convert polygon to a shape (closed polygon)
+function convertPolygonShape(elem, globalTransform) {
+    const pointsStr = getElemAttr(elem, 'points') || '';
+    const nums = pointsStr.match(/[-+]?(?:\d+\.?\d*|\.\d+)/g) || [];
+    if (nums.length < 6) return null; // Need at least 3 points for a polygon
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    // Parse and transform points
+    let pts = [];
+    for (let i = 0; i < nums.length - 1; i += 2) {
+        pts.push(transformPoint(parseFloat(nums[i]), parseFloat(nums[i + 1]), transform));
+    }
+
+    // Calculate bounding box
+    const xs = pts.map(p => p.x), ys = pts.map(p => p.y);
+    const minX = Math.min(...xs), maxX = Math.max(...xs);
+    const minY = Math.min(...ys), maxY = Math.max(...ys);
+
+    const stroke = getElemAttr(elem, 'stroke');
+    const fill = getElemAttr(elem, 'fill');
+    const strokeWidth = getElemAttr(elem, 'stroke-width');
+    const fillOpacity = getElemAttr(elem, 'fill-opacity');
+    const strokeOpacity = getElemAttr(elem, 'stroke-opacity');
+    const strokeDasharray = getElemAttr(elem, 'stroke-dasharray');
+    const opacity = getElemAttr(elem, 'opacity');
+
+    let borderType = 'solid';
+    if (strokeDasharray && strokeDasharray !== 'none') {
+        const parts = strokeDasharray.split(/[\s,]+/).map(parseFloat);
+        if (parts.length >= 2) {
+            borderType = parts[1] / parts[0] > 1 ? 'dotted' : 'dashed';
+        }
+    }
+
+    // Store normalized points (relative to bounding box)
+    const normalizedPts = pts.map(p => ({
+        x: (p.x - minX) / (maxX - minX || 1),
+        y: (p.y - minY) / (maxY - minY || 1)
+    }));
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'shape',
+        shapeType: 'polygon',
+        x: minX, y: minY, w: maxX - minX, h: maxY - minY,
+        pts: normalizedPts, // Store normalized points for custom polygon
+        border: parseColor(stroke) || CONFIG.defaultStroke,
+        fill: parseColor(fill) || CONFIG.defaultFill,
+        width: (parseFloat(strokeWidth) || CONFIG.defaultStrokeWidth) * getMatrixScale(transform),
+        rotation: 0,
+        deleted: false
+    };
+
+    // Apply group opacity if inherited
+    const groupOpacityMultiplier = elem.groupOpacity !== undefined ? elem.groupOpacity : 1;
+    const effectiveOpacity = parseOpacity(opacity) * groupOpacityMultiplier;
+    if (effectiveOpacity < 1) {
+        result.opacity = effectiveOpacity;
+    }
+
+    if (fillOpacity !== undefined && parseFloat(fillOpacity) < 1) {
+        result.fillOpacity = parseFloat(fillOpacity);
+    }
+    if (strokeOpacity !== undefined && parseFloat(strokeOpacity) < 1) {
+        result.borderOpacity = parseFloat(strokeOpacity);
+    }
+    if (borderType !== 'solid') {
+        result.borderType = borderType;
+    }
+
+    return result;
+}
+
+function convertText(elem, globalTransform) {
+    // Get text content - strip tags but preserve text
+    const text = elem.innerContent.replace(/<[^>]*>/g, '').trim();
+    if (!text) return null;
+
+    // Try to get position from tspan first, then fall back to text element
+    let x = 0, y = 0;
+
+    // Parse tspan for position - tspan often has the actual x/y
+    const tspanMatch = elem.innerContent.match(/<tspan[^>]*\s+x="([^"]+)"[^>]*\s+y="([^"]+)"/);
+    const tspanMatchAlt = elem.innerContent.match(/<tspan[^>]*\s+y="([^"]+)"[^>]*\s+x="([^"]+)"/);
+
+    if (tspanMatch) {
+        // x might be multiple values (kerning) - take the first
+        const xVals = tspanMatch[1].split(/\s+/);
+        x = parseFloat(xVals[0]) || 0;
+        y = parseFloat(tspanMatch[2]) || 0;
+    } else if (tspanMatchAlt) {
+        const xVals = tspanMatchAlt[2].split(/\s+/);
+        x = parseFloat(xVals[0]) || 0;
+        y = parseFloat(tspanMatchAlt[1]) || 0;
+    } else {
+        // Fall back to text element attributes
+        x = parseFloat(getElemAttr(elem, 'x')) || 0;
+        y = parseFloat(getElemAttr(elem, 'y')) || 0;
+    }
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const fill = getElemAttr(elem, 'fill');
+    const fontSize = getElemAttr(elem, 'font-size');
+    const fontFamily = getElemAttr(elem, 'font-family');
+    const pos = transformPoint(x, y, transform);
+    const size = (parseFloat(fontSize) || 16) * getMatrixScale(transform);
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'text',
+        text,
+        x: pos.x, y: pos.y,
+        size,
+        color: parseColor(fill) || CONFIG.defaultStroke,
+        rotation: 0,
+        w: text.length * size * 0.6,
+        h: size * 1.2,
+        deleted: false
+    };
+
+    // Store font family if present
+    if (fontFamily) {
+        result.fontFamily = fontFamily;
+    }
+
+    // Store original SVG structure for precise roundtrip
+    // This preserves kerning, transforms, tspans, etc.
+    const xmlSpace = getElemAttr(elem, 'xml:space');
+    if (elemTransformStr || elem.innerContent.includes('<tspan')) {
+        result.svgData = {
+            transform: elemTransformStr || null,
+            xmlSpace: xmlSpace || null,
+            fontSize: fontSize || null,
+            fontFamily: fontFamily || null,
+            fill: fill || null,
+            innerContent: elem.innerContent
+        };
+    }
+
+    return result;
+}
+
+function convertImage(elem, globalTransform, warnings) {
+    const x = parseFloat(getElemAttr(elem, 'x')) || 0;
+    const y = parseFloat(getElemAttr(elem, 'y')) || 0;
+    const w = parseFloat(getElemAttr(elem, 'width')) || 0;
+    const h = parseFloat(getElemAttr(elem, 'height')) || 0;
+    const href = getElemAttr(elem, 'href') || getElemAttr(elem, 'xlink:href');
+
+    if (!href) return null;
+
+    // Skip images with zero dimensions
+    if (w === 0 || h === 0) {
+        warnings.push('Warning: Image with zero dimensions skipped');
+        return null;
+    }
+
+    // Combine inherited transform with element's own transform
+    const elemTransformStr = getElemAttr(elem, 'transform');
+    const elemTransform = parseTransform(elemTransformStr);
+    const inheritedTransform = elem.inheritedTransform || identityMatrix();
+    const transform = multiplyMatrix(multiplyMatrix(globalTransform, inheritedTransform), elemTransform);
+
+    const topLeft = transformPoint(x, y, transform);
+    const bottomRight = transformPoint(x + w, y + h, transform);
+
+    if (href.startsWith('data:') && href.length > CONFIG.base64WarnSize) {
+        warnings.push(`Warning: Large embedded image (${Math.round(href.length / 1024)}KB)`);
+    }
+
+    // Get opacity (may be inherited from group)
+    const opacity = getElemAttr(elem, 'opacity');
+    const groupOpacity = elem.groupOpacity !== undefined ? elem.groupOpacity : 1;
+    const effectiveOpacity = parseOpacity(opacity) * groupOpacity;
+
+    // Check for mask (warn if present since we can't fully support it)
+    const mask = getElemAttr(elem, 'mask');
+    if (mask) {
+        warnings.push(`Warning: Image has mask "${mask}" which may not render correctly`);
+    }
+
+    const result = {
+        id: generateId(),
+        lastMod: Date.now(),
+        tool: 'image',
+        x: topLeft.x, y: topLeft.y,
+        w: Math.abs(bottomRight.x - topLeft.x),
+        h: Math.abs(bottomRight.y - topLeft.y),
+        src: href,
+        rotation: 0,
+        deleted: false
+    };
+
+    // Add opacity if not fully opaque
+    if (effectiveOpacity < 1) {
+        result.opacity = effectiveOpacity;
+    }
+
+    // Add mask data if this image has a mask applied
+    if (elem.maskId && maskDefinitions[elem.maskId]) {
+        result.mask = {
+            id: elem.maskId,
+            type: maskDefinitions[elem.maskId].type,
+            src: maskDefinitions[elem.maskId].imageData
+        };
+    }
+
+    return result;
+}
+
+// ============================================
+// MAIN CONVERTER
+// ============================================
+
+function convertSVG(svgContent) {
+    const history = [];
+    const warnings = [];
+
+    // Get SVG attributes
+    const svgMatch = svgContent.match(/<(?:\w+:)?svg\s+([^>]*)>/i);
+    if (!svgMatch) return { metadata: { error: 'No SVG element found' }, history: [] };
+
+    const svgAttrs = svgMatch[1];
+    const viewBoxMatch = svgAttrs.match(/viewBox="([^"]*)"/);
+    let viewBox = null, viewBoxOffset = { x: 0, y: 0 };
+
+    if (viewBoxMatch) {
+        const parts = viewBoxMatch[1].split(/[\s,]+/).map(parseFloat);
+        viewBox = { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+        viewBoxOffset = { x: -parts[0], y: -parts[1] };
+    }
+
+    const widthMatch = svgAttrs.match(/width="([^"]*)"/);
+    const heightMatch = svgAttrs.match(/height="([^"]*)"/);
+    const svgWidth = parseFloat(widthMatch?.[1]) || viewBox?.w || 800;
+    const svgHeight = parseFloat(heightMatch?.[1]) || viewBox?.h || 600;
+
+    // Initial transform for viewBox offset
+    let transform = identityMatrix();
+    if (viewBoxOffset.x !== 0 || viewBoxOffset.y !== 0) {
+        transform = [1, 0, 0, 1, viewBoxOffset.x, viewBoxOffset.y];
+    }
+
+    // Extract SVG content
+    const svgContentMatch = svgContent.match(/<(?:\w+:)?svg[^>]*>([\s\S]*)<\/(?:\w+:)?svg>/i);
+    if (!svgContentMatch) return { metadata: { error: 'Could not extract SVG content' }, history: [] };
+
+    // Keep defs - we now process mask/clippath content to include all images
+    const cleanedContent = svgContentMatch[1];
+
+    // Collect all elements in order
+    console.log('Collecting elements in document order...');
+    const elements = collectAllElements(cleanedContent);
+    console.log(`Found ${elements.length} elements`);
+
+    // Detect and merge path pairs
+    console.log('Detecting fill+stroke path pairs...');
+    const mergedElements = detectPathPairs(elements);
+    console.log(`After merging: ${mergedElements.length} elements (${elements.length - mergedElements.length} pairs merged)`);
+
+    // Convert each element
+    console.log('Converting elements...');
+    for (const elem of mergedElements) {
+        try {
+            let item = null;
+            switch (elem.tag) {
+                case 'path': item = convertPath(elem, transform); break;
+                case 'rect': item = convertRect(elem, transform); break;
+                case 'circle': item = convertCircle(elem, transform); break;
+                case 'ellipse': item = convertEllipse(elem, transform); break;
+                case 'line': item = convertLine(elem, transform); break;
+                case 'polyline': item = convertPolyline(elem, transform, false); break;
+                case 'polygon': item = convertPolygonShape(elem, transform); break;
+                case 'text': item = convertText(elem, transform); break;
+                case 'image': item = convertImage(elem, transform, warnings); break;
+            }
+            if (item) history.push(item);
+        } catch (e) {
+            warnings.push(`${elem.tag} conversion error: ${e.message}`);
+        }
+    }
+
+    // Statistics
+    const stats = { pen: 0, highlighter: 0, shape: 0, text: 0, image: 0 };
+    history.forEach(item => { if (stats[item.tool] !== undefined) stats[item.tool]++; });
+
+    console.log('Conversion statistics:');
+    for (const [type, count] of Object.entries(stats)) {
+        if (count > 0) console.log(`  ${type}: ${count} elements`);
+    }
+
+    if (warnings.length > 0) {
+        console.log('\nWarnings:');
+        warnings.forEach(w => console.log(`  ${w}`));
+    }
+
+    // Post-process: Detect background images
+    // Images that cover the full document are likely backgrounds
+    const TOLERANCE = 0.05; // 5% tolerance for size matching
+    const docWidth = svgWidth;
+    const docHeight = svgHeight;
+
+    for (const item of history) {
+        if (item.tool === 'image') {
+            const widthRatio = item.w / docWidth;
+            const heightRatio = item.h / docHeight;
+            const xNearZero = Math.abs(item.x) < docWidth * TOLERANCE;
+            const yNearZero = Math.abs(item.y) < docHeight * TOLERANCE;
+            const widthMatch = widthRatio > (1 - TOLERANCE) && widthRatio < (1 + TOLERANCE);
+            const heightMatch = heightRatio > (1 - TOLERANCE) && heightRatio < (1 + TOLERANCE);
+
+            if (xNearZero && yNearZero && widthMatch && heightMatch) {
+                item.isBackground = true;
+            }
+        }
+    }
+
+    // Count backgrounds
+    const backgroundCount = history.filter(i => i.isBackground).length;
+    if (backgroundCount > 0) {
+        console.log(`Detected ${backgroundCount} background image(s)`);
+    }
+
+    return {
+        metadata: {
+            version: 2,  // New format version
+            sourceType: 'svg',
+            width: svgWidth,
+            height: svgHeight,
+            viewBox,
+            elementCount: history.length,
+            statistics: stats,
+            backgroundCount
+        },
+        history
+    };
+}
+
+// ============================================
+// CLI
+// ============================================
+
+function main() {
+    const args = process.argv.slice(2);
+    if (args.length === 0) {
+        console.log(`
+SVG to ColorRM Converter - Pro Version v3
+==========================================
+
+Usage: node svg-to-colorrm.cjs <input.svg> [output.json]
+
+FIXES in v3:
+  ✓ Recursively processes elements inside groups
+  ✓ Applies inherited transforms from parent groups
+  ✓ Applies per-element transforms
+  ✓ Disabled simplification to preserve hand-drawn curves
+  ✓ Always preserves opacity values for highlighters
+
+PREVIOUS (v2):
+  ✓ Preserves element order (z-order)
+  ✓ Detects fill+stroke path pairs and merges them
+  ✓ Uses fill color, stroke width from pairs
+  ✓ Properly maps low opacity to highlighter tool
+`);
+        process.exit(0);
+    }
+
+    const inputFile = args[0];
+    const outputFile = args[1] || inputFile.replace(/\.svg$/i, '.colorrm.json');
+
+    if (!fs.existsSync(inputFile)) {
+        console.error(`Error: Input file not found: ${inputFile}`);
+        process.exit(1);
+    }
+
+    console.log(`Reading: ${inputFile}`);
+    const svgContent = fs.readFileSync(inputFile, 'utf-8');
+    console.log(`File size: ${Math.round(svgContent.length / 1024)}KB`);
+
+    console.log('\nConverting SVG to ColorRM format...');
+    const result = convertSVG(svgContent);
+
+    console.log(`\nConversion complete!`);
+    console.log(`  Total elements: ${result.history.length}`);
+    console.log(`  Canvas size: ${result.metadata.width} x ${result.metadata.height}`);
+
+    console.log(`\nWriting: ${outputFile}`);
+    fs.writeFileSync(outputFile, JSON.stringify(result, null, 2));
+
+    const outputSize = fs.statSync(outputFile).size;
+    console.log(`Output size: ${Math.round(outputSize / 1024)}KB`);
+    console.log('\nDone!');
+}
+
+if (require.main === module) main();
+
+module.exports = { convertSVG, parsePathD, parseTransform, transformPoint, parseColor, simplifyPath, CONFIG };

x.py

@@ -0,0 +1 @@
+import xml.etree.ElementTree as E, collections as C; print(C.Counter(e.tag.split('}')[-1] for e in E.parse('test_page_1.svg').iter()))