Re: [svgwg] Feature Request - Native support for branching vectors in SVG (#986)

# Annex: Connecting Branches and Complex Shape Support

*This annex extends the original proposal for native branching vectors in SVG to include advanced capabilities for connecting multiple branches and creating complex interconnected shapes.*

---

## Extended Proposal: Multi-Branch Networks

While the original proposal focused on simple branching from a single point, real-world use cases often require **connecting multiple branches together** to form complex topologies. This annex proposes a system for creating interconnected branch networks that can represent sophisticated geometric structures.

### Key Extensions

1. **Branch-to-branch connections** using endpoint references
2. **Path segment reusability** through a reference system  
3. **Complex topology support** for networks, meshes, and hierarchical structures
4. **Intelligent junction management** for automatic connection handling

---

## Syntax Extension: Branch Networks

### Basic Connecting Branches

Building on the original `<branch>` element, we propose a `<branch-network>` container that enables complex interconnections:

```xml
<defs>
  <!-- Reusable path segments -->
  <path id="organic-curve" d="C 20 10, 40 5, 60 15" />
  <path id="technical-line" d="L 50 0" />
  <path id="decorative-spiral" d="Q 10 10, 20 20 Q 30 30, 20 40" />
</defs>

<branch-network>
  <!-- Primary branch -->
  <branch id="main-trunk" from="100 100">
    <to id="north-end" path-ref="organic-curve" />
    <to id="east-end" path-ref="technical-line" />
    <to id="south-end" x="100" y="150" />
  </branch>
  
  <!-- Secondary branches connected to endpoints -->
  <branch id="sub-branches" from="endpoint(main-trunk.north-end)">
    <to path-ref="decorative-spiral" />
    <to x="150" y="50" connect-to="junction-alpha" />
  </branch>
  
  <!-- Explicit junction points -->
  <junction id="junction-alpha" at="150 50">
    <to path-ref="organic-curve" />
    <to x="200" y="80" />
  </junction>
  
  <!-- Direct connections between branch endpoints -->
  <connect from="endpoint(main-trunk.east-end)" 
           to="endpoint(sub-branches.1)" 
           path-ref="technical-line" />
</branch-network>
```

### Advanced Connection Types

```xml
<branch-network>
  <!-- Geometric anchors -->
  <anchor id="spine-base" at="100 200" />
  <anchor id="spine-mid" at="100 150" />
  <anchor id="spine-top" at="100 100" />
  
  <!-- Main structural element -->
  <branch id="backbone" from="spine-base">
    <to target="spine-mid" path-ref="vertebra-segment" />
    <to target="spine-top" path-ref="vertebra-segment" />
  </branch>
  
  <!-- Lateral branches -->
  <branch id="left-ribs" from="spine-mid">
    <to x="70" y="140" path-ref="rib-curve" />
    <to x="60" y="160" path-ref="rib-curve" />
  </branch>
  
  <branch id="right-ribs" from="spine-mid">
    <to x="130" y="140" path-ref="rib-curve" />
    <to x="140" y="160" path-ref="rib-curve" />
  </branch>
  
  <!-- Cross-connections -->
  <connect from="endpoint(left-ribs.0)" 
           to="endpoint(right-ribs.0)" 
           path-ref="connecting-tissue" />
</branch-network>
```

---

## Primary Use Case: Centerline Tracing Integration

This extension directly addresses limitations in tools like **Inkscape's centerline tracing**, which currently generates disconnected path fragments for complex drawings.

### Current Problem

When tracing bitmap images with branching structures (handwriting, botanical illustrations, technical diagrams), existing tools produce:

```xml
<!-- Typical fragmented output -->
<path d="M 100 100 Q 120 80, 150 90" />           <!-- Main stroke -->
<path d="M 130 85 Q 140 70, 160 75" />            <!-- Detached branch -->
<path d="M 125 95 L 140 110 Q 150 120, 170 125" /> <!-- Another fragment -->
<path d="M 145 88 Q 155 85, 165 90" />            <!-- Small detail -->
```

**Issues:**
- No logical connection between related segments
- Duplicated junction points with precision errors
- Difficult post-processing and editing
- Inconsistent rendering at intersections
- No cohesive animation or styling capabilities

### Proposed Solution

```xml
<centerline-trace source="complex-drawing.png">
  <branch-network stroke="black" stroke-width="2" fill="none">
    <!-- Detected main structure -->
    <branch id="primary-stroke" from="auto-detected">
      <to id="main-terminus" path="auto-traced" confidence="0.95" />
    </branch>
    
    <!-- Automatically detected junctions -->
    <junction id="major-split" at="skeleton-point(primary-stroke, 0.4)" 
              tolerance="2px">
      <to id="branch-left" path="auto-traced" confidence="0.87" />
      <to id="branch-right" path="auto-traced" confidence="0.92" />
    </junction>
    
    <!-- Hierarchical sub-branches -->
    <branch from="endpoint(junction.major-split.branch-right)" 
            branch-level="2">
      <to path="auto-traced" confidence="0.76" />
    </branch>
    
    <!-- Quality-based filtering -->
    <cleanup-rules>
      <remove elements="[confidence < 0.5]" />
      <merge-nearby-junctions tolerance="1.5px" />
    </cleanup-rules>
  </branch-network>
</centerline-trace>
```

---

## Extended Examples

### 1. Fractal and Recursive Structures

```xml
<branch-network class="fractal-tree">
  <branch id="trunk" from="200 400" scale="1.0">
    <to id="primary-split" y="300" />
  </branch>
  
  <!-- Recursive branching with scaling -->
  <branch from="endpoint(trunk.primary-split)" scale="0.7">
    <to id="left-branch" path="Q -30 -30, -50 -50" />
    <to id="right-branch" path="Q 30 -30, 50 -50" />
  </branch>
  
  <!-- Further recursion -->
  <branch from="endpoint(left-branch)" scale="0.5">
    <to path-ref="branch-template" transform="rotate(-25)" />
    <to path-ref="branch-template" transform="rotate(25)" />
  </branch>
  
  <branch from="endpoint(right-branch)" scale="0.5">
    <to path-ref="branch-template" transform="rotate(-25)" />
    <to path-ref="branch-template" transform="rotate(25)" />
  </branch>
</branch-network>
```

### 2. Network Diagrams and Flow Charts

```xml
<branch-network class="flowchart">
  <!-- Decision point -->
  <branch id="decision-node" from="150 100">
    <to id="yes-path" x="220" y="140" path-ref="smooth-curve" />
    <to id="no-path" x="80" y="140" path-ref="smooth-curve" />
    <to id="maybe-path" path="Q 150 80, 120 60 Q 90 40, 120 20 
                              Q 150 0, 180 20 Q 210 40, 180 60 
                              Q 150 80, 150 100" />
  </branch>
  
  <!-- Convergence point -->
  <junction id="merge-point" at="150 200">
    <from endpoint="decision-node.yes-path" />
    <from endpoint="decision-node.no-path" />
    <to x="150" y="250" path-ref="continuation" />
  </junction>
  
  <!-- Labels and annotations -->
  <text x="185" y="125" class="path-label">Yes</text>
  <text x="115" y="125" class="path-label">No</text>
  <text x="90" y="60" class="path-label">Review</text>
</branch-network>
```

### 3. Molecular and Chemical Structures

```xml
<defs>
  <path id="single-bond" d="L 40 0" stroke="black" stroke-width="2" />
  <path id="double-bond" d="M 0 -2 L 40 -2 M 0 2 L 40 2" />
  <path id="benzene-edge" d="L 34.6 20" />
</defs>

<branch-network class="molecule">
  <!-- Benzene ring foundation -->
  <regular-polygon id="benzene-ring" center="150 150" 
                   radius="30" sides="6" />
  
  <!-- Ring bonds -->
  <connect from="vertex(benzene-ring, 0)" to="vertex(benzene-ring, 1)" 
           path-ref="single-bond" />
  <connect from="vertex(benzene-ring, 1)" to="vertex(benzene-ring, 2)" 
           path-ref="double-bond" />
  <!-- ... additional ring bonds ... -->
  
  <!-- Functional groups -->
  <branch from="vertex(benzene-ring, 0)">
    <to path-ref="single-bond" />
    <atom type="OH" at="endpoint" />
  </branch>
  
  <branch from="vertex(benzene-ring, 3)">
    <to path-ref="single-bond" />
    <branch from="endpoint">
      <to path-ref="single-bond" />
      <to path-ref="single-bond" transform="rotate(120)" />
      <to path-ref="single-bond" transform="rotate(240)" />
    </branch>
  </branch>
</branch-network>
```

---

## Technical Benefits

### 1. Structural Integrity
- **Automatic junction maintenance**: Moving a branch point updates all connected segments
- **Geometric constraints**: Preserve tangent continuity, parallelism, or other relationships
- **Hierarchical organization**: Clear parent-child relationships between structural elements

### 2. Rendering Optimization
- **Shared rendering context**: All connected branches can be rendered in a single pass
- **Consistent styling**: Properties cascade through the branch hierarchy
- **Efficient updates**: Changes only require re-rendering affected sub-networks

### 3. Animation and Interaction
- **Coordinated transformations**: Animate entire structures as cohesive units
- **Physics simulation**: Enable realistic deformation and movement
- **Interactive editing**: Direct manipulation of junction points affects entire network

### 4. Authoring Workflow
- **Semantic clarity**: Code structure reflects the geometric meaning
- **Reusable components**: Path segments can be defined once and used multiple times
- **Maintainable complexity**: Large structures remain editable and understandable

---

## Implementation Considerations

### Backward Compatibility
The proposed extensions could be implemented progressively:

1. **Phase 1**: Basic `<branch>` element with `path-ref` support
2. **Phase 2**: `endpoint()` references and simple connections  
3. **Phase 3**: Full `<branch-network>` with complex topologies
4. **Phase 4**: Advanced features like constraints and auto-tracing integration

### Fallback Strategy
```xml
<branch-network>
  <branch from="100 100">
    <to path-ref="curve-segment" />
    
    <!-- Fallback for non-supporting browsers -->
    <path d="M100 100 C 120 80, 140 60, 180 70" 
          class="branch-fallback" 
          style="display: none" />
  </branch>
</branch-network>
```

### Namespacing Option
For experimental implementation:
```xml
<svg xmlns:branch="http://www.w3.org/2000/svg/branching">
  <branch:network>
    <branch:branch from="100 100">
      <branch:to path-ref="segment-1" />
    </branch:branch>
  </branch:network>
</svg>
```

---

## Conclusion

This extended proposal addresses the critical gap between simple branching (as in the original proposal) and the complex interconnected structures needed for real-world applications. By enabling **path reusability**, **endpoint connections**, and **network topologies**, SVG would gain the capability to represent sophisticated geometric relationships while maintaining clean, semantic markup.

The centerline tracing use case demonstrates immediate practical value, while the broader applications in technical diagramming, scientific visualization, and generative art show the long-term potential of this extension.

We believe this enhancement would significantly improve SVG's utility for complex graphics while preserving the format's core principles of simplicity and openness.

---

*This annex extends the original proposal submitted by Christian Sabourin. For discussion and feedback, please reference both the original proposal and this connecting branches `extension.*```

-- 
GitHub Notification of comment by csabourin
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/986#issuecomment-3090069114 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 18 July 2025 16:54:08 UTC