[svgwg] Issue: Feature Request - Native support for branching vectors in SVG (#986) marked as SVG2

caribouW3 has just labeled an issue for https://github.com/w3c/svgwg as "SVG2":

== Feature Request - Native support for branching vectors in SVG ==
### Summary

Today, SVG does not support a way to define a single point that connects to multiple lines or curves as part of the same vector shape. In many practical cases - like drawing letters such as “T” or “Y”, or visualizing networks, trees, and diagrams - this missing feature creates complexity.

I would like to suggest that SVG could include a new primitive to allow authors to declare one starting point for multiple connected paths. This would simplify the structure of the markup and make certain types of drawings easier to describe and maintain.

---

### Background and motivation

SVG is very flexible for 2D vector graphics, but its path logic is always linear. You must define one segment after another, like a continuous pen stroke. If you want to make something that splits - for example, a vertical line with two horizontal branches - you must repeat the same point manually and create multiple `<line>` or `<path>` elements.

This makes it hard to

* Represent shapes that include junctions or crossings
* Maintain logical connections between elements in the DOM
* Animate or style branches as a group
* Understand or edit the file by hand or with code

When creating graphs, trees, or other connected structures, the lack of branching support means authors must use workarounds that do not reflect the real geometry of the drawing.

---

### Example of current limitation

For example, to draw the letter "T", we need two lines:

```xml
<line x1="50" y1="10" x2="50" y2="90" />
<line x1="20" y1="10" x2="80" y2="10" />
```

These two elements are visually linked, but they are not connected logically. If I want to move the intersection point, I must update both lines manually. There is no way to define a branching structure where one point emits multiple strokes.

---

### Proposal

I propose adding a new SVG primitive to represent a branching point. The idea is to declare a common origin point and define several outgoing directions.

Example of possible syntax:

```xml
<branch from="50 50">
  <to x="50" y="10" />
  <to x="20" y="50" />
  <to x="80" y="50" />
</branch>
```

Each `to` element would draw a line starting from the shared origin.

This is not only useful for visual appearance - it would also help to represent the structure of the graphic in a meaningful and reusable way.

---

### Related discussions

I found [Issue #257](https://github.com/w3c/svgwg/issues/257), which discusses a vector-effects concept in SVG 1.2 that included a node-based rendering tree for mesh gradients and visual manipulation.

While that idea had a node-oriented architecture, it was focused on rendering and not on defining the geometry of connected lines or shapes.

My proposal is different - it focuses on **branching as a geometric and structural feature**, not just a visual transformation. The goal is to declare a shared point in the markup that multiple paths connect to, for cases where the topological connection has meaning.

---

### Use cases

1. **Letter design and glyph tools**
   Some letters have strokes that split from one point (like Y or T). A branching element would make it easier to build them with fewer elements.
2. **Graph visualizations**
   In network diagrams, neural nets or flow charts, branches are everywhere. A declarative way to define them would improve readability.
3. **Scientific or technical diagrams**
   For example, electrical circuits or phylogenetic trees require clean and repeatable branches.
4. **Animations and interactions**
   If lines share the same origin, it becomes easier to apply animations to the whole group.

---

### Technical options

**Option A – New `<branch>` element**
This would be a simple and clear addition to the language. It could be introduced in a separate namespace to avoid conflicts.

**Option B – Extend `<path>` with a branching command**
For example, a `B` (branch) command:

```xml
<path d="M50 50 B 80 50, 50 80, 20 50" />
```

This could be harder to implement in rendering engines but might integrate well with current path logic.

**Option C – Use `<defs>` and `<use>`**
This is already possible, but it is too verbose and does not help with semantic meaning.

---

### Final thoughts

I believe this feature would bring a clear benefit to SVG. It would reduce code duplication, improve file structure, and help many types of applications - from font creation to educational diagrams to software tools.

If this is too early to consider as a change to the main spec, would the working group support a discussion or community group to explore the idea

Thank you for your attention and for your continued work improving SVG.

- Christian Sabourin
Web developer

See https://github.com/w3c/svgwg/issues/986


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

Received on Monday, 18 August 2025 09:12:06 UTC